这篇文章会介绍本人已学会的CSS中常用的左右布局、左中右布局、水平居中方法、垂直居中方法和一些CSS小技巧，如有错误，欢迎指出~
1.左右布局
通过float:left;来实现
但要记得在布局元素的父元素里声明clearfix类，clearfix类的代码如下：
.clearfix::after {
content: '';
display:block;
clear:both;
}
另外，可以通过设置元素width的比例来让调节布局的比例。
2.左中右布局
通过float:left;之后，调节三个元素之间的margin，并把第一个元素的margin-left设置成0即可。
/*css*/
.Border {
width:200px;
height:200px;
border:1px solid red;
}
ol {
list-style:none;
margin:0;
padding:0;
}
.clear::after {
content:'';
display:block;
clear:both;
}
ol li {
float:left;
margin-left:30px;
}
ol li:nth-child(1) {
margin-left:0;
}
<!--HTML-->
<div class="Border clearfix">
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
这样就能实现左中右布局。
3.水平居中
（1）若是内联元素, 给其父元素设置text-align:center,即可实现行内元素水平居中。
（2）若是块级元素, 该元素设置 margin:0 auto;即可。
4.垂直居中
（1）若元素为单行文本，直接让其line-height等于父元素高度即可。
（2）若元素为块级元素，那么可以考虑通过display:inline-block;，并在父元素处使用伪元素after，由于两个内联元素是基于基线对齐，因此通过vertical-align:middle;来让两个元素居中对齐，再把伪元素设置成height:100%;，即可实现垂直居中的效果。具体代码如下：
/*css*/
.parent {
width:200px;
height:200px;
border:1px solid red;
}
.parent::after, .son{
display:inline-block;
vertical-align:middle;
}
.parent::after{
content:'';
height:100%;
}
<!--HTML-->
<div class="parent">
<div class="son">
abc
</div>
</div>
（3）如果元素为固定高度的块级元素，则可以通过相对定位和绝对定位来实现垂直居中，设置父元素相对定位position:relative, 子元素如下css样式:
.parent {
width:200px;
height:200px;
border:1px solid red;
position:relative;
}
.son{
position:absolute;
top:50%;
height:20px;
margin-top:-10px; /*固定高度的一半*/
}
或者
.parent {
width:200px;
height:200px;
border:1px solid red;
position:relative;
}
.son{
position:absolute;
height:20px;
top:0;
bottom:0;
margin:auto 0;
}
5.其他小技巧
（1）clear:both;可以消除因为建议行高不同而导致浮动后无法对齐的问题。
（2）伪元素在CSS里要写content:'';否则不会出现，而且伪元素的内容是无法复制的。
（3）伪类不是实实在在的东西，是某个元素的状态，可能特指某些元素，要区分清楚伪类和伪元素。
（4）绝对定位后，元素类型会自动变为block。
（5）可以通过设置transition属性可以通过控制变化时间来控制元素变化的过程。
（6）使用了display:inline-block;之后，要习惯加vertical-align:top;来消除基线对齐。
（7）设置触摸标签时的手势：cursor:pointer;。
（8）div里嵌套了img后，img底部会出现白边，因为img默认按基线对齐，因此要输入vertical-align:top;来消除白边。
（9）属性box-sizing:border-box;可以把边框和padding也算进宽度中。
网友评论