CSS 盒模型
CSS 盒模型用于定义网页元素在浏览器中的布局结构。它包括以下部分:
- 内容(Content):元素的实际内容显示区域。
- 内边距(Padding):内容周围的空白区域,增加内容和边框之间的距离。
- 边框(Border):包围内边距和内容的边框,可设置样式、宽度和颜色。
- 外边距(Margin):边框外的空白区域,用于分隔不同元素。
盒模型有两种模式:
- 标准模式(content-box):宽度和高度仅包含内容的尺寸,不包括内边距和边框。
- IE盒模型(border-box):宽度和高度包含内容、内边距和边框。
Rem 及其转换原理
rem(root em) 是一种相对单位,相对于根元素(通常是 <html>
)的字体大小计算。1 rem 的值等于根元素的 font-size
。
例如,如果根元素的 font-size
是 16px,那么 1 rem 就等于 16px。通过调整根元素的 font-size
,可以动态改变使用 rem 单位的元素尺寸。
移动端视口配置
在移动设备上,通过设置 <meta>
标签来配置视口,以确保网页在不同设备上有良好的显示效果。常见的视口设置包括:
width=device-width
:将视口宽度设置为设备宽度。initial-scale=1.0
:设置初始缩放比例为 1。user-scalable=no
:禁止用户缩放页面(可选)。
这些配置有助于确保网页在不同屏幕尺寸和分辨率的设备上都能正确显示。
伪类和伪元素
伪类(Pseudo-classes) 用于选择元素的特殊状态。例如:
:hover
:鼠标悬停在元素上时。:focus
:元素获得焦点时。:nth-child(n)
:选择其父元素的第 n 个子元素。:active
:元素被激活时(如被点击)。
伪元素(Pseudo-elements) 用于选择元素的特定部分或创建虚拟元素。例如:
::before
:在元素内容之前插入内容。::after
:在元素内容之后插入内容。::first-line
:选择元素的第一行。::first-letter
:选择元素的第一个字母。
伪类和伪元素用于增强样式控制,伪类用于选择元素的特定状态,伪元素用于选择或创建元素的特定部分