开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第十六天,点击查看活动详情

深入解析CSS(第三天)

在开发者设计网页时多多少少会涉及到元素布局这个东西,在复杂网站上,你可能会用float,相对定位,绝对定位以及css的新特性flex布局,网格布局,table布局等等,我们会发现元素布局这个东西需要掌握的内容太多了,学会所有的布局相关的技术显然是不太现实.

在学习布局还不如先学习布局的基础篇——–>文档流和盒模型

盒模型

有时我们会看到一些简单的页面布局,例如掘金的首页,上面是网页头部，下面是两列内容,这或许也是比较常见的布局方式,接下来我们就通过实例来学习盒模型

简单搭建

新建一个网页和一个空的样式表，将其链接到一起。该网页有一个头部、一个主元素和一个侧边栏，它们构成了网页的两列，并由一个容器元素包了起来。

浮动布局

我们可以浮点布局来实现左右对齐二列

两列并没有并排出现，而是折行显示。虽然将两列宽度设置为70%和30%，但它们总共占据的宽度超过了可用空间的100%，这是因为盒模型的默认行为。当给一个元素设置宽或高的时候，指定的是内容的宽或高，所有内边距、边框、外边距都是追加到该宽度上的。

这种行为会让一个宽300px、内边距10px、边框1px的元素渲染出来宽322px（宽度加左右内边距再加左右边框）。如果这些值使用不同的单位，情况就会更复杂。在以上例子中，侧边栏的宽度等于50%宽度加上各1.5em的左右内边距，主容器的宽度只占50%。两列宽度加起来等于100%宽度加上3em。因为放不下，所以两列便折行显示了,为了我们可以通过calc来实现宽度加起来等于100%

但是有更好的一种方式就是调整盒模型

调整盒模型

我们需要让指定的宽度包含内边距和边框。在CSS中可以使用box-sizing属性调整盒模型的行为,box-sizing的默认值为content-box，这意味任何指定的宽或高都只会设置内容盒子的大小。将box-sizing设置为border-box后，height和width属性会设置内容、内边距以及边框的大小总和.

全局设置border-box

现在这两个元素的box-sizing更符合预期了，但是以后使用其他元素时还会遇到同样的问题。最好能一次解决，这样以后就不用再想着调整盒模型了。通用选择器（＊）选中了页面上所有元素，并用两个选择器选中了网页的所有伪元素。将这段代码放到你的样式表开头。

但是，如果在网页中使用了带样式的第三方组件，就可能会因此破坏其中一些组件的布局，尤其是当第三方组件在开发CSS的过程中没有考虑到使用者会修改盒模型时。因为全局设置border-box时使用的通用选择器会选中第三方组件内的每个元素，修改盒模型可能会有问题，所以最终需要写另外的样式将组件内的元素恢复为content-box。有一种简单点的方式，是利用继承改一下修改盒模型的方式。