web布局总结

web布局总结

浏览器缩放引起的网页布局混乱

宽度设为百分比，高度设置为px，父盒子有多个子盒子要实现垂直居中，水平居中建议使用flex布局，div采用css3盒子模型box-sizing:border-box，在布局时，高度用px写死，不要使用padding撑开高度，宽度使用百分比布局好后，里面的盒子的宽度可以使用padding和margin撑开，如此一来，网便不会再有缩放问题了

公共css总结

html {font-size: 62.5%;}  
body {font-size: 16px;font-size: 1.6rem;}
*{
     padding:0;margin: 0;
     box-sizing:border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -o-box-sizing: border-box;
     -ms-box-sizing: border-box;
}
div{overflow: hidden;}
i{font-style: normal;}
a{text-decoration: none;color: black;}
table{
     /*border-collapse:
          collapse，合并相邻边框
          separate， 独立边框
     border-spacing:水平距离，垂直距离
     */
     border-spacing: 0px 10px;
}
ul,ol,dl,li{list-style:none}
input{background:none;outline:none;border:none;}
input:focus{border:none;}
img { max-width: 100%;}
select{
     /*去掉默认的下拉三角*/
     appearance:none;  
    -moz-appearance:none;  
    -webkit-appearance:none;  
     outline: none;
     border:none;
     background: none;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
button{border: 1px solid transparent;outline: none;background: none;}
/* 元素隐藏与显示 */
.dispaly{display: none;}
/* 浮动处理 */
.clear{clear: both;}
.fl{float: left;}
.fr{float: right;}
.overflow{overflow: hidden;}
/* 边框颜色 */
.br{border: 1px solid red;}
.bor{border: 1px solid #1ac9ff;}
.by{border: 1px solid yellow;}