CSS常见布局写法
时间：2023-08-10 01:51:01 | 来源：网站运营
时间：2023-08-10 01:51:01 来源：网站运营
CSS常见布局写法：注意事项：浮动布局也是元素脱离文档流的一种方法，所以浮动的元素必须给他们的父级元素加上.clearfix这个类。
1.左右布局
<
style>
.clearfix{
content:
'';
display:
block;
clear:
both;
}
.left,.right{
width: 400
px;
height: 400
px;
background:
red;
}
.left{
float:
left;
}
.right{
float:
right;
}
</
style>
<
div class="clearfix">
<
div class="left"></
div>
<
div class="right"></
div>
</
div>
2. 左中右布局
（可以前两个元素左浮动，第三个元素右浮动；也可以都左浮动）
<
style>
.clearfix{
content:
'';
display:
block;
clear:
both;
}
.left,.middle,.right{
width: 400
px;
height: 400
px;
background:
red;
float:
left;
}
.left,.middle{
margin-right: 20
px;
}
</
style>
<
div class="clearfix">
<
div class="left"></
div>
<
div class="middle"></
div>
<
div class="right"></
div>
</
div>
3. 水平居中
- 内联元素/内联块水平居中
只需给父级元素设置一个text-align:center;这里需要注意的是如果给内联元素设置了display:inline-block也必须在线面紧接着写一个vertical-align:top;要不然下面会有几像素的间距。
<
style>
p{
text-align:
center;
}
</
style>
<
p>
<
span>
aaaaa</
span>
</
p>
2. 块级元素水平居中
只需为其设置一个宽度后，使用margin: 0 auto;
块级元素里面的文字内容水平居中也是使用text-align:center;
<
style>
div{
width: 300
px;
height: 300
px;
background:
red;
margin: 0
auto;
}
</
style>
<
div>
bbbbb</
div>
4. 垂直居中
- 让元素的高度等于行高及height=line-height的值；
<
style>
div{
width: 300
px;
/*这两步是实现垂直居中的，上面可以不用看*/
height: 300
px;
line-height: 300
px;
/*下面可以不用看*/
margin: 0
auto;
background:
red;
text-align:
center;
}
</
style>
<
div>
aaa</
div>
2. 给上下一个相同的padding值
<
style>
div{
background:
red;
text-align:
center;
/*上面可以不用看*/
padding: 20
px 0;
}
</
style>
<
div>
aaa</
div>
5.其他小技巧
- 只要是设置了绝对定位，就一定要给他的父级元素设置相对定位（子绝父相）；
- 用css布局时尽量不要写宽和高两个属性（因为块级元素的宽度和高度都是由内部的文档流元素决定的），一般情况下可以用padding来填充。
- 内联元素不能设置宽和高，margin只对左右起作用，padding都起作用。
- 若要使用:after和:before属性（1）.必须加一个content:’’;（2）.必须设置成块级元素。
- 只要加了inline-block就一定要加vertical-align:top。
- 元素只要是设置了position为fixed或者absolute就会变成块级元素。
- 一些特殊形状css网站：
8. Css3渐变使用网站
我在写css中会犯的错误，近期在写一个静态页的时候，自己测试了很多浏览器都没问题，可在mac上却出现了
错位：
这个列表信息我是用dl来写的
<
dl class="clearfix">
<
dt>
年龄</
dt>
<
dd>
23</
dd>
<
dt>
所在城市</
dt>
<
dd>
杭州</
dd>
<
dt>
邮箱</
dt>
...
</
dl>
出现以上原因主要是
dt和dd的高度不一致，所以就被挤到了另一边。
解决办法给dt和dd设置相同的高度或行高就可以
在线咨询
