CSS面试题整理汇总

科技前沿 • 2025-01-14 12:27 • 阅读 34

大家好，我是讯享网，很高兴认识大家。

CSS盒模型本质上是一个盒子，它包括：content、padding、border、margin。CSS 中的盒子模型包括IE 盒子模型和标准的 W3C 盒子模型。

在标准的盒子模型中，width 指 content 部分的宽度。

在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度

故在计算盒子的宽度时存在差异：

标准盒模型：一个块的总宽度= width+margin(左右)+padding(左右)+border(左右)

怪异盒模型：一个块的总宽度= width+margin（左右）（既 width 已经包含了 padding 和 border值）

CSS中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

box-sizing:content-box|border-box|inherit:

content-box：元素的 width/height 不包含padding，border，。【标准盒子模型】

border-box：元素的 width/height 包含 padding，border。【IE 盒子模型】

inherit：继承父元素的 box-sizing 值。

关于css属性选择器常用的有：

id选择器(#myid)

类选择器(.myclass)

属性选择器(a[rel="external"])

伪类选择器(a:hover, li:nth-child)

标签选择器(div, h1,p)

兄弟选择器（h1 + p）

子选择器(ul > li)

后代选择器(li a)

通配符选择器(*)

优先级：

!important

内联样式（1000）

ID选择器（0100）

类选择器/属性选择器/伪类选择器（0010）

元素选择器/伪元素选择器（0001）

关系选择器/通配符选择器（0000）

带!important 标记的样式属性优先级最高；样式表的来源相同时：!important> 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

继承属性：

字体系列属性

font-family	font-weight	font-size	font-style
字体	字体的粗细	字体的尺寸	字体的风格