css 盒子模型、文档流、文本流

admin管理员组

文章数量:1794759

css 盒子模型、文档流、文本流

关于盒子模型定义： 

css 盒子模型 | 菜鸟教程CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距) - 清除边框外的区域，外边距是透..www.runoob/css/css-boxmodel.html

了解基础知识后主要是需要对 标准盒子模型 和 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后，不仅元素跳出文档流，也让会文字出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕

本文标签： 盒子模型文本文档css