html/css 笔记（一）

1. css 实现子元素在父元素中垂直水平居中

.parent{
    position:relative;
    width:800px;
    height:600px;
} 
.child{
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    width: 70%;
    height:70%;
    
    background:#ff00cc;    
 }

 

2. 设置box类型元素的宽度和高度不随border变化

在css盒子模型中，

页面上显示的每个元素（包括内联元素）都可以看作一个盒子，即盒模型( box model )。请看 Chrome DevTools 里的截图：

可以显而易见的看出盒模型由 4 部分组成。从内到外分别是：content->padding->border->margin，该盒子的宽度为 marign-left + border-left + padding-left + width + padding-right + border-right + margin-right; 上图中如果

通过 css 设置了div的width为200，实际在页面上该div占据的宽度为270. 而在IE (版本<9)下，最终宽度为 width + margins = 240px;
IE的这种方式更利于布局，在css3中，如果想要让 width/height 包括 border 和 padding，可以设置 box-sizing: border-box 。

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}