css揭秘系列

BicycleWarrior 发布于2019-08-29 13:55 / 2700人阅读

摘要：基于的解决方案借助规范所引入的和属性，我们可以让它内部的文本也实现居中根据盒对齐模型第三版的计划，在未来，对于简单的垂直居中需求，我们完全不需要动用特殊的布局模式了。因为只需要下面这行代码就可以搞定

7.结构和布局

自适应内部元素:

min-content（容器内部最大的不可断行元素的宽度（即最宽的单词、图片或具有固定宽度的盒元
素）

 
 
 The great Sir Adam Catlace was named after
 Countess Ada Lovelace, the first programmer.
 
问题是文字内容可能很长导问题
解决：
figure {
 max-width: 300px;//兼容其他不支持该属性的浏览器
 max-width: min-content;
 margin: auto;
}
figure > img { max-width: inherit; }

到
水平居中：

行内：text-align:center;
块：margin:auto;

垂直居中（就比较复杂了）--早期定宽元素使用的绝对定位的三种写法

1.
    main {
     position: absolute;
     top: 50%;
     left: 50%;
     margin-top: -3em; /* 6/2 = 3 */
     margin-left: -9em; /* 18/2 = 9 */
     width: 18em;
     height: 6em;
    }
2.
     main {
     position: absolute;
     top: calc(50% - 3em);
     left: calc(50% - 9em);
     width: 18em;
     height: 6em;
    }
3.可以不用知道元素宽高
    main {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
    }

绝对定位的写法有个问题，当元素在高度上超过了视口，那它的顶部会被视
口裁切掉

解决办法
基于视口单位的解决方案（只适用于在视口中居中的场景。）

main {
     width: 18em;
     padding: 1em 1.5em;
     margin: 50vh auto 0;
     transform: translateY(-50%);
    }

基于 Flexbox 的解决方案

body {
 display: flex;
 min-height: 100vh;
 margin: 0;
}
main {
 margin: auto;
}

借助 Flexbox 规范
所引入的 align-items 和 justify-content 属性，我们可以让它内部的文
本也实现居中
main {
display: flex;
align-items: center;
justify-content: center;
width: 18em;
height: 10em;
}

根据盒对齐模型（第三版）（http://w3.org/TR/css-align-3）的计划，在未来，对于简单的垂直居中需求，我们完全不需要动用特殊的布局模式了。因为只需要下面这行代码就可以搞定：

align-self: center;

云服务器 GPU云服务器大揭秘揭秘云存储云计算揭秘人工智能揭秘

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112795.html

揭秘vue——vue-cli3全面配置

摘要：中可以使用注入变量访问环境变量中的配置信息向全局样式传入共享的全局变量在中引用添加兼容在中添加配置完整配置持续更新中揭秘系列目录 √ 配置多环境变量 √ 配置基础 vue.config.js √ 配置 proxy 跨域 √ 修复 HMR(热更新)失效 √ 修复 Lazy loading routes Error： Cyclic dependency √ 添加别名alias √ 压缩...

hatlonely 2019-08-23 13:10 评论0 收藏0
《CSS揭秘》：切角效果

摘要：切角效果切角效果是一种常见的视觉风格设计。但是现在在里，依然无法简单的生成切角效果。原文位于揭秘切角效果。裁切路径方案使用裁切路径可以在裁切任意多边形，下面的代码可以切除和上文一样的效果。改变切角深度时需要同时改变个地方。切角效果切角效果是一种常见的视觉风格设计。但是现在在CSS里，依然无法简单的生成切角效果。 css渐变使用CSS渐变[linear-parent][1]可以形成...

JerryZou 2019-08-29 11:18 评论0 收藏0
《CSS 揭秘》作者Lea Verou：我喜欢分享开源的行业文化

摘要：作为女性，你又来自互联网技术不太发达的希腊。希腊目前可能还存在一些针对女性的性别歧视，但并不明显，不然我可能会被影响到。实际上，有时候希腊在性别平等方面比其他西方国家更进步。本文仅用于学习和交流，不用于商业目的。非商业转载请注明作译者、出处，并保留本文的原始链接：http://www.ituring.com.cn/art... 访谈嘉宾： Lea VerouW3C CSS工作组特邀专...

tianyu 2019-08-29 11:06 评论0 收藏0
《CSS 揭秘》作者Lea Verou：我喜欢分享开源的行业文化

摘要：作为女性，你又来自互联网技术不太发达的希腊。希腊目前可能还存在一些针对女性的性别歧视，但并不明显，不然我可能会被影响到。实际上，有时候希腊在性别平等方面比其他西方国家更进步。本文仅用于学习和交流，不用于商业目的。非商业转载请注明作译者、出处，并保留本文的原始链接：http://www.ituring.com.cn/art... 访谈嘉宾： Lea VerouW3C CSS工作组特邀专...

yzd 2019-08-21 14:14 评论0 收藏0