# CSS 相关
# 1. 双飞翼布局
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<!-- 右栏部分要写在中间内容之前 -->
<div class="right">Right</div>
</div>
<style>
/* 通用部分 */
body,
html,
.container {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 解法一: 使用margin + float
优缺点分析
优点: 快捷 简单 兼容性较好
缺点: 有局限性 脱离文档流 需要清除浮动等
.left, .right, .main
height 100%
background red
width 200px
.left
float left
.right
float right
.main
margin 0 200px
background blue
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 解法二: 使用position
优缺点分析
优点: 优点：简单粗暴
缺点: 脱离文档流 高度未知会出现问题 可用性差
.left, .right
position absolute
height 100%
width 200px
top 0
background #333
.left
left 0
.right
right 0
.main
height 100%
margin 0 200px
background red
/*或者中间也进行绝对定位*/
.main
position absolute
height 100%
left 200px
right 200px
background red
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 解法三: 使用flex
优缺点分析
优点: 比较完美 移动端首选
缺点: 兼容性，不兼容 ie9 及以下
.container
display flex
flex-direction row
.left, .right
flex 0 0 200px
width 200px
background red
.main
flex 1
background blue
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 解法四: 使用table
优缺点分析
优点: 兼容性很好（ie8 及以上） 父元素高度会被子元素撑开（不担心高度塌陷）
缺点: 当其中一个单元格高度超出的时候，其他的单元格也是会跟着一起变高的
.container
display table
width 100%
.left, .right, .main
display table-cell
.left, .right
width 200px
background red
.main
background blue
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 解法五: 使用grid
优缺点分析
优点: 简单强大 解决二维布局问题
缺点: 不兼容 ie9 及以下
.container {
display grid
width 100%
grid-template-rows 100px /*设置行高*/
grid-template-columns 200px auto 200px /*设置列数属性*/
.left, .right
background red
.main
background blue
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 2. 移动端实现1px
# 3. transform与position:absolute 的区别
# 4. 实现高度自适应
# 5. 列举flexbox的属性
# 5.1 容器属性
| 属性名 | 作用 | 可选值 | 默认值 |
|---|---|---|---|
| flex-direction | 项目在主轴的呈现方向 | row | row-reverse | column | column-reverse | row |
| flex-wrap | 换行方式 | nowrap | wrap | wrap-reverse | nowrap |
| flex-flow | 主轴方向与换行方式的简写 | flex-direction || flex-wrap | row nowrap |
| justify-content | 项目在主轴上的对齐方式 | flex-start | flex-end | center | space-between | space-around | flex-start |
| align-items | 项目在交叉轴上对齐方式 | flex-start | flex-end | center | baseline | stretch | flex-start |
| align-content | 多根轴线的对齐方式 | flex-start | flex-end | center | space-between | space-around | stretch | flex-start |
# 5.2 项目属性
| 属性名 | 作用 | 可选值 | 默认值 |
|---|---|---|---|
| order | 定义项目的排列顺序 | integer，数字越小越靠前 | 0 |
| flex-grow | 放大比例 | number | 0 |
| flex-shrink | 缩小比例 | number | 1 |
| flex-basis | 占据的主轴空间 | length，具体占据宽高size | auto |
| flex | flex-grow,flex-shrink和flex-basis的简写 | flex-grow, flex-shrink, flex-basis | 0,1,auto |
| align-self | 对齐方式 | auto | flex-start | flex-end | center | baseline | stretch | auto |