# 布局基础

# `box-sizing`

关于box-sizing的作用，还有另一种表述：告诉浏览器，是使用W3C盒模型，还是使用IE盒模型。

box-sizing: content-box; /*W3C盒模型*/ --后来才有的，默认的
box-sizing: border-box; /*IE盒模型*/ --其实就是怪异模式

1
2

# `box-sizing`最佳实现

如果需要兼容IE6，7则使用标准盒模型，因为IE模型被干掉了。
如果兼容IE8以上，则都可以使用，不过IE模型不支持IE8的max/min-width、max/min-height四个属性。

# 元素分类及布局特性

块级元素

独占一行，高度为0，宽度默认占一行；可以设置任何尺寸相关属性。

行内元素

可置换行内元素
不可置换行内元素

不能设置宽高，margin-top/bottom无效

行内块级元素

inline-block内联块状元素同时具备内联元素、块状元素的特点。

WARNING

现象两个inline-block元素放到一起会产生一段空白。

产生空白的原因 元素被当成行内元素放置的时候，元素之间的空白符（空格，回车换行等）都会被浏览器处理，根据CSS中空白属性的处理方式（否则是正常，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符较长一定长度，所以inline-block的元素之间就出现了空隙。

解决办法

将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行
父元素中设置字体大小：0，在子元素上重置正确的字体大小
为子元素设置float：left

# 格式化上下文(BFC)

W3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（例如，内联块，表单元格和表标题），以及溢出值不为“可见”的块级盒子，，都会为他们的内容创建新的BFC（阻止Fromatting上下文，即块级格式文本）。通俗来讲就是会创建一个特殊的区域，在这个区域中，只有block box参与布局；而BFC一系列特点和规则规定了在这个特殊区域中如何进行布局，如何进行定位，区域内元素的相互关系和相互作用是怎样的。这个特殊区域不受外界影响。block box是指display为block list-item table的元素

触发BFC方式；

根元素
浮动元素
position的值为absolute或fixed
display的值为inline-block、table-cell、table-caption、table-block
flex/grid布局
overflow为非visible
float不为none

BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与外部float box重叠，而是会依次排列。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算(就可以解决浮动元素导致父元素高度塌陷的问题了，让父元素形成bfc区域)

从以上规则可以得出一些关键要点：

边距折叠
清除浮动
自适应多栏布局

# 多种布局情景

自适应两列布局

根据BFC规则第三条

<div class="left"></div> <!--形成bfc-->
<div class="right"></div>

1
2

body {
    width:600px;
    position: relative;
}
.left {
    width: 80px;
    height: 150px;
    float: left;
    background: blue;
}
.right {
    height: 200px;
    background: red;
    overflow:hidden;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

根据第四条规则让right也为bfc区域，所以可以给right的属性补充overflow:hidden

三列布局

双飞翼布局

<div class="main">
    <div class="middle">
        <div class="content">
            中间
        </div>
    </div>
    <div class="left">
        左边
    </div>
    <div class="right">
        右边
    </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

* {
    margin: 0;
    padding: 0;
}

body,
html {
    width: 100%;
    height: 100%;
}
div{
    height: 100%;
}
.main>div {
    float: left;
}

.left {
    width: 200px;
    background: red;
    margin-left: -100%;
}

.right {
    width: 200px;
    background: blue;
    margin-left: -200px;
}

.middle {
    width: 100%;
    background: yellow;

}

.content {
    margin-left: 200px;
    margin-right: 200px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

圣杯布局

<div class="main">
    <div class="center">中间中间中间中间中间中间中间后</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

1
2
3
4
5

* {
    margin: 0;
    padding: 0;
    
}

.main {
    height: 200px;
    padding: 0 150px 0 200px;
    background: greenyellow;
    *zoom: 1;
}

.left,
.center,
.right {
    float: left;
}

.center {
    width: 100%;
    height: 200px;
    background: red;
}

.left {
    width: 200px;
    height: 200px;
    background: yellow;
    margin-left: -100%;
    position: relative;
    left: -200px;
}

.right {
    width: 150px;
    height: 200px;
    background: gainsboro;
    margin-left: -150px;
    position: relative;
    left: 150px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

垂直方向上的布局

这种布局将页面分成上、中、下三个部分，上、下部分都为固定高度，中间部分高度不定。当页面高度小于浏览器高度时，下部分应固定在屏幕底部；当页面高度超出浏览器高度时，下部分应该随中间部分被撑开，显示在页面最底部。这种布局也称之为sticky footer，意思是下部分粘黏在屏幕底部。(blue面试)

<body>
　　<div class="content"></div>
　　<div class="footer"></div>
</body>

1
2
3
4

.content{
     min-height:calc(100vh-footer的高度);
     box-sizing:border-box;
}

1
2
3
4

这种情况页面footer高度不一样就要重新计算了

使用flex布局

body { 
    display: flex; 
    flex-flow: column; 
    min-height: 100vh;
 }
 .content {
    flex: 1; 
}
.footer{
    flex: 0;      
}

1
2
3
4
5
6
7
8
9
10
11

在content的外面添加wrapper

<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>

1
2
3
4
5
6

html, body, .wrapper {
     height: 100%;
}
body > .wrapper {
     height: auto; 
     min-height: 100%;
}
.content {
    padding-bottom: 150px; /* 必须使用和footer相同的高度 */
}  
.footer {
    position: relative;
    margin-top: -150px; /* footer高度的负值 */
    height: 150px;
    clear:both;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

保证兼容性需要在wrapper上添加clearfix类。

<body>
    <div class="wrapper clearfix">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>

1
2
3
4
5
6

.clearfix{
     display: inline-block;
}
.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}

1
2
3
4
5
6
7
8
9
10

← CSS命名规范