本来这篇博客早几天前就该写了，奈何牙痛无心学习，稍一缓和加紧来补上，废话不多说直接进入正题。
一：浮动布局
1.左右布局：
在网页布局中很常用的左右布局方式，如果宽度已知左右两边都是固定值，就可以使用float方式来进行基本的左右布局排版。
html代码如下：
<div class="left-right">
<div class="leftbox">左</div>
<div class="rightbox">右</div>
</div>
CSS代码如下：
.leftbox {
width: 300px;
height: 100%;
background-color: #aadddd;
float: left;
}
.rightbox {
width: 700px;
height: 100%;
background-color: #f08844;
float: right;
}
效果如下：
图片
左中右布局：
左中右布局，如果已知是固定的宽度的话，则跟左右布局相似，使用float浮动就可以达到效果。
HTML代码如下：
<div class="l-m-r">
<div class="leftbox">左</div>
<div class="rightbox">右</div>
<div class="midbox">中</div>
//因为midbox没有设置浮动，会默认为块级元素，块级元素会占一整行，导致rightbox强制换行，所以需要将html中的顺序调整一下。
</div>
CSS代码如下：
body .l-m-r .leftbox {
width: 300px;
height: 100%;
background-color: #aadddd;
float: left;
}
body .l-m-r .rightbox {
width: 300px;
height: 100%;
background-color: #f08844;
float: right;
}
body .l-m-r .midbox {
width:400px;
height:100%;
background: #df2;
}
效果如下：
图片
ps：以上两个布局方式子元素总宽度都不能大于或等于父元素的宽度。
二、定位布局：
1.左右布局：
将父元素l-m-r设置为position:relative，将子元素leftbox以及rightbox设置为position:absolute，再将rightbox的margin-left设置为340px。
CSS代码如下：
.l-m-r {
width: 1000px;
height: 1000px;
position: relative;
}
body .l-m-r .leftbox {
width: 300px;
height: 100%;
background-color: #aadddd;
position: absolute;
}
body .l-m-r .rightbox {
width: 300px;
height: 100%;
margin-left: 340px;
background-color: #f08844;
position: absolute;
}
效果如下：
图片
左中右布局也可使用定位
三、居中
1.文字的水平居中
文字在容器内的水平居中只需要设置
text-align: center;
2.容器的水平居中
容器的水平居中只需要设置一个明确的宽度，然后margin的水平值设置为auto便可。
box {
width: 300px; //max-width亦可.
margin: 0 auto;
}
3.文字的垂直居中
单行文字的垂直居中只需要将行高设置为与容器等高即可。
box {
height: 20px;
line-height: 20px;
//如果有n行文字，那么就把行高设置为容器高度的n分之一即可
}
4.容器的垂直居中
如果有一大一小两个容器，则可以给大容器添加position:relative，小容器添加position: absolute，再将它的左上角沿y轴下移50%，最后将它margin-top上移本身高度的50%即可，这个办法同样适用于容器的水平居中。
四、一些小技巧
1.clearfix
用于解决使用float后出现BUG的问题。
.clearfix::after {
content: ' ';
display: block;
clear: both;
}
2.英文单词具有不可分割性
word-break 单词打断
word-break-all 单词全部打断
3.尽量不要用display: inline-block,两个块级元素并排最好用float，然后在包裹它们的div中用clearfix。如果加了display:inline-block;一般都要加vertical-align:top;来消除空隙。
4.内联元素的高度基本不可测，在font-size比较小的时候可以用line-height来控制内联元素所占高度。一般情况下，字体大小比较小的时候，你写行高是多少，那么行高就是多少。
5.背景图片居中及按比例缩放的代码：
background-position: center center;//第一个center水平居中，第二个center垂直居中。
background-size: cover;//盖住所有的面积按比例缩放。
6.几个实用的工具网站：
CSS tricks shape 用css做的一些形状
icondont.cn 图标的工具网站
box shadow 阴影生成
7.box-sizing: border-box;可以将宽度锁死，不管内边距怎么变，整体宽度依然是那么多。
网友评论