答案:盒模型是指在 CSS 中,每个元素都被看作是一个矩形的盒子,该盒子由四个部分组成:内容(content)、内边距(padding)、边框(border)和外边距(margin)。内容是元素实际包含的内容,内边距是内容与边框之间的空间,边框是围绕内容和内边距的线,外边距是边框与相邻元素之间的空间。
答案:层叠顺序(z-index)决定了元素在垂直堆叠顺序中的显示顺序。具有较高 z-index 值的元素将覆盖具有较低 z-index 值的元素。如果两个元素具有相同的 z-index 值,则后出现在 HTML 代码中的元素将覆盖先出现的元素。要使 z-index 生效,元素的定位必须是相对的、绝对的或固定的。
答案:浮动(float)是一种 CSS 布局技术,用于将元素从正常的文档流中移动。浮动的元素会向左或向右移动,并尽可能地与其容器的左侧或右侧对齐。浮动元素之后的内容将环绕在它周围。浮动元素的父元素将会塌陷,所以通常需要使用清除浮动(clear float)的技术来修复这个问题。
答案:CSS 中的定位属性(position)有以下几个值:
static
:默认值,元素遵循正常的文档流布局,忽略 top
、right
、bottom
和 left
属性。relative
:相对定位,根据元素在正常文档流中的位置进行定位,通过 top
、right
、bottom
和 left
属性进行微调。absolute
:绝对定位,相对于最近的非 static
定位的祖先元素进行定位,如果没有祖先元素则相对于文档进行定位。fixed
:固定定位,相对于浏览器窗口进行定位,即使页面滚动,元素的位置也不会改变。sticky
:粘性定位,元素根据滚动的位置在文档中切换定位,可以通过 top
、right
、bottom
和 left
属性进行微调。答案:CSS 中的选择器优先级是根据选择器的特定性(specificity)来计算的。特定性是由选择器的组成部分(标签名、类、ID 和内联样式)确定的。通常,选择器的特定性由四个部分组成,从左到右依次是:内联样式的数量、ID 选择器的数量、类和属性选择器的数量,以及标签选择器和伪类选择器的数量。特定性值越大,优先级越高。在计算特定性时,不同的部分具有以下权重:
优先级计算示例:
div p
:特定性为 2(两个标签选择器).container .item
:特定性为 20(两个类选择器)#header
:特定性为 100(一个 ID 选择器)style="color: red;"
:特定性为 1,000(一个内联样式)特定性越高的选择器将覆盖特定性较低的选择器。在特定性相同的情况下,后面出现的规则将覆盖先出现的规则。