1.3 CSS知识点列表

原创声明。未经许可，不得转载，作者：小步教程。

CSS基础知识点包括以下内容。

1、工具

开发工具VSCode、浏览器Chrome、调试工具Chrome开发者工具、官方前端技术手册MDN。

2、常用标签

项目常用HTML标签约40个。

（1）页面结构。html、head、title、meta、body。

（2）块（容器）div。

（3）文本。h1…h6六级标题、p段落、br换行、span行内、i斜体。

（4）图片img。

（5）链接a。

（6）列表。ul无序列表/li列表项、ol有序列表/li、dl定义列表/dt一级列表标题/dd二级列表项。

（7）引用外部资源。link（引用css文件）、script（引用js文件）。

（8）表格。table表格、thead表头、tbody表主体、tr行、th表头单元格、td单元格。

（9）表单。label标签、input输入框、select下拉框/option下拉框选项、textarea多行输入框、button按钮。

（10）框架iframe。

3、常用标签属性

常用标签属性：id（全局）、class（全局）、style（全局）、title（全局）、href（a标签）、src（img标签、iframe标签）。常用全局标签属性4个。

4、常用CSS属性与值

项目常用CSS属性约50个（衍生的或相似的算1个），除数值型的属性外，大多数属性的常用属性值约3个。

（1）盒子模型

box-sizing 盒子尺寸模式： content-box（初始值） | border-box

width/height 宽高： auto（初始值） | 数值

padding 内边距：0（初始值） | 数值

border 边框：（边框宽度值，线型，颜色）

margin 外边距：0（初始值） | 数值

（2）display模型与BFC模型

display 布局模式：inline（初始值） | block | inline-block | flex

<display-inside> 内部显示类型：flow （初始值）| flow-root | table | flex | grid

<display-outside> 外部显示类型：inline（初始值） | block

（3）IFC模型

font-family 字体名称：取决于浏览器（初始值），对应微软雅黑 | 名称值列表

font-size 字体大小： medium（初始值），对应16px | 大小值

line-height 行高： normal（初始值），对应1.32 | 数值

font 复合属性：（font-family ，font-size，line-height）

vertical-align 行内垂直对齐：baseline（初始值） | middle | top | bottom | 数值

注：font-family、font-size、line-height的对应值指Windows系统Chrome浏览器的值，其它操作系统与其它浏览器的初始值可能不同。

（4）定位模型

position 定位：static（初始值） | relative | absolute | fixed

top/bottom/left/right/ 坐标：auto（初始值） | 坐标数值

float布局设置

float 浮动：none（初始值） | left | right

clear 清除浮动：none（初始值） | both

（5）flex布局模型

flex容器设置

flex-direction 方向： row（初始值）| column

flex-wrap 换行：nowrap（初始值） | wrap

flex-flow 复合属性：（flex-direction，flex-wrap）

justify-content 水平对齐排列：flex-start（初始值） | center | flex-end | space-evenly

align-items 垂直对齐排列：normal（初始值） | stretch | flex-start | flex-end | center

align-content 多行对齐排列：normal（初始值） | stretch | flex-start | flex-end | center

flex子元素设置

flex-grow 列伸长：0（初始值） | 其它数值

flex-shrink 列收缩：1（初始值） | 其它数值

flex-basis 长度基数：auto（初始值） | 0%（完全按比例） | 其它数值

flex 复合属性：（flex-grow，flex-shrink，flex-basis）

（6）文本

color 颜色：黑色（初始值）| 颜色值

font-weight 字重：normal（初始值） | bold

text-align 文本对齐：left （初始值）| center | right

white-space 空白文本处理：normal（初始值） | nowrap

text-decoration 文本修饰：none（初始值） | underline

（7）背景

background-color 背景颜色：transparent（初始值）| 颜色值

background-image 背景图片：none（初始值） | 图片地址

background-repeat 背景图重复：repeat（初始值） | no-repeat

background-position 背景图位置：0% 0%（初始值） | 坐标值

background复合属性：（background-image，background-position，background-repeat）

（8）溢出模型

overflow-x 水平方向溢出处理：visible（初始值） | hidden | auto

overflow-y 垂直方向溢出处理：同上

overflow 复合属性：（overflow-x，overflow-y）

text-overflow 文本溢出处理：clip（初始值） | ellipsis

（9）堆叠模型

z-index Z轴序号：auto（初始值） | 数值

（10）其它

content 伪元素内容：normal（初始值） | 伪元素before与after设置内容。

list-style-type 列表项样式：circle（初始值）| none

transform 2D或3D转换：none（初始值） | 转换函数

cursor 光标形状：auto（初始值） | pointer

outline 轮廓：auto（初始值） | none

border-collapse 边框合并： separate（初始值）| collapse

5、常用选择器

常用选择器约10种，每种选择器有相应的语法形式。

6、CSS引入方式

CSS引入方式包括3种：内嵌样式、内部样式、外部样式。

7、语法级特性

语法级特性没有严格专门的代码，但它的重要性与代码同样重要。

（1）层叠性的六个子特性：属性初始默认性、标签样式默认性、继承性、覆盖性（优先级）、计算性、无效性。层叠性表示一个元素的CSS属性值的决定过程。

（2）属性间约束性包括：完全无效性、被自动修改性。约束性属于上述计算性的一部分。

（3）属性值含义多样性。

8、常见错误与问题类型

教程在讲解过程中指出常见错误与问题。具体类型与示例如下。

（1）思维错误MindError00x：CSS思维方式与C、java完全相同。

（2）概念理解错误ConceptError00x：元素只有设置CSS属性才有CSS属性。

（3）开发错误DevError00x：在Windows资源管理器直接双击文件打开页面。

（4）调试错误DebugError00x：认为CSS无法调整；学习基础概念与基础知识、开发遇到问题时，都不会使用开发者工具调试。

（5）设计错误DesignError00x：不重视元素结构只重视CSS，HTML代码随意设计的情况下编写CSS代码。

（6）属性无效规则Invalid00x：inline使width无效。

（7）不符合预期规则Diff00x：static使absolute元素坐标设置不合预期。

（8）属性被自动修改规则Update00x：脱离流定位的元素自动修改成block级元素。

9、设计方法

（1）分离（解耦）。页面的元素结构与样式分离。

（2）重用。通过选择器与外部样式表进行样式重用、尽量消除重复代码。

（3）页面设计基本方法。布局基本结构、布局基本流程、两种开发顺序、页面三要素。

（4）分解。页面元素结构逐层分解。

（5）类的设计。公用类、reset.css、类别类、类型类、状态类。

10、基础概念

层叠性、初始默认值、标签默认样式、继承、优先级数值、声明值declared value、指定值specified value、计算值computed value、应用值used value、实际值actual value；解析、渲染、绘制；盒子、盒子显示区域、盒子占据区域、display内部显示、display外部显示、FC、BFC、IFC、FFC；流式布局、块级元素、块容器；margin折叠、新建BFC、参与BFC；行内元素、行内级元素、原子行内级元素、行盒、bounds、strut；正常流定位、脱离流定位、绝对级别定位、包含块；弹性；页面三要素、元素结构分解、状态类、重构、公用样式。