CSS入门项目小步教程 项目知识体系

详情链接地址： 项目知识体系 | CSS入门项目小步教程

本项目使用如下技术内容，属于必须完全掌握的知识点。

1 设计方法

（1）分解。页面结构逐层分解。

（2）分离（解耦）。页面的结构与样式分离。

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

（4）组件。特定结构与样式设计成组件，方便重用。

（5）预判变化。页面需求以后可能发生变化，需要根据经验提前预判变化，进行相应设计。

2 工具

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

3 标签

html、head、meta、link、body、div、h1、h2、p、span、a、ul、li、img、iframe。

4 标签属性

id（全局）、class（全局）、style（全局）、href（a标签）、src（img标签、iframe标签）。

全局标签属性表示所有标签都具有的属性。

5 CSS属性与值

主要按从布局到细节的先后顺序排序。

（1）显示类型与列设置

display：inline（默认值） | block | inline-block | flex

flex-wrap：nowrap（默认值） | wrap

flex-direction： row（默认值）| column

float：none（默认值） | left | right

clear： none（默认值） | both

（2）定位

position：static（默认值） | relative | absolute | fixed

left/right/top/bottom：auto（默认值） | 坐标数值

（3）盒子模型

box-sizing： content-box（默认值） | border-box

width/height： auto（默认值） | 数值

[ background-color：transparent（默认值）| 颜色值 ]

padding：0（默认值） | 数值

border：边框宽度值 线型 颜色（复合属性）

margin：0（默认值） | 数值

（4）文本

font-family：名称值列表

font-size：大小值

line-height：数值

color：颜色值

text-align：left | center

text-decoration：none | underline

（5）变换

transform：函数

（6）属性动画

transition：复合值

（7）其它

content：内容

6 选择器

标签选择器 标签名称

类选择器 .类名（英文句号）

ID选择器 #ID名（#号）

后代选择器 A B（之间空格）

子元素选择器 A>B（之间大于号）

分组选择器 A, B（之间逗号）

伪类选择器 :hover、:first-child （冒号开头）

伪元素选择器 ::before、::after （双冒号开头）

7 其它

小图：精灵图、字体图标iconfont。

8 语法级特性

层叠性：默认性、继承性、叠加性、覆盖性（优先级）。

约束性：完全无效性、被自动修改性、不合预期性。

9 涉及重要模型

本教程涉及以下模型：盒子模型、流式布局模型、定位模型、flex布局模型、堆叠模型、溢出模型。