服务器之家
您的位置： 首页 编程语言 css

CSS基础-盒子模型

100人浏览   2024-09-16 11:45:01

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/outline
text-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兼容情况

相关推荐