CSS 布局方式
2018-04-18 本文已影响247人
你看我像豆子嘛
W3C标准
由万维网联盟制定的一系列标准，包括：
- 结构化标准语言（HTML和XML）
- 表现标准语言（CSS）
- 行为标准语言（DOM和ECMAScript）
CSS中的定位机制
在CSS中存在三种定位机制：
- 标准文档流（Normal flow）
- 浮动（Floats）
- 绝对定位（Absolute positioning）
标准文档流特点
- 从上到下，从左到右，输出文档内容
- 由块级元素和行级元素组成
块级元素特点
- 从左到右撑满页面，独占一行
- 触碰到页面边缘时，会自动换行
行级元素特点
- 能在同一行内显示
- 不会改变HTML文档结构
注意： 块级元素和行级元素都是盒子模型
盒子模型
盒子模型—网页布局的基石,由4部分组成
- 边框（border）
- 外边距（margin）
- 内边距（padding）
- 盒子中的内容（content）
前三者是盒子模型的特性，最后一点可以理解为盒子模型的功能，可用于盛放网页内容，包括文本、图片、音频、视频等
盒子模型的三维立体结构
第一层：border 第二层：内容+padding 第三层：背景图片 第四层：背景颜色 第五层：外边距
盒子模型尺寸
盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸
注意：
- 标准盒子模型： 宽度= 内容的宽度（content）+ border+ padding+ margin
- 低版本IE盒子模型： 宽度= 内容的宽度（content+ border+ padding）+ margin
区别在于内容的宽度是否包含border和padding，可通过设置box-sizing:border-box(内容宽度包含border和padding值)来实现统一
table 实现布局
最初网页出现时使用，DIV布局出现后废弃
两栏布局
两栏布局：一栏定宽，一栏自适应。这样子做的好处是定宽的那一栏可以做广告，自适应的可以作为内容主体。
实现方式
-
float+margin
<body> <div class="left">定宽</div> <div class="right">自适应</div> </body> .left{ width: 200px; height: 600px; background: red; float: left; display: table; text-align: center; line-height: 600px; color: #fff; } .right{ margin-left: 210px; height: 600px; background: yellow; text-align: center; line-height: 600px; }
如下图：
two-layout.png
- 其他的方法：还可以使用position的absolute，可以使用同样的效果
三栏布局
特点：两边定宽，然后中间的width是auto的，可以自适应内容，再加上margin边距，来进行设定。
float 实现三栏布局
使用左右两栏使用float属性，中间栏使用margin属性进行撑开，注意的是html的结构
<div class="left">左栏</div>
<div class="right">右栏</div>
<div class="middle">中间栏</div>
.left{
width: 200px;height: 300px; background: yellow; float: left;
}
.right{
width: 150px; height: 300px; background: green; float: right;
}
.middle{
height: 300px; background: red; margin-left: 220px; margin-right: 160px;
}
如下图：
third-layout.png
缺点：
- 当宽度小于左右两边宽度之和时，右侧栏会被挤下去
- html的结构不正确
position 定位实现
左右两栏使用position进行定位，中间栏使用margin进行定位
<div class="left">左栏</div>
<div class="middle">中间栏</div>
<div class="right">右栏</div>
.left{
background: yellow;
width: 200px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
.middle{
height: 300px;
margin: 0 220px;
background: red;
}
.right{
height: 300px;
width: 200px;
position: absolute;
top: 0;
right: 0;
background: green;
}
如下图：
30096185-9cb152e8-9309-11e7-9351-6324d96130ba.png
缺点：当父元素有内外边距时，会导致中间栏的位置出现偏差
float和BFC配合圣杯布局
将middle的宽度设置为100%，然后将其float设置为left，其中的main块设置margin属性，然后左边栏设置float为left，之后设置margin为-100%，右栏也设置为float：left，之后margin-left为自身大小。
<div class="wrapper">
<div class="middle">
<div class="main">中间</div>
</div>
<div class="left">
左栏
</div>
<div class="right">
右栏
</div>
</div>
.wrapper{
overflow: hidden; //清除浮动
}
.middle{
width: 100%;
float: left;
}
.middle .main{
margin: 0 220px;
background: red;
}
.left{
width: 200px;
height: 300px;
float: left;
background: green;
margin-left: -100%;
}
.right{
width: 200px;
height: 300px;
float: left;
background: yellow;
margin-left: -200px;
}
如下图：
bfc-layout.png
缺点：
- 结构不正确
- 多了一层标签
flex 布局
<div class="wrapper">
<div class="left">左栏</div>
<div class="middle">中间</div>
<div class="right">右栏</div>
</div>
.wrapper{
display: flex;
}
.left{
width: 200px;
height: 300px;
background: green;
}
.middle{
width: 100%;
background: red;
marign: 0 20px;
}
.right{
width: 200px;
height: 3000px;
background: yellow;
}
如下图：
third-layout.png
缺点： 兼容性问题
