1. 元素宽度100%的情况下，再设置padding或者border，宽度会溢出
设置box-sizing：border-box属性
2. 背景图片自适应容器
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
-moz-background-size:100% 100%;
background-size:100% 100%;
3. 使绝对定位元素的宽度100%
对绝对定位的元素直接设置width：100%是不起作用的，不设置宽度，设置left和right为0，元素宽度便可以撑满父元素
4. 选择元素前一个相邻兄弟元素的方法
相邻选择器只能选择后一个相邻元素，所以把两个元素调换位置，且同时右浮动，实例如下
input,label{
float: right;
}
input:checked+label{
color: green;
}
<div>
<input id="brother" type="checkbox">
<label for="brother">test-brother-element</label>
</div>
5. 使用：not（）改变某个特定元素的样式
例如，设置除了最后一个元素的margin-right
.ul li:not(:last-child) {
margin-right: 1px solid #666;
}
6. 设置所有元素的box-sizing
html {
box-sizing: border-box;
}
, :before, *:after {
box-sizing: inherit;
}
6. 使用属性选择器选择到空链接
a[href^="http"]:empty::before {
content: attr(href);
}
7. 使表格的单元格等宽
table {
table-layout: fixed;
}
8.设置placehold样式
input:[placeholder]{
font-family: 'Microsoft yahei';
}
9.清除inline-block的默认边距
父元素设置fontsize为0，子元素正常设置fontsize，兼容Chrome再添加： -webkit-text-size-adjust:none; 因为Chrome默认有最小字体大小限制，设置太小没有效果
10.弹性盒子中的justify-content和align-items
align-items是设置上下左右都居中，justify-content是设置左右居中
align-items.png
justify-content.png
11.关于input出type设置password出现黄色背景和默认内容
这是浏览器的记住账号密码的机制，每个浏览器都是不一样
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
