css常见布局
一、左右布局
1.使用浮动属性(左右自适应)
<div class="box clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<style>
.clearfix::after{
content:'';
display:block;
clear:both;
}
.box{
background:red;
}
.left{
float:left;
width:40%;
height:300px;
margin:10px;
background:green;
}
.right{
float:right;
width:50%;
height:300px;
margin:10px;
background:yellow;;
}
</style>
效果如图
二、左中右布局
1.利用浮动属性(三列自适应)
<div class="box clearfix">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
<style>
.clearfix::after{
content:'';
display:block;
clear:both;
}
.box{
background:red;
}
.left{
float:left;
width:30%;
height:300px;
margin:10px;
background:green;
}
.right{
float:right;
width:30%;
height:300px;
margin:10px;
background:yellow;;
}
.middle{
float:left;
width:30%;
height:300px;
background:black;
margin-top:10px;
}
</style>
效果如图:
三、水平居中
1.内联元素:
给其父元素添加text-align:centar;属性。
2.块级元素:
自身拥有宽度后使用margin: 0 auto;即可水平居中。
四、垂直居中
1.内联元素:
使其line-height等于其内容高度即可
2.块级元素:
1.利用父元素padding填充使子元素垂直居中
2.利用定位属性position+margin的方式使快元素水平垂直居中
垂直居中方式:
父元素有一定高度,给父元素添加:
display:flex;
justify-content:center;
align-item:center;
五、等其他小技巧
1.子元素浮动,父元素会崩塌
给父元素添加一个类:
.clearfix::after{
content:"";
display:block;
clear:both;
}
就可以解决崩塌问题。
2.div(块级)的高度是由其内部文档流元素的高度总和决定的。
文档流:文档内元素的流动方向
1.内联元素从左向右水平流动宽度不够就换行
2.块级元素占一行从上到下垂直流动
3.tip:给元素添加上边框用来调试
4.
element{word-break:break-all}中文宽度不够时会被截断
element{word-break:break-word}英文单词容器宽度不够时会被截断
5.字体大小指的是:文字最高点到文字最低点距离;内联元素行高(建议行高)一般是字体大小的1.4em(1.4倍)。
四线普 基线对齐
6.高度尽量不要固定死,会出bug;尽量让内容充起高度,同时宽度也尽量不要写100%;
7.背景图片尺寸background-size:cover;背景图充满
8.css三角形
div{
border:10px solid red;
width:0px;
height:0px;
border-color:black transparent transparent yellow;
border-top-width:0;
}
9.position:fixed元素脱离了文档流,会造成宽度(跨度没有固定)坍塌
10.非空标签都有伪类
默认都有一个::before和::after
例子div::before{content:'';display:block;}.
还有清除浮动的;
11.
content-box:width=content
border-box(对元素使用:box-sizing:border-box):width=content的宽度+padding+borde
12.inline-block属性可能会导致底部出现一空隙,添加:vaetical-align:top
;即可解决;