CSS布局与水平垂直居中
2019-02-22 本文已影响0人
砂糖橘最甜
- 左右布局
- 左中右布局
- 水平居中
- 垂直居中
- 水平垂直居中
左右布局
float实现左右布局
子元素设置float: left父元素设置clearfix类，清除浮动
<div class="wrap clearfix">
<div class="left-box">
左边
</div>
<div class="right-box">
右边
</div>
</div>
body{
margin: 0;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
.wrap{
width: 500px;
margin: 50px auto 0;
}
.left-box{
float: left;
background: #ff9e2c;
font-size: 30px;
width: 50%;
text-align: center;
height: 300px;
color: #fff;
line-height: 300px;
}
.right-box{
float: left;
background: #b6701e;
font-size: 30px;
width: 50%;
text-align: center;
height: 300px;
color: #fff;
line-height: 300px;
}
用绝对定位实现左右布局
子绝父相
body{
margin: 0;
}
.wrap{
position: relative;
width: 1000px;
margin: 50px auto 0;
}
.wrap div{
position: absolute;
font-size: 30px;
width: 50%;
text-align: center;
height: 300px;
color: #fff;
line-height: 300px;
}
.left-box{
top: 0;
left: 0;
background: #ff9e2c;
}
.right-box{
top: 0;
right:0;
background: #b6701e;
}
左中右布局
最经典的双飞翼&圣杯布局简介：
- 都是两侧定宽,中间自适应
- 分左中右三个盒子，三个盒子都浮动。
- 圣杯布局缩小时有滚动条，但能保证中间一定能显示出东西
圣杯一般情况下.png
圣杯缩小情况下.png
- 双飞翼布局缩到最小时，中间会消失，只剩左右
双飞翼布局
html代码:
<body>
<div id="header"></div>
<!--中间栏需要放在前面-->
<div id="parent">
<div id="center">
<div id="center_inbox">中间自适应</div>
<hr> <!--方便观察原理-->
</div>
<div id="left">左列定宽</div>
<div id="right">右列定宽</div>
</div>
<div id="footer"></div>
</body>
css代码:
#header {
height: 60px;
background-color: #ccc;
}
#left {
float: left;
width: 100px;
height: 500px;
margin-left: -100%; /*调整#left的位置,值等于自身宽度*/
background-color: #f00;
opacity: 0.5;
}
#center {
height: 500px;
float: left;
width: 100%;
background-color: #eeff2b;
}
#center_inbox{
height: 480px;
border: 1px solid #000;
margin: 0 220px 0 120px; /*关键!!!左右边界等于左右盒子的宽度,多出来的为盒子间隔*/
}
#right {
float: left;
width: 200px;
height: 500px;
margin-left: -200px; /*使right到指定的位置,值等于自身宽度*/
background-color: #0f0;
opacity: 0.5;
}
#footer {
clear: both; /*注意清除浮动!!*/
height: 60px;
background-color: #ccc;
}
圣杯布局方法
html代码:
<body>
<div id="header"></div>
<div id="parent">
<!--#center需要放在前面-->
<div id="center">中间自适应
<hr>
</div>
<div id="left">左列定宽</div>
<div id="right">右列定宽</div>
</div>
<div id="footer"></div>
</body>
css代码:
#header{
height: 60px;
background-color: #ccc;
}
#parent {
box-sizing: border-box;
height: 500px;
padding: 0 215px 0 115px; /*为了使#center摆正,左右padding分别等于左右盒子的宽,可以结合左右盒子相对定位的left调整间距*/
}
#left {
margin-left: -100%; /*使#left上去一行*/
position: relative;
left: -115px; /*相对定位调整#left的位置,正值大于或等于自身宽度*/
float: left;
width: 100px;
height: 500px;
background-color: #f00;
opacity: 0.5;
}
#center {
float: left;
width: 100%; /*由于#parent的padding,达到自适应的目的*/
height: 500px;
box-sizing: border-box;
border: 1px solid #000;
background-color: #eeff2b;
}
#right {
position: relative;
left: 215px; /*相对定位调整#right的位置,大于或等于自身宽度*/
width: 200px;
height: 500px;
margin-left: -200px; /*使#right上去一行*/
float: left;
background-color: #0f0;
opacity: 0.5;
}
#footer{
height: 60px;
background-color: #ccc;
}
水平居中
父子嵌套，parent>son的结构
1.inline/inline-block
父元素设置text-align: center
.parent{
text-align: center;
}
2.单个块级元素
子元素设置margin: 0 auto
.son{
width: 100px; /*必须定宽*/
margin: 0 auto;
}
3.多个块级元素
父元素设置text-align: center，子元素设为inline/inline-block
.parent{
text-align: center;
}
.son{
display: inline-block; /*改为行内或者行内块级形式，让text-align对其生效*/
}
4.任意元素(flex)
.parent{
display: flex;
justify-content: center;
}
★总结：
对于水平居中，我们应该先考虑，哪些元素有自带的居中效果，最先想到的应该就是 text-align: center，但是这个只对行内内容有效，所以我们要使用 text-align: center 就必须将子元素设置为display: inline或者 display: inline-block
其次就是考虑能不能用margin: 0 auto;
垂直居中
父子嵌套，parent>son的结构
1.单行文本
将父元素的 height 与line-height 设置为相同的值
.parent{
height: 150px;
line-height: 150px;
}
2.多行文本
第一种方法：将父元素设为display: table，同时子元素设置display: table-cell以及vertical-align: middle
<div class="parent">
<p class="child">在山的那边海的那边，有一群蓝精灵，他们活泼又聪明，他们调皮又灵敏
</p>
</div>
<style>
.parent {
display: table;
width: 150px;
}
.child {
display: table-cell;
vertical-align: middle;
}
</style>
第二种方法：用p标签包裹多行文本内容，p标签改成inline-block元素
原理：多行文字使用一个标签包裹，同时设置display: inline-block，保持了内联元素的特性，使元素具有单行效果
<div class="parent">
<p class="child">在山的那边海的那边，有一群蓝精灵，他们活泼又聪明，他们调皮又灵敏</p>
</div>
<style>
.parent{
line-height: 150px;
}
.child{
display:inline-block;
line-height:20px;
vertical-align: middle;
}
</style>
3.图片
将父元素的 height与line-height 设置为相同的值，子元素设置vertical-align: middle
.parent{
height: 150px;
line-height: 150px;
font-size: 0;
}
img.son{vertical-align: middle;} /*默认是基线对齐，改为middle*/
4.块级元素
分定高与不定高，定高就用注释里的方法
.parent{
position: relative;
}
.son{
position: absolute;
top: 50%;
/*定高时margin-top:负自身高度一半;*/
transform: translateY(-50%);
}
5.任意元素(flex)
.parent{
display: flex;
align-items: center;
}
或者
.parent{
display: flex;
}
.son{
align-self: center;
}
或者
.parent{
display: flex;
flex-direction: column;
justify-content: center;
}
★总结：
- 对于垂直居中，最先想到的应该就是
line-height了，但是这个只能用于行内内容； - 其次就是考虑能不能用
vertical-align: middle，不过这个一定要熟知原理才能用得顺手，可看vertical-align和line-height的基友关系 ；
水平垂直居中
1.inline/inline-block
.parent{
height: 150px;
line-height: 150px; /*行高的值与height相等*/
text-align: center;
font-size: 0; /*消除幽灵空白节点的bug*/
}
.son{
vertical-align: middle;
}
2.块级元素
用子绝父相，分定宽高和不定宽高，定宽高就用注释里的方法
.parent{
position: relative;
}
.son{
position: absolute;
top: 50%;
left: 50%;
/*定宽高时等同于margin-left:负自身宽度一半;margin-top:负自身高度一半;*/
transform: translate(-50%,-50%);
}
3.flex
.parent{
display: flex;
}
.son{
margin: auto;
}
或者
.parent{
display: flex;
justify-content: center;
align-items: center;
}
或者
.parent{
display: flex;
justify-content: center;
}
.son{
align-self: center;
}
★总结：
- 一般情况下，水平垂直居中，我们最常用的就是绝对定位加负边距了，缺点就是需要知道宽高，使用
transform倒是可以不需要，但是兼容性不好（ie9+） - 其次就是绝对居中，绝对定位设置top、left、right、bottom为0，然后margin:auto;让浏览器自动平分边距以达到水平垂直居中的目的
- 如果是
inline/inline-block这些内容，可以优先考虑line-height和vertical-align结合使用，不要忘了还有text-align
小Tips:
1.一般来说，将元素改成inline-block，都要加vertical-align: top
2.inline元素中的非替换元素，对其设置margin-top和margin-bottom是无效的（margin左右有效）
HTML 里的元素分为替换元素（replaced element）和非替换元素（non-replaced element）。
- 替换元素是指用作为其他内容占位符的一个元素。最典型的就是img，它只是指向一个图像文件。以及大多数表单元素也是替换，例如input等。
- 非替换元素是指内容包含在文档中的元素。例如，如果一个段落的文本内容都放在该元素本身之内，则这个段落就是一个非替换元素。
讨论margin-top和margin-bottom对行内元素是否起作用，则要对行内替换元素和行内非替换元素分别讨论。
行内替换元素：设置margin-top和margin-bottom是有效的
而非替换元素margin-top和margin-bottom不生效，其原因就在于行内非替换元素的外边距不会改变一个元素的行高。
vertical-align属性生效条件：当一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）
