一.水平居中
子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。
子元素为
- 行内元素：对父元素设置
text-align:center; - 定宽块状元素: 设置左右
margin: 0 auto; - 不定宽块状元素: 设置子元素为
display: inline-block,然后在父元素上设置text-align:center; - 通用方案: flex布局，对父元素设置
display:flex;justify-content:center;
注意:内联元素 ,块级元素和行内块元素的区别:
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
二.垂直居中
垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。
- 父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height
<div class="parent">
<span class="child">
12234
</span>
</div>
.parent{
height: 50px;
line-height: 50px;
}
- 父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;
<div class="parent">
<span class="child">
12234 <br>
2345
</span>
</div>
.parent{
height: 100px;
display: table-cell;
vertical-align:middle;
}
-
块状元素:设置子元素position:absolute 并设置top、bottom为0，父元素要设置定位为static以外的值，margin:auto;
-
通用方案: flex布局，给父元素设置{display:flex; align-items:center;}。
注意:
vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
一个问题:
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙,怎么解决?
- 给img vertical-align:middle | top等等。 让图片不要和基线对齐
- 给img vertical-align:middle | top等等。 让图片不要和基线对齐
.parent{
border: 1px solid red;
}
img{
/* vertical-align: bottom; */
display: block;
}
三.css布局
单列布局
1.上中下等宽布局
<div id="container">
<div id="header">头部</div>
<div id="content">内容</div>
<div id="footer">尾部</div>
</div>
body{margin: 0;}
#container{
height: 100%;
/* width: 960px; */
/*设置width当浏览器窗口宽度小于960px时，单列布局不会自适应。*/
max-width: 960px;
margin: 0 auto;
}
#header{
height: 20%;
background-color: red;
}
#footer{
height: 20%;
background-color: yellow;
}
#content{
height: 60%;
background-color: green;
}
2.上下浏览器宽度,中间内容宽度
<div id="container">
<div id="header">
<div class="layout">头部</div>
</div>
<div id="content" class="layout">内容</div>
<div id="footer">
<div class="layout">尾部</div>
</div>
</div>
#container{
height: 100%;
}
#header{
background-color: yellow;
height: 20%;
}
#content{
background-color: green;
height: 60%;
}
#footer{
background-color: red;
height: 20%;
}
.layout{
/*width: 960px;*/
max-width: 960px;/*当浏览器宽度小于960px时,效果与第一种方法相同*/
margin: 0 auto;
}
二三列布局
1.float+margin
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="content"></div>
</div>
div{height: 100%;}
#left{
width: 100px;
float: left;
background-color: red;
}
#right{
width: 100px;
float: right;
background-color: yellow;
}
#content{
margin: 0 100px;/* 或者换成overflow: hidden; 触发了BFC使重新计算宽度，就不需要写margin了*/
background-color: green;
}
DOM顺序固定！
效果：（缺点：先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列，渲染时先渲染了侧边栏，而不是比较重要的主面板.。）
2.绝对定位法
<div id="container">
<div id="left"></div>
<div id="content"></div>
<div id="right"></div>
</div>
div{height: 100%;}
#left,#right{
position: absolute;
top: 0;
width: 100px;
}
#left{
left: 0;
background-color: red;
}
#right{
right: 0;
background-color: yellow;
}
#content{
margin: 0 100px;/* overflow: hidden; */
background-color: green;
}
DOM顺序可以随意调整！
缺点在于：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。
3.margin负值法（圣杯布局）
<div id="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
.main {
float: left;
width: 100%;
}
.left {
float: left;
width: 190px;
margin-left: -100%;
position: relative;
left: -190px;
}
.right {
float: left;
width: 230px;
margin-left: -230px;
position: relative;
right: -230px;
}
#container {
padding: 0 230px 0 190px;
}
DOM元素的书写顺序不得更改。
主面板部分优先渲染（一般主面板会比侧栏内容重要）。
当面板的main内容部分比两边的子面板宽度小的时候，布局就会乱掉。
4.margin负值法（双飞翼法）
<div class="main-wrap">
<div class="main">#main</div>
</div>
<div class="sub"></div>
<div class="extra"></div>
.main-wrap {
float: left;
width: 100%;
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
}
.extra {
float: left;
width: 230px;
margin-left: -230px;
}
.main {
margin: 0 230px 0 190px;
}
主面板部分优先渲染（一般主面板会比侧栏内容重要）。
圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。
双飞翼布局不用设置相对布局，以及对应的left和right值。
网友评论