摘要：一排版原理改变盒模型计算方式取值初始值举个例子演示结果文档二一些容易被忽视的小细节下面代码，标签的高度是多少解析默认情况下是没有高度只有宽度。使用场景可以利用的百分比来做出一些固定宽高比的盒子。另外注意水平垂直居中的实现方式。
一、CSS排版原理 box-sizing
改变盒模型计算方式
取值：border-box | content-box
初始值：content-box
举个例子：
Box ABox B
演示结果：
box-sizing mdn文档
二、一些容易被忽视的小细节 2.1 下面代码，p标签的高度是多少？Some text
解析：默认情况下body是没有高度只有宽度。所以p标签的父级是body默认高度为0，所以p的高度也是0。
解决办法：可以设置height: 100vh，使用一些屏幕的单位如vh vw，一个屏幕的高度是100vh。
以上代码padding-top等于父容器body的宽度，实现了一个响应式的正方形
解析：padding不管是padding-top还是padding-left，它的百分比都是根据父容器的"宽度"来决定的。
使用场景：可以利用padding的百分比来做出一些固定宽高比的盒子。
2.3 Margin Collapse 合并以前是为了让报纸、排版而设定的
a与b之间的高度还是100px，这就是margin合并。
2.4 利用border可以制作任意角度的三角形通过给border的其他的三条边设置透明色，就可以制作任意角度的三角形。
思考题：这个图标怎么做？
方法1：使用border构造相间的三角形，然后使用overflow-hidden和border-radius剪裁成圆。另外注意水平、垂直居中的实现方式。
方法2：利用svg的虚线来做，这个方法比较灵巧，不容易理解，请多次调试stroke和stroke-dasharray的值加深理解。
方法3：利用css3新特性：锥形渐变。
方法4：也可以使用canvas和js等等。
三、视觉格式化模型视口（viewport）： 浏览器的可视区域
块级元素
会被格式化成块状的元素
例如 p div section
将display设置为block、list-item、table将元素变为块级
行级元素
不会为其内容生成块级框
让其内容分布在多行中
display设置为inline、inline-block、inline-table使元素变为行级
盒子的生成
每个块级元素生成一个主块级盒，用它来包含子级盒
每个行级元素生成一个行级盒，行级盒分布于多行
块级盒子中的子盒子的生成
块级盒子中可以包含多个子块级盒子
也可以包含多个行级盒子
不在行级元素里面的文字，会生成匿名行级盒。比如
Some Text
，some在块级盒子里，并且没有被行级元素包裹，所以会生成匿名的行级盒子。块级盒子中不能同时包含块级和行级盒子。遇到这种情况时，会生成匿名块级盒来包含行级盒。比如 标题
2018-5-12
行级盒子内的子盒子的生成
行级盒子内可以包含行级盒子
行级盒子包含一个块级盒子时，会被块级盒子拆成两个行级盒子，这两个盒子又分别被匿名块级盒包含。
举个栗子文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113451.html
摘要：今日励志语录有志者自有千计万计，无志者只感千难万难。三动画技术越来越不陌生，使用门槛也渐渐降低，而且动画还可以使用控制。扫一扫查看效果打开微扫一扫关注早读君，每天早晨为你推送前端知识，度过挤地铁坐公交的时光 今日励志语录有志者自有千计万计，无志者只感千难万难。 文章原出处：腾讯ISUX 开始阅读之前你可以先扫一扫体验demoshowImg(https://segmentfault.co...
摘要：今日励志语录有志者自有千计万计，无志者只感千难万难。三动画技术越来越不陌生，使用门槛也渐渐降低，而且动画还可以使用控制。扫一扫查看效果打开微扫一扫关注早读君，每天早晨为你推送前端知识，度过挤地铁坐公交的时光 今日励志语录有志者自有千计万计，无志者只感千难万难。 文章原出处：腾讯ISUX 开始阅读之前你可以先扫一扫体验demoshowImg(https://segmentfault.co...
摘要：大家最为熟知的就是负，使用负的，可以用来实现类似多列等高布局垂直居中等等。那还有没有其他一些有意思的负值使用技巧呢下文就再介绍一些负值有意思的使用场景。但是希望无论左侧内容较多还是右侧内容较多，两栏的高度始终保持一致。 写本文的起因是，一天在群里有同学说误打误撞下，使用负的 outline-offset 实现了加号。嗯？好奇的我马上也动手尝试了下，到底是如何使用负的 outline-o...
摘要：在正式前端一些小细节前端掘金英文原文，翻译未来的太让人兴奋了一方面，是全新的页面布局方式另一方面，是酷炫的滤镜颜色等视觉效果。老司机教你更好的进行编程个技巧前端掘金并不总是容易处理。 CSS3 实现文字流光渐变动画 - 前端 - 掘金来自百度前端技术学院的实践任务：有趣的鼠标悬浮模糊效果，参考：http://ife.baidu.com/course/d...，用CSS3实现了一下，顺便...
阅读 3379·2021-11-22 09:34
阅读 649·2021-11-19 11:29
阅读 1349·2019-08-30 15:43
阅读 2232·2019-08-30 14:24
阅读 1865·2019-08-29 17:31
阅读 1222·2019-08-29 17:17
阅读 2616·2019-08-29 15:38
阅读 2728·2019-08-26 12:10
