The box model
In HTML, every element is considered a box. 整个页面就是盒子的堆叠与嵌套。We can use CSS to set their size and position.
一个盒子由四部分构成：content, padding（内边距）, border, margin. 可以通过给每一部分设置背景颜色来查看，也可以利用浏览器的开发者模式查看。如果有一些莫名其妙的间距，也可以通过开发者模式进行查看，很可能是浏览器默认渲染的。
在布局调试过程中，border和background-color是用来可视化元素的技术，有助于debug。
盒子的大小有两种度量方式：
-
border-box
这样 width 和 height 指的就是整个盒子的大小了，这在布局的时候很有用。Margin是不算在border box里面的。 -
content-box
虽然不好用，但却是默认的！于是我们就想把这个盒子的设置放到bodyselector里面，省的每个盒子都要设置。但是box-sizing这个属性不允许继承！解决办法是利用*selector。star 表示全部，因此所有的元素都会被这个选择器选中。因此就绕过了继承的问题。
* {
box-sizing: border-box;
}
Border-box is a property that's new in CSS3. Whenever you hear something like that an alarm bell should go off. Does every browser that I deal with support border-box? Well, we know just the resource to check that out. And we'll go to the website called can i use.
两个盒子挨在一起的时候，横向的margin会叠加，竖向的margin不叠加，而是取较大的那个。
Content设定的尺寸太小会出现什么情况？内容溢出。
处理溢出的办法，设置overflow属性的值：hidden, auto or scroll.
background-color：设置得是padding和content的颜色。margin的颜色归父级元素管。
background-image：插入图片。
width设置成百分数，就是指占父级容器宽度的百分比。如果设置成90%，左右margin可以设置为auto，不用自己指定。
Positioning elements by floating
float是盒子的一个属性。一个Block-level element本来是要占一行的，一旦设置了float属性，盒子就会根据自己的实际大小进行自动浮动，表现的像是inline-element，使得布局更灵活，而不是固定不变的。
都排成一排也不好，怎么换行呢？利用clear属性：
-
clear: left;表示盒子左边不能有别的盒子。 -
clear: right;表示盒子右边不能有别的盒子。 -
clear: bouth;表示盒子两边都不能有别的盒子。
子div有内容，父div高度居然为0！似乎没有达到嵌套效果。原因是floats are taken out of normal document flow. 解决的办法是添加一个新的子div，设置clear：both。
Floats don't have vertical margin collapse.
Relative and Absolute element positioning
- 相对定位就是相对于原来自己的左上角进行定位。自己原来的位置仍然保留。
- 绝对定位就是相对于父级容器的左上角进行定位。自己原来的位置不再保留。
- 所以父级容器移动的时候，其内部的元素就可以一起跟着移动，不用一个一个设置相同的位移。实现了代码去重。
- 父级容器的
positioning属性必须不能是static的，which is default for all element, except for <html>。这个要求很容易实现，只要将父级元素的positioning属性设置为relative，不指定偏移量即可。
网友评论