CSS 知识点:盒子模型、伪类、伪元素

什么是 CSS 盒子模型

当对文档进行布局时,浏览器渲染引擎会根据 CSS 盒子模型将元素表现为一个个的矩形盒子,CSS 决定这些盒子的大小、位置以及背景颜色等属性。

盒子的构成

每个盒子由四部分组成:

  • Margin: 外边距
  • Border: 边框
  • Padding: 内边距
  • Content: 盒子的内容

宽高计算

默认情况下,盒子的总宽高是这样计算的:

总宽度 = 左边距 + 左边框 + 左填充 + 宽度 + 右填充 + 右边框 + 右边距

总高度 = 上边距 + 上边框 + 上填充 + 高度 + 下填充 + 下边框 + 下边距

上面所说的都是针对于标准盒子模型,而在老旧的浏览器如 IE5,6 中则默认表现为怪异盒子模型,即盒子的宽度(这里指 width 属性)包含了 borderpadding

box-sizing

CSS 中提供了一个 box-sizing 属性,可以通过这个属性改变盒子的表现形式,其取值如下:

  • content-box: 默认,采取标准模式进行解析计算
  • border-box: 采取怪异模式解析计算,元素的 width 包含 border 和 padding
  • inherit: 继承父级

另外,HTML 页面一定要设置正确的 DTD,如 <!DOCTYPE html>,告诉浏览器使用标准模式进行解析。

CSS 伪类

CSS 伪类是添加到选择器末尾的关键字,指定要选择的元素的特殊状态。比如 a:hover 可被用于在用户将鼠标悬停在链接上时改变链接的颜色或添加下划线。

常用的伪类有::hover, :first-child, :nth-child, :empty 等,更多伪类可参考这里:Pseudo-classes

a 标签伪类书写顺序注意:务必按照 link–visited–hover-active 的顺序,即 LoVe, HAte

CSS 伪元素

同伪类一样,CSS 伪元素也是添加到选择器末尾的关键字,可以对被选择元素的特定部分进行样式修改,或者「创建」新的元素,比如使用 ::first-letter 修改首个字符的样式,使用 ::after 创建一个新元素进行装饰。

与伪类不同的是,伪元素一般使用双冒号::进行表示,但是为了兼容更早的规范,即使写成单引号也能被识别,不过为了更加规范还是使用双冒号表示伪元素。

CSS2 中伪类、伪元素都是以单冒号:表示
CSS2.1 后及 CSS3 规定伪类⽤单冒号:表示,伪元素⽤双冒号::表示

常用的伪元素有:::before, ::after, ::first-letter, ::selection 等,更多伪元素可以参考这里:Pseudo-elements

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值