1，左右布局。
css中的左右布局可以使用style="float:left"浮动来实现，比如明信片的的样式，一边为图片信息，一边为文字信息。我们就可以用一个div来表示这整个明信片，里面的图片信息一个div，文字信息一个div，这两个div为子元素。然后给两个子元素添加style="float:left；"来实现。当然在子元素添加浮动需要给父级元素加一个“clearfix的类”。这样就可以实现我们想要的图片文字的左右布局。
如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="pictureAndText clearfix">
<div class="picture">
<img src="#" alt="avator">
</div>
<div class="text">
<h1>我叫。。。</h1>
<p>。。。。。。。</p>
</div>
</div>
</body>
</html>
.clearfix::after{
content: '';
display: block;
clear: both;
}
body .picture{
float: left;
margin: 40px;
}
body .text{
float: right;
}
09.png
这个clearfix的类为：
.clearfix::after{
content: '';
display: block;
clear: both;
}
2，左右中布局
同样的，我们可以使用div+float，先横向布局然后用css调整左右中的间距即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="side clearfix">
<div class="leftSide">
<h1>左边</h1>
</div>
<div class="center">
<h1>中间</h1>
</div>
<div class="rightSide">
<h1>右边</h1>
</div>
</div>
</body>
</html>
css
.clearfix::after{
content: '';
display: block;
clear: both;
}
body .leftSide{
float: left;
margin: 0 80px;
}
body .center{
float: left;
margin: 0 50px;
}
body .rightSide{
float: left;
margin: 0 80px;
}
58.png
3，水平居中。
一，对于行内元素水平居中可用：
text-align:center;
二、对于确定宽度的块级元素：
常用(已知width值)：margin-left:auto;
margin-right:auto;
三、对于未知宽度的块级元素：inline-block实现水平居中方法，宽高不确定可以通过padding:_px _px;来调整我们想要的宽高来进行居中。
display：inline-block;（或display:inline;）
text-align:center;实现水平居中
4，垂直居中。
一，有固定宽高的块级元素垂直居中可以使用了一个 position:absolute；
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
width: 70%;
二，使用table-cell，我们可以使用表格的 vertical-align property 属性。
<div class="box box">
<span>垂直居中</span>
</div>
.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
}
三，绝对定位和负边距
.box{position:relative;}
.box span{
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center;
}
四，使用display:inline-block
.box{
text-align:center;
font-size:0;
}
.box span{
vertical-align:middle;
display:inline-block;
font-size:16px;
}
.box:after{
content:'';
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
5，css小技巧
1，当我们在使用css布局用到div时或调整边距的大小时，可以在先加一个border: 1px solid red；来方便观察需要调整的边框。
2，如要设置<span>的宽高时，尽量不使用width,height。来输入确定的值以免造成不必要的bug。可以使用
display: line-block;
padding: _px _px; //调整到我们需要的宽高
3，背景图片的居中：background-position: center, center; 两个center分别表示X,Y方向都居中。
4，背景图片自适应缩放：`background-size: cover; cover表盖住所有面并按比例缩放。
5，mask；遮盖——做一个纯样式的div时使用。
<div class="mask"></div>
mask{
background-color: rgba(0,0,0,0.5);
}
半透明的遮盖
6，box-sizing: border-box;
在CSS中，你设置一个元素的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。
border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。
更多css使用技巧尽在“Css Tricks”。
网友评论