css盒子模型_CSS基础-盒子模型

CSS盒模型本质上是一个盒子，每一个元素都被抽象成一个盒子，每一个盒子又包括四部分

内容(content)，内填充(padding)，边框(border)，外边距(margin)

盒子模型简图

标准盒子模型&&IE盒子模型

• IE盒子模型

width = content-width + padding-width + border-widthheight = content-height + padding-height + border-height

• 标准盒子模型

width = content-widthheight = content-height

BFC块级元素

一个块格式化上下文(block formatting context) 是Web页面的可视化CSS渲染的一部分。它是块盒子的布局发生，浮动互相交互的区域。

• CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC

- 根元素，即HTML元素- float的值不为none- overflow的值不为visible- display的值为inline-block、table-cell、table-caption- position的值为absolute或fixed

• 作用

- 自适应两栏布局- 可以阻止元素被浮动元素覆盖- 可以包含浮动元素——清除内部浮动- 分属于不同的BFC时可以阻止margin重叠

可替换元素

在 CSS 中，可替换元素(replaced element)的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的简单来说就是通过修改某个属性就使得显示变换的元素

• 常见替换元素

img/object/video/iframe/textarea/input

• 特征

- 内容和外观不受页面上CSS的影响- 有默认的尺寸，并且在很多CSS上有自己的表达样式

伪元素

• ::before

在元素内容之前插入额外生成的内容

• ::after

在元素内容之后插入额外生成的内容

• ::first–letter

选取元素的首个字符

• ::first–line

选取元素的第一行

• ::selection

对用鼠标键盘等已选取的文字部分应用样式

• ::spelling-error

表示浏览器标记为不正确拼写的文本段只有一小部分CSS属性可用于 ::spelling-error 伪元素选择器：color/background-color/cursor/caret-color/outlinetext-decoration/text-emphasis-color/text-shadow

• ::grammar-error

伪元素应用于浏览器标识为语法错误的文本段只有一小部分的css能够应用在::grammar-error的选择器中color/background-color/cursor/text-emphasis-color/text-shadow/outline/text-decoration

• ::focus-within

当元素本身或其后代获得焦点时，:focus-within伪类的元素就会有效

focus-within兼容情况