CSS 布局
1.盒模型
box-sizing详细介绍
display: 确定元素的显示类型block/inline/inline-block
position: 确定元素的位置static/relative/(absolute/fixed)脱离文档流
2.table 表格布局
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
| # HTML
<div class="table">
<div class="table-row">
<div class="left table-cell">
左
</div>
<div class="right table-cell">
右
</div>
</div>
</div>
# CSS
.table{
margin-top:20px;
display:table;
width:800px;
height:200px;
}
.table-row{
display:table-row;
}
.table-cell{
vertical-align:center;
display:table-cell;
}
|
3.flexbox 弹性盒子布局
盒子本来就是并列的，制定宽度即可
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
| # HTML
<body>
<div class="container">
<div class="flex">
flex
</div>
</div>
<div class="container">
<div class="flex">
flex
</div>
</div>
<div class="container">
<div class="flex">
flex
</div>
</div>
</body>
# CSS
.container{
width:800px;
height:200px;
display:flex;
border:1px solid black;
}
.flex{
bakground:red;
margin:5px;
flex:1
}
|
低版本IE大多不支持。
4.Float 布局
元素浮动，脱离文档流，不脱离文本流。
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
43
44
| # HTML
<body>
<div class="container">
<span class="p1">
float
</span>
<div class="p2">
很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字
</div>
</div>
</body>
# CSS
.container{
background:red;
width:400px;
/* margin:20px; */
}
.p1{
background:green;
float:left;
width:200px;
height:50px;
}
.container::after{
content: 'aaa';
clear:both;
display:block;
visibility:hidden;
height:0;
}
|
图文混排效果，对自身影响：形成“块”（BFC），位置尽量靠上，位置尽量靠左（注释了的HTML代码就是例子）。对兄弟元素的影响：上面贴非float元素，旁边贴float元素，不影响其它块级元素，影响其它块级元素的文本内容。对父级元素的影响：从布局上“消失”，高度塌陷。（第三个例子），解决办法：让父元素也变成（BFC），clear:both;
5.inline-block 布局
像文本一样排block元素没有清楚浮动等问题需要处理间隙
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
| # HTML
<body>
<div class="container">
<div class="left">
左
</div>
<div class="right">
右
</div>
</div>
</body>
# CSS
<style>
.container{
width:800px;
height:200px;
font-size:0; //将字体设置为零，间隙就会消失
}
.left{
font-size:14px; //字体也会消失，在这里把字体设置回来
background:red;
display:inline-block;
width:200px;
height:200px;
}
.right{
font-size:14px;
background:blue;
display:inline-block;
width:500px;
height:200px;
}
</style>
|
使用这种布局做自适用比较困难，做定宽的东西比较适合。
6.响应式设计和布局
在不同设备上正常使用，一般主要处理屏幕大小问题。主要方面：隐藏 + 折行 + 自适应空间rem / viewport / media query
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
| # HTML
<head>
<meta name="viewport" content="width=device-width", initial-scale="1.0">
<body>
<div class="container">
<div class="left">
这里是一些不重要的内容，比如友情链接、广告
</div>
<div class="right">
这里是一些重要的内容，比如文章，文章是整个页面的核心内容。这里是一些重要的内容。
</div>
</div>
</body>
</head>
# CSS
<style>
.container{
margin:0 auto;
max-width:800px;
display:flex;
border:1px solid black;
}
.left{
display:flex;
width:200px;
background:red;
margin:5px;
}
.right{
display:flex;
flex:1;
background:blue;
margin:5px;
}
</style>
|
折行的设计：
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| # HTML
<head>
<meta name="viewport" content="width=320">
<body>
<div class="container">
<div class="intro">
介绍1
</div>
<div class="intro">
介绍2
</div>
<div class="intro">
介绍3
</div>
<div class="intro">
介绍4
</div>
</div>
</body>
</head>
# CSS
<style>
html{
font-size:20px;
}
.container{
margin:0 auto;
max-width:800px;
border:1px solid black;
}
.intro{
display:inline-block;
width:9rem;
height:9rem;
line-height:9rem;
text-align:center;
border-radius:4.5rem;
border:1px solid red;
margin:.3rem;
}
</style>
|
精准度较高的地方避免使用rem
7.主流网站使用的布局方式
1.QQ.com float布局，定宽，::after清除浮动。2.163.com float布局，::after清除浮动。3.baidu.com float布局，放元素清除浮动。4.apple.com flex布局，兼容性做了很多。
布局面试题
实现两栏（三栏）布局的方法：
- 表格布局
float + margin 布局（兼容性很好）inline-block 布局flexbox 布局（兼容性没那么好）
position:absolute/fixed有什么区别：
前者相对最近的absoute/relative后者相对屏幕（viewport）
display:inline-block的间隙：
原因：字符间距
解决：消灭字符或者消灭间距
如何清除浮动：
让盒子负责自己的布局
overflow:hidden(auto)
::after{clear:both}
如何适配移动端的页面
viewport
rem / viewport / media query
设计上：隐藏 折行 自适应
浮动布局是重点（国内多用）