匿名用户

外观

返回顶部
本页目录

CSS相关

盒模型

提示

什么是盒模型？
当对一个文档进行布局时，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子；CSS 决定这些盒子的大小、位置以及属性（如颜色、背景、边框尺寸等） 每个盒子（即盒模型）从外到内由这四个部分组成

  • margin 外边距（不计入盒子的实际大小）
  • border 边框
  • padding 内边距
  • content 内容

盒模型分为 W3C 标准盒模型和 IE 盒模型，其区别只有一个：计算盒子实际大小（即总宽度/总高度）的方式不一样

以宽度计算来举

如果给某个元素设置如下样式：

css
.box {
  width: 200px;
  height: 200px;
  padding: 10px;
  border: 1px solid #eee;
  margin: 10px;
}
  • W3C 标准盒模型（默认）
    • 盒子实际宽 = width + padding + border
    • 其中 width 只包含 content（即内容区域的宽度）
    • 通过 box-sizing: content-box; 来设置为 W3C 标准盒模型

W3C

  • IE 盒模型
    • 盒子实际宽 = width
    • 其中 width = content + border + padding
    • 通过 box-sizing: border-box; 来设置为 IE 盒模型

IE

BFC

块格式化上下文，它是一个独立的渲染区域，只有块级盒子参与，它规定了内部的块级盒子如何布局，并且与这个区域外部毫不相干。

BFC

BFC 渲染规则

  • 内部的盒子会在垂直方向，一个接一个地放置；
  • 盒子垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻盒子的 margin 会发生重叠；
  • 每个元素的 margin 的左边，与包含块 border 的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此；
  • BFC 的区域不会与 float 盒子重叠；
  • BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算 BFC 的高度时，浮动元素也参与计算。

如何创建 BFC？

  • 根元素：html
  • 非溢出的可见元素：overflow 不为 visible
  • 设置浮动：float 属性不为 none
  • 设置定位：position 为 absolute 或 fixed
  • 定义成块级的非块级元素：display: inline-block/table-cell/table-caption/flex/inline-flex/grid/inline-grid

基础选择器

  • 标签选择器：h1
  • 类选择器：.checked
  • ID 选择器：#picker
  • 通配选择器：*

属性选择器

  • [attr]：指定属性的元素；
  • [attr=val]：属性等于指定值的元素；
  • [attr*=val]：属性包含指定值的元素；
  • [attr^=val] ：属性以指定值开头的元素；
  • [attr$=val]：属性以指定值结尾的元素；
  • [attr~=val]：属性包含指定值(完整单词)的元素(不推荐使用)；
  • [attr|=val]：属性以指定值(完整单词)开头的元素(不推荐使用)；

组合选择器

  • 相邻兄弟选择器：A + B
  • 普通兄弟选择器：A ~ B
  • 子选择器：A > B
  • 后代选择器：A B

条件伪类

  • :lang() 基于元素语言来匹配页面元素；
  • :dir() 匹配特定文字书写方向的元素；
  • :has() 匹配包含指定元素的元素；
  • :is() 匹配指定选择器列表里的元素；
  • :not() 用来匹配不符合一组选择器的元素；

行为伪类

  • :active 鼠标激活的元素；
  • :hover 鼠标悬浮的元素；
  • ::selection 鼠标选中的元素；

状态伪类

  • :target 当前锚点的元素；
  • :link 未访问的链接元素；
  • :visited 已访问的链接元素；
  • :focus 输入聚焦的表单元素；
  • :required 输入必填的表单元素；
  • :valid 输入合法的表单元素；
  • :invalid 输入非法的表单元素；
  • :in-range 输入范围以内的表单元素；
  • :out-of-range 输入范围以外的表单元素；
  • :checked 选项选中的表单元素；
  • :optional 选项可选的表单元素；
  • :enabled 事件启用的表单元素；
  • :disabled 事件禁用的表单元素；
  • :read-only 只读的表单元素；
  • :read-write 可读可写的表单元素；
  • :blank 输入为空的表单元素；
  • :current() 浏览中的元素；
  • :past() 已浏览的元素；
  • :future() 未浏览的元素；

结构伪类

  • :root 文档的根元素；
  • :empty 无子元素的元素；
  • :first-letter 元素的首字母；
  • :first-line 元素的首行；
  • :nth-child(n) 元素中指定顺序索引的元素；
  • :nth-last-child(n) 元素中指定逆序索引的元素；；**
  • :first-child元素中为首的元素；
  • :last-child 元素中为尾的元素；
  • :only-child 父元素仅有该元素的元素；
  • :nth-of-type(n) 标签中指定顺序索引的标签；
  • :nth-last-of-type(n) 标签中指定逆序索引的标签；
  • :first-of-type 标签中为首的标签；
  • :last-of-type 标签中为尾标签；
  • :only-of-type 父元素仅有该标签的标签；

伪元素

  • ::before 在元素前插入内容；
  • ::after 在元素后插入内容；

优先级

优先级

优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中 的每一种选择器类型的数值决定。为了记忆，可以把权重分成如下几个等级，数值越大的权重越高：

  • 10000：!important；
  • 01000：内联样式；
  • 00100：ID 选择器；
  • 00010：类选择器、伪类选择器、属性选择器；
  • 00001：元素选择器、伪元素选择器；
  • 00000：通配选择器、后代选择器、兄弟选择器；