盒模型的基本设置与排版

盒模型

box-sizing:content-box;//w3c标准盒子，padding，border不计算在盒子宽高中；
box-sizing:border-box;//IE/怪异盒子，padding,border计算在盒子宽高中
高度最好是不要直接设置数值，让内容撑开；
超出隐藏：overflow:hidden;//visible默认显示
超出显示滚动条：overflow：scroll；overflow:auto;//常用overflow:auto;
文档流：默认布局方式；
最小高度：min-height:;
最大高度：max-height:;

margin/padding

margin外边距，不会对盒子进行填充，在盒子的外部；
padding内边距，对盒子进行填充，在border的里面；
在浏览器中，标签自带margin/padding，一般在写之前要清空，*{margin:0;padding:0}

居中

水平居中

行内/行内块元素水平居中
    text-align:center;
块元素的水平居中
    margin: 0 auto;

垂直居中

行内元素：line-height:父元素高度值;
块元素：
    - 父元素不要设置高度，用padding上下值来填充使其居中;

水平垂直居中

1.行内

text-align:center;
line-height:xx;

2.padding

数值计算

3.定位

父级：
position:relative;
子级：
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
margin:auto;