1. 两栏布局
两栏布局的特征是侧栏固定宽度，主栏自适应宽度。
实现方法：
float + margin：
<body>
<div class="left">定宽</div>
<div class="right">自适应</div>
</body>
.left{
width: 200px;
height: 200px;
background: red;
float: left;
text-align: center;
line-height: 600px;
color: #fff;
}
.right{
margin-left: 210px;
height: 200px;
background: black;
text-align: center;
line-height: 600px;
}
也可以使用绝对定位来实现两栏布局。
2. 三栏布局
三列布局的特征是两侧两列固定宽度，中间列自适应宽度。
实现方法：
float+margin
<div id="content">
<div class="sub">sub</div>
<div class="extra">extra</div>
<div class="main">main</div>
</div>
.sub{
width: 100px;
float: left;
}
.extra{
width: 200px;
float: right;
}
.main{
margin-left: 100px;
margin-right: 200px;
}
position+margin
.sub, .extra {
position: absolute;
top: 0;
width: 200px;
}
.sub {
left: 0;
}
.extra {
right: 0;
}
.main {
margin: 0 200px;
}
3. 水平居中
实现方式：
(1) 行内元素：对父元素设置text-align:center;
(2) 定宽块级元素: 设置左右margin值为auto;
(3) 不定宽块级元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;
(4) 通用方案: flex布局，对父元素设置display:flex;justify-content:center。
4. 垂直居中
实现方式：
(1) 父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height;
(2) 父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;
(3) 块状元素:设置子元素position:absolute 并设置top、bottom为0，父元素要设置定位为static以外的值，margin:auto;
(4) 通用方案: flex布局，给父元素设置{display:flex; align-items:center;}。
5. 定位
定位的概念就是它允许你定义一个元素相对于其他正常元素的位置，它应该出现在哪里，这里的其他元素可以是父元素，另一个元素甚至是浏览器窗口本身。position六个属性值：static、relative、absolute、fixed、sticky和inherit。
6. 盒子模型
每个元素，都会形成一个矩形块，主要包括四部分：margin(外边距)+border(边框)+padding(内边距)+content(内容)
css中存在两种不同的盒子模型，可以通过box-sizing设置不同的模型。两种盒子模型，主要是width的宽度不同。如图：
这是标准盒子模型，可以看到width的长度等于content的宽度；而当将box-sizing的属性值设置成border-box时，盒子模型的width=border+padding+content的总和。
网友评论