CSS 易混淆易错知识点

一、对齐方式

1. 块级元素水平居中

块级元素才能用 margin: 0 auto 居中，必须设置宽度，行内元素用这个无效。

css 复制代码

margin: 0 auto;

2. 行内内容水平居中

text-align 属性加在父元素上，控制子元素的所有行内内容水平对齐，包括文字、图片、按钮等行内元素。

css 复制代码

text-align: center;

3. 单行内容垂直居中

行高等于容器高度就能实现垂直居中，适用于单行文字和行内元素，多行内容建议用 padding 或 flex。

css 复制代码

height: 40px;
line-height: 40px;

4. Flex 主轴对齐

space-between 两端对齐首尾贴边，space-around 边缘间距只有中间的一半，space-evenly 所有间距完全相等。

css 复制代码

justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

5. Flex 交叉轴对齐

align-items 控制单行项目对齐，align-content 控制多行（需要配合 flex-wrap: wrap）。

css 复制代码

align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;

6. 定位元素居中

只用 top: 50%; left: 50% 只是左上角居中，必须配合 transform 才能真正居中。

css 复制代码

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

二、选择器权重

1. 权重顺序

从高到低：!important > 行内样式 > ID > 类/伪类 > 标签/伪元素 > 通配符 > 继承

2. 权重计算示例

权重格式是 0,ID数,类数,标签数，权重相同的情况下，后面定义的样式会覆盖前面的。

css 复制代码

#header .nav ul li a    /* 0,1,1,3 */
.nav ul li a            /* 0,0,1,3 */

3. 继承的权重问题

子元素会继承父元素的样式，即使父元素选择器权重更低。

css 复制代码

p span { color: red; }   /* 直接选择 span */
p { color: blue; }       /* 父元素样式 */

4. !important 使用

优先级最高，能覆盖所有规则，尽量少用。

css 复制代码

color: red !important;

三、Flex 布局

1. flex 属性

flex: 1 让项目平分剩余空间，基准值是 0%；flex: auto 的基准值是自身宽度。

css 复制代码

flex: 1;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

2. 文本省略号失效

flex 布局下需要设置 min-width: 0 才能让省略号生效。

css 复制代码

.item {
    display: flex;
}
.text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}

四、CSS3 变换

1. transform 顺序

顺序不同结果不同，先旋转的话位移方向会跟着旋转。

css 复制代码

transform: translate(100px, 100px) rotate(45deg);
transform: rotate(45deg) translate(100px, 0);

五、CSS 函数与单位

1. calc() 计算

运算符两边必须有空格，否则会报错，可以和 CSS 变量配合使用。

css 复制代码

width: calc(100% - 20px);
width: calc(33.333% - var(--gap));

2. line-height 继承

用数值的话子元素继承系数，行高 = 子元素字体大小 × 系数；用具体值的话直接继承固定值，不会随字体大小变化，推荐用数值方式。

css 复制代码

.parent {
    font-size: 20px;
    line-height: 1.5;
}
.child {
    font-size: 14px;  /* 行高 = 14 × 1.5 = 21px */
}

.parent {
    font-size: 20px;
    line-height: 30px;
}
.child {
    font-size: 14px;  /* 行高 = 30px（固定） */
}

3. vertical-align 适用范围

vertical-align 对行内元素、行内块元素和表格单元格有效，包括文字、图片、按钮、input 等；对块级元素无效。

css 复制代码

img {
    vertical-align: middle;  /* 有效 */
}

button {
    vertical-align: middle;  /* 有效 */
}

div {
    vertical-align: middle;  /* 无效 */
}