3-可见格式化模型

盒模型

盒模型包括内容、内边距、边框、外边距
有一个与边框类似的属性 outline 此属性并不会影响到布局，用来演示布局效果更好
浏览器之间会导致某些元素内外边距的差异，因此可以在样式表中重置内外边距

盒子大小

默认情况下元素盒子的width和height指的是内容盒子，这时候添加边框和内边距不会影响内容盒子的大小，会导致整个元素盒子变大，因此计算时候因考虑到内边距和边框

可以通过box-sizing属性来改变盒模型计算宽度的方法
box-sizing:content-box;这种方式是默认的计算方法，即包含内容边框和内边距，这种方式宽度设定之后再继续设定padding或者border会导致宽度增加
box-sizing:border-box;这种方式盒模型计算宽度会包含边框和内边距即width设定死之后，无论怎么设置内边距还是边框都不会影响到该元素盒子的宽度

PS:box-sizing:border-box;设置为此属性值的时候如果设置width:100px;如果padding+border+内容的值>100px;那么这么盒子会被撑开，反之不会影响到外面布局

box-sizing对响应式布局非常有用

再次PS：如果给元素设置外边距以百分比设定值的话，那么设置的值是以父元素来的值来设定的，如果父元素的值为100px,margin-left:5%;那么此时移动5px;高度因为不固定，所以上次边距的设定不是以这个来的

最大值和最小值

给元素设定最大宽度max-width与最小宽度min-width会使块级元素默认填充父元素宽度，但不会收缩到比最小值还小的宽度

min-height 和 max-height 因为元素的高度通常由内容决定，所以给元素设定高度后，如果内容增多或者字体增大，那么内容就有可能跑到盒子外面去了,如果需要使用，最好也只是使用min-height;

可见格式化模型 ☆☆☆☆☆

匿名盒子

有种情况不明确定义定义元素也会被生成盒子

<section>
    some text
    <p>Some more text</p>
</section>
//以上代码中，some text没有定义为块级元素依旧会被当做块级元素,即构成匿名盒子
//以上第一行some text除了可以用 :first-line 来添加样式之外无从添加

外边距折叠

看到这个时候，今天下班前还遇到了外边距折叠。没看这本书之前我是不明白的。哈哈哈~~~
本身案例：开发小程序的时候，注册有下一步按钮，这个下一步按钮我之前设置了个margin-top:70rpx;后来外边距上面的元素我也设置了margin-bottom：45px;但是却没有被撑得很高，我还一直很困惑，原来这就是外边距折叠，相遇区大的那个值

以上那种情况是相邻的两个元素之间的外边距折叠
一个元素嵌套着另个元素，如果没有内边距或边框来分隔外边距的话，他们的上下边距也会被折叠即子元素的margin值会过渡到父元素中
元素自身的边距折叠，如果一个空元素无宽高边框内边距等那么元素自身的外边距也会折叠，取大的值
如果多个折叠后的外边距，如果遇到其他元素的外边距依旧会折叠

PS：边距折叠只会发生在文档常规文档流的“块级盒子方向上”。行内盒子、浮动盒子或者绝对定位盒子外边距不会折叠

//css
//第二种情况
.box{margin-top:20px;}
.box div{margin-top:30px;}

//html
<body>
    <div class="box">
        <div></div>
    </div>
</body>

包含块

元素的包含块确定要看元素是如何定位的。如果为静态方式即没有指定position的值，包含块就会计算到最近的一个父元素
如果父元素的定位改成absolute或者fixed那么计算依旧会发生变化

相对定位

相对定位的position的值为relative。无论是否设置了位移都会导致遮挡其他元素，并且原来文档流不变

绝对定位

绝对定位会找到最近父级元素定位设置为relative的元素，如果没有相对于html定位，这是脱离文档流了的，并且很少有人用来整体布局了

固定定位

固定定位始终是根据视口来定位的。此种方式可以让导航区始终可见。

浮动

浮动依旧是脱离文档流的。

行盒子与清楚浮动

阻止行盒子环绕在浮动盒子外面，需要给行盒子的父元素添加clear:both;

如果父元素没有设置高度，并且子元素都被设置了浮动，那么需要在内部添加clear 可以在结束的div后面加个空元素设置clear：both;
上面方法可以用伪类来改进，直接为这个伪元素设置清楚浮动

格式化上下文

当一个元素具备了触发新块级格式化上下文的条件，并且挨着一个浮动元素时，它就会忽略自己的边界必须接触自己包含边界的规则。此时这个元素会收缩成适当大小。所有盒子都如此

内在大小与外在大小

contain-floats 目前ie不支持

其他CSS布局模块

表格定位浮动布局都有很大局限性

弹性盒子布局

Flexbox 支持对子元素水平或垂直布局，以及设置这些子元素的大小、间距和对齐方式。此外还能够改变渲染到页面上的顺序
缺点：只是在旧版ie中缺乏或者支持不够完整。

网格布局

网格布局关注“宏观”上面的布局，而flex布局强调的时“微观”因此刚好互补
ie6-9不支持此种布局方式

多栏布局

多栏布局更倾向于排版布局

Region

不做了解

下一张开始更多的代码了