关于盒子模型定义:
了解基础知识后主要是需要对 标准盒子模型 和 IE盒子模型进行区分:
标准盒子宽/高 = width/height + padding + border + margin
IE盒子宽/高 = width/height + margin (width/height包括了padding和border)
而css3可以指定盒子模型
box-sizing: content-box; // 标准盒子模型
box-sizing: border-box; // IE盒子模型 即元素的总高度和宽度包含padding 与 border
盒子模型还能关联到一个知识点就是文档流(英文normal flow 不知道为什么会被翻译成文档流)
浮动(float)、绝对定位(absolute)、固定定位(fixed)三种方式定位会脱离文档流
元素设置float后,会跳出文档流,它后面的元素会无视它,直接占据浮动元素位置。但是文字会认同浮动元素所占据的位置,所以会环绕浮动元素布局(其实也就是文本流)
元素设置成absolute后,不仅元素跳出文档流,也让会文字出文本流。那么后面元素的文本就不会在认同它的区域位置,会直接在它后面布局,不会在环绕