关于css布局、居中的问题以及一些小技巧
CSS的两种经典布局
左右布局
- 一栏定宽,一栏自适应
<!-- html -->
<div class="left">定宽</div>
<div class="right">自适应</div>
<!-- css -->
.left{
width: 200px;
height: 600px;
float: left;
display: table;
text-align: center;
line-height: 600px;
}
.right{
margin-left: 210px;
height: 600px;
background: yellow;
text-align: center;
line-height: 600px;
}
- 利用绝对定位实现
<!-- html -->
<div class= "left">
</div>
<div class= "right">
</div>
<!-- css-->
.left{
position:absolute;
left:0;
width:200px;
}
.right{
margin-left:200px;
}
左中右布局
- 利用绝对定位实现
<!-- html-->
<div class= "left">
</div>
<div class= "main">
</div>
<div class= "right">
</div>
<!-- css-->
.left{
width:200px;
background-color:yellow;
position:absolute;
top:0;
left:0;
}
.main{
margin-left:200px;
margin-right:300px;
}
.right{
width:300px;
background-color:orange;
position:absolute;
top:0;
right:0;
}
- 利用浮动定位实现
<!-- html-->
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
<!-- css-->
.left{
width:300px;
background-color:yellow;
float:left;
}
.right{
width:200px;
background-color:orange;
float:right;
}
.main{
margin-left:300px;
margin-right:200px;
}
- 圣杯布局,两边定宽,中间自适应
<!-- html-->
<div class="container">
<div class="main col">Main</div>
<div class="left col">Left</div>
<div class="right col">Right</div>
</div>
<!-- css-->
.col{
float: left;
position:relative;
}
.container{
padding:0 200px 0 100px;
}
.left{
left:-100px;
width: 100px;
height:100%;
margin-left: -100%;
background: red;
}
.main{
width:100%;
height: 100%;
}
.right{
right:-200px;
width:200px;
height:100%;
margin-left: -200px;
background: yellow;
}
- 双飞翼布局
<!-- html-->
<div class="container">
<div class="left col ">Left</div>
<div class="main col ">
<div class="main_inner">Main</div>
</div>
<div class="right col ">Right</div>
</div>
<!-- css-->
.col{
float: left;
}
.main{
width:100%;
height:100%;
}
.main_inner{
margin:0 200px 0 100px;
}
.left{
width: 100px;
height: 100%;
margin-left: -100%;
background: red;
}
.right{
height:100%;
width:200px;
margin-left: -200px;
background: yellow;
}
CSS居中问题
水平居中
- 对于行内元素(inline):
text-align: center;
<!-- html -->
<div>
<span >kaka</span>
</div>
<!-- css -->
div {
text-align:center
}
- 对于块级元素(block):
1.给此块级元素设置宽度
2.margin:0 auto;
<!-- html -->
<div class="parent">
<div class="child">kaka</div>
</div>
<!-- css -->
.parent {
width:1002px;
}
.child {
width:50%;//也可以是固定像素
margin:0 auto;
}
垂直居中
- 行高与高度一致使其居中,适用于只有一行文字的情况
<!-- html -->
<div class="parent">
<div class="child">kaka</div>
</div>
<!-- css -->
.parent {
height:1002px;
line-height:1002px;
}
水平垂直均居中
- 已知宽高,给负margin
<!-- html -->
<div class="parent">
<div class="child">kaka</div>
</div>
<!-- css -->
.parent {
position: relative;
}
.child {
position: absolute;
width:1002px;
height:828px;
top: 50%;
left: 50%;
margin-top:-414px;
margin-left:-501px;
}
- 未知宽高,transform方案
<!-- html -->
<div class="parent">
<div class="child">kaka</div>
</div>
<!-- css -->
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
CSS的一些小技巧
- 请写出「姓名」与「联系方式」两端对齐的例子
<!-- html -->
<span>姓名</span>
<span>联系方式</span>
<!-- css -->
span{
line-height:20px;
font-size:20px;
height:20px;
overflow:hidden;
}
span::after{
content: '';
display: inline-block;
width: 100%;
}
- 文本内容过长如何变成省略号?
1 一行文本过长,只需要对该div作以下操作:
<!-- css -->
div{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
2 多行文本超出,如:在第二行后省略:
<!-- css -->
div{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
- 如何使固定高度的div里面的文字垂直居中?
1.先确定行高 2.再用padding补全高度。这种写法的好处是在文字增减过程中不会出现bug。
例:一个高 40px 的 div,里面的文字垂直居中
<!-- css -->
div{
line-height:20px;
padding:10px 0;
}
- 使该元素变大1.2倍
transform: scale(1.2);
- 动画过渡效果
transition: all 0.3s;