1.一个块元素宽度默认继承包含块的宽度，因此有时宽度可以省略
<style>
body,div{
margin:0;
padding:0;
}
.box{
width:200px;
}
.item{
height:35px;
line-height:35px;
background-color:orange;
}
</style>
<div class="box">
<div class="item">item</div>
</div>
2.当边框颜色和文字颜色一样时可省略边框颜色
3.当其他属性（如background,border)颜色和文字颜色一样时，可以使用currentColor关键字来继承文字的颜色
<style>
.box{
width:100px;
height:100px;
color:red;
background-color:currentColor;
border:1px solid currentColor;
}
.box:hover{
color:pink;
}
</style>
<div class="box"></div>
4.当父元素样式和子元素的某个样式相同时，可以使用inherit来继承父元素样式
<style>
.box{
width:100px;
height:100px;
border:1px solid red;
}
.box .item{
width:50%;
height:50%;
border:inherit;
border-width:2px;覆盖前面的
}
5.在某些情况下，父元素高度不是必须的，在默认情况下，父元素会自适应子元素的高度，但是如果子元素使用了浮动，则需要给父元素添加“overflow：hidden"或使用其他方法
<style>
.box{
width:100px;
border:1px solid red;
}
.box .item{
height:100px;
}
</style>
<div class="box">
<div class="item"></div>
</div>
6.css伪元素可以减少对标签的使用
::before和::after用来将内容插入到元素的前面和后面，需要注意的是，大部分浏览器将这两个伪元素默认以行内元素的方式显示。
7.calc函数
注意运算符前后都需要保留一个空格
比如加了margin的图片列
<style>
.box img{
width:calc(25% - 40px);
margin:20px;
float: left;
}
</style>
8.使用css选择器
下面举一些例子
（1）当父元素只有一个子元素时会被选中
<style>
div:first-of-type:last-of-type{
color:red;
}
</style>
<div>123</div>
（2）当父元素有多个子元素时，选中第一个
<style>
div:not(:last-of-type):first-of-type{
color:red;
}
</style>
<div>11111</div>
或者
<style>
div:not(:only-child):first-of-type{
color:red;
}
</style>
比如当只有一个子元素时，可以让它居中显示，如果有多个子元素时，可以让它水平排列
<style>
.box div{
width:100px;
height:100px;
border:1px solid red;
margin:0 auto;
}
.box div:not(:only-child){
float:left;
margin-left:20px;
}
