关于盒子模型定义:
CSS 盒子模型 | 菜鸟教程CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,“box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model): 不同部分的说明: Margin(外边距) - 清除边框外的区域,外边距是透..https://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 盒子模型、文档流、文本流
发布评论