CSS学习笔记

CSS

1.概念

CSS（层叠样式表）是一种用来描述文档如何呈现在屏幕、打印等上的语言。通过使用CSS，我们可以将HTML标记与外观和布局分离。

2.CSS 引入方式

• 外部样式表： 在head标签中加入标签，href属性指向外部css文件。
• 内部样式表：在head标签中使用

3.选择器

基础选择器

• 标签选择器：选择相应标签的元素，如div、p等
• 类选择器：选择指定class属性值的所有元素，如 .example
• id选择器：选择指定id属性值的唯一元素，如 #example
• 通配符选择器：选择所有元素，如 *

复合选择器

• 后代选择器：选择某个元素下的所有后代元素，如 div p
• 子代选择器：选择某个元素下的直接子元素，如 ul > li
• 并集选择器：选择多个元素，如 h1, h2, h3
• 交集选择器：选择同时拥有两种或多种不同属性的元素，如 a.classA.classB
• 伪类选择器：根据元素所处状态或信息选择元素，如 :hover等

选择器的优先级

样式规则根据“优先级”来决定作用于HTML元素上的CSS属性。当多个规则应用于同一元素时，优先级就决定了哪个规则将胜出。

4.盒子模型

• 盒子模型-边框线： CSS盒子模型包括：内容区域、内边距区域、边框区域和外边距区域。
• 盒子模型-padding： 盒子内边距区域的四个方向分别是上、右、下、左，使用padding属性设置。
• 盒子模型-外边距： 盒子外边距区域的四个方向也是上、右、下、左，使用margin属性设置。
• 外边距问题-合并现象： 当两个盒子相遇时，它们的外边距会合并为一个外边距，这种现象称为外边距合并。
• 外边距问题-塌陷问题： 当父元素的上边距和子元素的上边距重合时，会发生外边距塌陷的现象。
• 行内元素-内外边距问题： 行内元素没有内边距和外边距，使用line-height属性撑开行高。
• 盒子模型-尺寸计算： 盒子的总宽度 = 左边框 + 左内边距 + 内容区域 + 右内边距 + 右边框，盒子的总高度 = 上边框 + 上内边距 + 内容区域 + 下内边距 + 下边框。
• 盒子模型-元素溢出： 如果元素溢出了，可以通过overflow属性来控制。
• 盒子模型-圆角： 使用border-radius属性设置盒子四个角的圆角效果。
• 盒子模型-阴影（拓展）： 使用box-shadow属性在盒子周围添加阴影。

5.字体修饰属性

CSS提供多种修改字体样式的属性，如font-size、font-weight、font-style等等。

6.调试工具

调试工具是帮助我们排错和调试CSS样式的利器，常用的调试工具有Chrome开发者工具、Firebug、Safari的Web Inspector等。

7.CSS特性

• 继承性：如果一个元素没有指定某个CSS属性，那么它将从它的父元素继承这个属性。
• 层叠性：如果一个元素同时被多个样式规则所定义，那么它将按照一定规则来决定哪条规则的优先级更高。
• 优先级：在层叠性相同的情况下，根据选择器的优先级来确定哪个样式规则更重要。

8.背景属性

CSS提供了多种背景样式设置，如background-color、background-image等。渐变可以通过linear-gradient或radial-gradient来实现。

9.显示模式

CSS提供了多种显示模式，如块级元素、行内元素和行内块级元素。可以通过display属性进行设置。

10.清除默认样式

使用reset.css清除默认样式，并将其设置为一个css文件。

11.CSS 书写顺序

一般按照盒子模型的顺序来书写CSS样式，如先写边框、内边距、尺寸等等。

12.标准流

标准流是指文档内容默认的布局方式，包括块级元素和行内元素的默认布局方式。

13.浮动

CSS提供了float属性来实现元素浮动。为了防止浮动元素对其他元素的影响，需要清除浮动。

清除浮动

• 方法一：额外标签法
• 方法二：单伪元素法
• 方法三：双伪元素法（推荐）
• 方法四：overflow

14.flex布局

Flex（Flexible Box）布局是一种高效的布局方式，能够快速应对多种屏幕尺寸。Flex布局包括容器和成员两个概念。

15.网页设计技巧

• 清除默认样式，并将其设置为一个css文件。
• 设置版心区域。
• logo的设置。
• 导航制作技巧。
• 搜索区域。
• img+span。

16.定位

CSS提供了多种定位方式，包括相对定位、绝对定位和固定定位。使用z-index属性可以设置堆叠层级。

17.CSS 精灵

CSS精灵是指将多个小图标合并成一张大图并通过background-position的方式来显示相应小图标。

18.字体图标

字体图标是用字体文件来实现的图标，可以通过下载相应字体库来使用。在HTML中只需要添加对应的class即可插入字体图标。

19.垂直对齐方式

CSS提供了vertical-align属性来实现元素的垂直对齐。

20.过渡 transition

过渡效果（Transition）是指在元素从一种样式逐渐变化为另一种样式过程中的动画效果。可以通过CSS的transition属性来实现。

21.透明度 opacity

CSS提供了opacity属性来设置元素的透明度。

22.光标类型 cursor

CSS提供了cursor属性来设置鼠标悬停在元素上时的光标类型。

23.SEO 三大标签

SEO（Search Engine Optimization）是指优化网页以便于搜索引擎更好地理解和分类内容。其中三个非常重要的标签是、和

。

24.Favicon 图标

Favicon图标是指网站在浏览器地址栏、标签页等处显示的小图标。

25.input注意点

在使用input元素时，需要注意一些属性设置，如type、name、value、placeholder等。

26.平面转换 transform

CSS提供了多种平面转换效果，包括平移、旋转、缩放和倾斜等。

27.空间转换

CSS提供了空间转换（3D效果）效果，包括平移、旋转和缩放等。

28.动画-animation

动画是指可以通过CSS来实现的元素动画效果。CSS的animation属性可以实现多组动画。