css 居中，三栏布局，负margin的应用
程序员文章站
2024-01-29 23:41:34
...
CSS 的 居中方式,三栏布局和负margin的应用，及块级格式化上下文（BFC）：margin重叠
)
本文简介
通过一天学习有了一些收获和感悟，
本文就是对今天所学内容的总结。
一、怎么实现居中
居中有多种方式
1.水平居中
CSS设置行内元素的水平居中
div{text-align:center} /DIV内的行内元素均会水平居中/
CSS设置行内元素的垂直居中
div{height:30px; line-height:30px} /*DIV内的行内元素均会
垂直居中*/
PS:当然，如果既要水平居中又要垂直居中，那么综合一下
div{text-align:center; height:30px; line-height:30px}
CSS设置块级元素的水平居中
div p{margin:0 auto; width:500px} /*块级元素p一定要设置宽度，
才能相当于DIV父容器水平居中*/
CSS设置块级元素的垂直居中
div{width:500px} /*DIV父容器设置宽度*/
div p{margin:0 aut0; height:30px; line-height:30px} /*块级元素p也可以加个宽度，
以达到相对于DIV父容器的垂直居中效果
1.块元素水平居中
父级设置 text-align : center;
.parent {
text-align: center;
}
.parent > div{
text-align: left;
}
<div class="parent">
<div>行内元素水平居中：父级设置 text-align : center;</div>
<span>我是行内元素，我要实现水平居中</span>
</div>
3.块元素水平居中,内容块居中
下面展示一些，头部style内定义。
样式
/*在整个页面上*/
.shuip{width:200px;
margin:auto;/*块自己居中*/
text-align:center;/*对齐方式为居中*/
background-color: yellow;}
body
<div class="shuip">水平居中</div>
3.绝对定位水平垂直居中
样式
.spcz{
position: absolute;/*绝对定位*/
width: 500px;
height: 300px;
margin: auto;
top: 0;
left: 0;/*绝对定位*/
bottom: 0;
right: 0;
background-color: blueviolet;
}
body
<div class="spcz">水平垂直居中</div>
4.绝对定位水平垂直居中(二)
样式
position: absolute;
width:300px;
height:200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: blue;
body
div class="shuipcz">水平垂直居中</div>
三.三栏布局
在这里提几个标签，属性
- float 浮动
float：left 左浮动 css 中同一个级别的块级元素默认自上而下排列，在块级元素中加入该属性，使它们自左向右排列。 - position: relative;
right: -80px;
相对定位，相对于上一个元素
1.三栏布局——圣杯布局
body
<h3>左中右布局，左右两边定宽，中间自适应：</h3>
<div class="box1">
<div class="center">圣杯布局弹性区域</div>
<div class="left" >左固定</div>
<div class="right">右固定</div>
</div>
样式
.box1{
border:1px solid red;
height: 100px;
padding:0 80px;
}
.box1 .left{
width: 80px;
height: 100px;
background-color:blueviolet;
float: left;
margin-left: -100%;
position:relative;/*问题*/
left: -80px;
}
.box1 .right{
width: 80px;
height: 100px;
background-color: aqua;
float:left;
margin-left:-80px ;
position: relative;
right: -80px;
}
.box1 .center{
width: 100%;
height: 100px;
background-color: chartreuse;
float: left;
}
2.三栏布局——双飞翼
body
<div class="box2">
<div class="center-box">
<div class="center">双飞翼布局中间弹性区域</div>
</div>
<div class="left">左固定</div>
<div class="right">右固定</div>
</div>
样式
.box2{
border:1px solid red;
height: 100px;
}
.box2 .center-box{
width: 100%;
float: left;
}
.box2 .center{
height: 100px;
background-color: sienna;
margin: 0 80px;
}
.box2 .left{
width: 80px;
height: 100px;
background-color: violet;
float:left;
margin-left: -100%;
/*margin-left:-100% 外边框距 由于.center-box占了100%所以.box2
要出现在前面，就必须 margin-left: -100%;*/
}
.box2 .right {
width: 80px;
height: 100px;
background-color: slateblue;
float: left;
margin-left: -80px;
}
四.负margin
margin-left: -30px; 左移
body
<h1>负margin的应用</h1>
<div class="container">
<ul>
<li>子元素1</li>
<li>子元素2</li>
<li>子元素3</li>
<li>子元素4</li>
<li>子元素5</li>
<li>子元素6</li>
<li>子元素7</li>
<li>子元素8</li>
</ul>
</div>
样式
.container {
width: 450px;
height: 210px;
border:4px solid yellowgreen;
overflow: hidden;/*hidden： 隐藏溢出容器的内容且不出现滚动条。*/
/*margin:0;padding:0;
去除列表与左边距离*/
}
.container li {
float:left;
width: 100px;
height: 100px;
background:lightcoral;
margin: 0 10px 10px 0;/*上右下左，顺时针*/
list-style:none;/*列表去点*/
}
.container ul {
margin-left: -30px;/*左移*/
margin-top: 5px;
}
五.块级格式化上下文（BFC）：margin重叠
body
<h1>块级格式化上下文（BFC）：margin重叠</h1>
<h3>兄弟</h3>
<div class="box03 margin-box01">第一个盒子</div>
<div class="box03 margin-box02">第二个盒子</div>
<h3>父子</h3>
<hr/>
<div class="out-box">
<div class="in-box">里面的box</div>
</div>
样式
.box03 {
width:50%;
height: 30px;
}
.margin-box01 {
margin-bottom: 20px;
background-color: rgb(178, 103, 32);
}
.margin-box02 {
margin-bottom: 20px;
background-color: lightseagreen;
}
.out-box {
width: 200px;
height: 200px;
background-color: lightsteelblue;
}
.in-box {
width: 100px;
height: 100px;
background: maroon;
margin-top: 50px;/*margin重叠*/
}
六.小结
以上就是今天要讲的内容，本文仅仅简单介绍了CSS 的 居中方式,三栏布局和负margin的应用，及块级格式化上下文（BFC）：margin重叠。
网址:https://www.baidu.com
下一篇： margin负边距的使用