CSS基础（3）位置和高度宽度

宽度

0.width和height是指一个元素框内容的宽度和高度，
增加padding margin会增加元素框的总宽度。
一个父元素的宽度等于子元素元素框的总宽度（因为子元素元素框的宽度就是父元素的内容的部分啊，子元素元素框就包括子元素的内外边距边框和内容）
1. 没有设置位置属性的块级元素通常width是100%，行内元素是自适应
2. 设置了位置属性为absolute的块，宽度就变成自适应了
3. 在盒子模型中只有三种东西可以设置为AUTO，width或者height，margin-left，margin-right。（或者margin top bottom）只有外边距能小于0；
4. 如果width值为auto，则会根据两边自行计算算出复合父元素的宽度，如果是图片这类的替换元素，换成auto则宽度还是其固有宽度
5. 也就是说父元素宽度固定的时候根据margin设置为auto就可以水平居中了，但是垂直方向的margin-top，bottom则不是这样，设置为auto会变成0，不会实现垂直居中

高度

1. 所有元素高度都不会自己100%，普通的都是自适应的
2. 要想普通元素有高度，要么有一个父元素有固定高度，要么要将html设置高度100%，高度才可以100%
3. 设置了absolute的高度也是自适应的，不过如果要写高度百分百，是会自动选到body的包含块html所以不用再写html100%
4. 垂直方向如果有两个外边距相邻，则会保留数值较大的那个而舍弃数值小的那个

普通static

• 普通div是会从上到下排列的
• 一个父元素里两个子div则
  子div是在父div内从上到下排列
• 子元素设置高度还是在父元素内

相对relative

相对以前移动，以前的坑还占着，所以其他元素位置不会变

绝对absolute

从文件流中跳出来了，如果下面还有东西则会往上填住之前的部分
！！！绝对定位后父级元素使用padding对绝对定位的子元素都没影响了

float

float也会跳出文件流
且如果两个文件都往一个方向浮动，后一个会紧跟在前一个之后

可以先用float定位，然后再clear是文档回归内容。。。