一些CSS小技巧总结

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;
}