CSS学习之路： 基础学习篇

1.1、什么是css

Cascading style sheets 层叠样式表，级联样式表，简称样式表

1.2、css作用

对页面中html元素进行美化

1.3、HTML和css的关系

• HTML：负责页面结构的搭建，负责数据的展示
• CSS：负责美化页面

1.4、HTML自带的属性和css使用原则

• W3C建议我们尽量使用css的方式来取代html属性
• css样式 1.样式代码可以重用 2.便于维护

1.5、css的特性

• css是解释性语言

• 从左到右，从上到下执行

• 继承性

  • 大部分的css效果是可以直接被子元素继承的
  • 必须是父子结构，子继承父

• 层叠性

  • 可以为一个元素定义多个样式规则
  • 如果样式属性不冲突，所有的样式都可以作用到这个元素生效

• 优先级

  • 如果多个样式作用到一个元素上时，样式属性就会发生冲突，就按照默认样式的优先级去应用

  • 默认的优先级

    • 最高 内联样式
    • 就近原则 （应用距离元素最近的样式）
    • 最低 浏览器默认样式

  • 手动调整优先级

    • 使用!important关键词

    • 如果一个样式使用!important的关键字，直接获取最高优先级，其他样式不会覆盖他

2.1、内联样式

• 任意标签都有style属性，在style属性定义样式
• 样式声明 样式属性：值 声明之间用分号隔开
• 注意
  • 内联样式，无法重用
  • 内联样式优先级最高
  • 项目中极少使用内联样式，只在学习和测试中使用

2.2、内部样式

• 在中，创建

• 在style中定义样式

• 选择器：规范了页面中哪些元素能够使用定义好的样式

• 注意，内部样式可以重用，但是有局限性，内部样式只能在本页面中使用，项目中使用比较少，主要在学习和测试的时候使用

2.3、外部样式

• 单独创建一个css文件

• 在html的head中使用link引入外部css文件

3.1、选择器的作用

• 规范了页面中哪些元素能够使用定义好的样式
• 选择器 就是一个条件，页面中符合这个条件的元素，可以应用这个样式

3.2、通用选择器

• 通用选择器的效率极低
• 所有元素内外边距清零

3.3、元素选择器（标签选择器）

• 页面中所有对应元素都使用这个样式
• 设置页面中某种元素的默认样式
• …

3.4、ID选择器（私人定制）

• 一个页面中，一个id值只能出现一次
• 对当前的页面中，某一个元素定义专有的样式（私人定制）
• 定义
• 调用
• 通常，项目中id选择器作为后代或子代选择器的开头部分

3.5、类选择器（项目中运用最多）

• 定义一类样式，这个样式是公共的，所有元素都可以调用，谁想用都可以用
• 定义
• 调用
• 多类选择器：
  • 调用

3.6、分类选择器

• 用两种或以上的选择器类型来找到某个元素
• 分类选择器的作用
  • 更精准的找打目标元素
  • 增加选择器的权值

3.7、群组选择器

• 逗号分割

3.8、后代选择器

• 通过后代关系去匹配元素
• 后代：一级或者多于一级的嵌套关系
• 空格分隔

3.9、子代选择器 >

• 通过子代关系，匹配元素

• 子代：一级嵌套

• 后代选择器和子代选择器可以相互嵌套使用

4.0、伪类选择器

• 匹配元素不同状态下的样式
  • :link 匹配链接未被访问时得状态
  • :visited 匹配链接已被访问的状态
  • :hover 匹配鼠标悬停时的状态
  • :active 匹配元素被激活时的状态
  • :focus 匹配元素获取焦点时的状态
• 注意：当一个元素:link :visited :hover :active
• 必须按照一定的顺序编写 爱恨原则

4.1、选择器的权值

• 权值：表示当前选择器的重要程度，权值越大优先级越高

  • ！important >1000
  • 内联样式 1000
  • Id选择器 100
  • 类选择器 10
  • 伪类选择器 10
  • 元素选择器 1
  • 通用选择器 0
  • 继承的样式 无

• 权值的特点：

  • 当一个元素中含有多个选择器时，需要将所有的选择器的权值进行相加，权值大的优先显示
  • 权值相同，就近原则
  • 群主选择器的权值单独计算，不能相加，各算各的
  • 使用！imprtant直接获取最高权值
    ！important不能用在内联样式中
  • 选择器的权值计算，不会超过自己的最大数量级

• Bootstrap 这种框架就是依赖 媒体从查询 ，实现布局随设备宽度自动切换。
• 字体大小，元素大小都使用 rem 或 em 这种相对单位，不适用px这种固定单位
• 关键标签
• 尽量使用流程布局方式
• 根据屏幕宽度，加载不同的css文件
• 图片的自动缩放，例如 ,根据不同的分辨率加载不同的图片

4.1、尺寸

• 改变元素的宽度和高度
• 属性
  • 宽度 width、max-width、min-width
  • 高度 height、min-height、max-height
  • 取值：以px为单位的数字 和 %
• 特殊取值
  • Width：100% 宽度为父元素宽度的100%
  • max-width：100% 设置到jpg 我可以缩小，但是我的最大宽度不能超过本身的100%

4.2、尺寸单位

• px 像素
• inch 英寸 1in=2.54cm
• pt 磅值，多用于设置字体的大小 1pt=1/72in
• cm 基本不用绝对单位
• mm 基本不用绝对单位
• em 相对单位 相对于父元素设置值的倍数
• rem 相对单位 相对于html元素设置值的倍数
• % 多数情况，父元素设置值的%

【面试题】 em和rem的区别：
em相对于父元素设置值的倍数 1.5em
rem相对于html元素设置值的倍数，html里设置font-size=16px，下面所有子元素或后代元素的字体大小统一设置1rem，即为16px。

4.3、页面中允许设置尺寸的元素

• 所有的块级元素都可以设置尺寸

  • 不设置宽，默认宽为父元素的100%
  • 不设置高，默认高度，靠内部内容撑起

• 行内元素设置宽高无效

  • 它的宽高，靠内容撑开

• 行内块 input

  • 可以设置宽高
  • 默认自带宽高，不同浏览器默认宽高差别很大

• 自带宽高属性的元素，可以设置尺寸 img table

4.4、溢出的处理

• 当内容较大，元素区域较小，就会发生溢出效果

• 默认溢出是纵向溢出

• 如果父元素套子元素，父元素的宽<子元素的宽，设置横向溢出

5.1、边框

• 边框的属性—简写方式 同时设置4个方向

• 单边定义边框属性

• 单属性定义

• 单边单属性

5.2、边框的倒角（倒成圆角）

• 举例

5.3、边框阴影

• ：h-shadow v-shadow blur spread color （inset）

• 举例

5.4、轮廓

• 边框的边框，绘制于边框外的线条

【注意】 轮廓可以有单属性，但是没有单边的定义

• 颜色的单词 都是合法的颜色
• rrggbb 16进制 0~255 00~ff #000000黑色 #ffffff白色 #ff0000红 #00ff00绿色 #0000ff蓝
• #aabbcc->#abc 简写
• rgb（r,g,b）十进制 0~255
• rgb（r%，%g，%b） 基本不用
• rgba（） alpha—透明度0~1 1完全不透明 0完全透明 用的比较多
• hsl（240，50%，47%） 饱和度 亮度

7.1、 改变外边距，元素有位移效果

• 语法

7.2、外边距的特殊效果

• 外边距的合并

  • 当两个垂直外边距相遇，他们将合并成一个外边距，值以大的位置
  • 解决方案
    • 1.在设置页面的时候，规避
    • 2.直接在一个元素中，把外边距写满，另一个元素不写外边距

• 关于块级元素，行内元素，行内块元素的完整总结

  

• 自带外边距的元素
  

  • 由于不同浏览器对外边距和内边距的默认初始值不一样，导致同一篇代码，在不同浏览器运行，会产生不同的效果。
  • 解决方案：在写代码之前，我们会把浏览器默认的样式清空，或者重置

• 外边距的溢出
  

7.3、内边距

改变内边距，感觉是改变了元素的大小,但实际，元素内容区域没有变，变化的是边框到内容区域之间的距离,内边距的颜色同元素背景色,使用场合：把元素撑开

• 语法

• 举例 搜索框撑大

7.4、改变盒子模型的计算方式

• 默认盒子计算宽度

• 改变当前原色盒子模型的计算方式：

7.5、BFC详解

• BFC （block formatting context）块级格式化上下文

• BFC的布局规则

• 如何形成BFC区域

• 平时在哪里会用到BFC

1. 解决浮动后的高度坍塌

2. 解决竖直方向margin重叠

3. 解决外边距溢出的问题 子元素的外边距作用到父元素上

• 背景颜色

• 背景图片

• 背景图片平铺

  • background-repeat:repeat 平铺 （默认）
  • background-repeat:no-repeat；不平铺
  • background-repeat:repeat-x；x抽的平铺
  • background-repeat:repeat-y；y抽的平铺

• 背景图片的定位

  • background-position：200px；一个值，同时设置x和y的位置
  • background-position：200px 400px；分别设置x和y的位置
  • 以px为单位的具体数字 ; % ; 关键字 (center right left)

• 背景图片的尺寸

  • 取值：1个值，同时设置宽高 ; 2个值，分别设置宽高

  • 单位：1. 以px为单位的数字 2. %

  • cover 让背景图充满整个容器，哪怕图片显示不全，也没关系
    

  • contain 让背景图完全的在容器中显示(等比缩小)，哪怕容器有空白也没关系
    

• 背景图片的固定

  • 取值：1. 默认值 scroll； 随着滚动条的滚动，背景图片会离开可视区域；2.fixed 固定； 背景图不会随着窗口滚动条滚动，不离开可视区域，但是只会在本容器的范围内显示。
  • 注意：背景图定位，发生变化，设置了背景图固定，背景图的定位相对于body而不是父元素的左上角定位。

• 背景的简写方式

  • 简写方式没有size
  • 最简方式：
  • background：color/image
  • 注意：重写已存在的简写样式，必须使用单独属性定义，不能使用简写方式去重写，不然会全部覆盖。

9.1、什么是渐变

多种颜色，平缓变化的一种显示效果。

9.2、影响渐变的主要因素

色标：一种颜色，以及这种颜色出现的位置
一个渐变效果最少有两个色标

9.3、渐变的分类

1. 线性渐变，以直线的方式来填充渐变色
2. 径向渐变，以圆形的方式来填充渐变色
3. 重复渐变，将线性和径向渐变反复的实现

9.4、线性渐变

9.5、径向渐变

9.6、重复渐变

9.7、浏览器兼容问题（ie8.0以下

• 在代码之前添加内核
• 线性渐变在做浏览器的兼容的时候，如果添加内核，方向写起点，没有to；如果不添加内核，方向写终点，有to。

10.1、字体属性

• 设置字号

• 设置字体的类型

• 设置字体的加粗

• 设置字体的样式 em标签默认的是italic

• 设置小型大写字母

  • 首字母正常大小，其他字母和小写字母一样大

• 字体简写方式

  • 最简方式：

10.2、文本样式属性

• 文本颜色

• 文本水平对齐方式

• 文本的垂直对齐方式

• 文本行高

• 文本的线条修饰

• 文本的首行缩进

• 文本阴影

11.1、表格的常用属性

• table的样式
  • 尺寸，边框，背景，字体，文本，内外边距
  • 给table设置边框，只设置了最外层的边框
• td/th的样式
  • 尺寸，边框，背景，字体，文本，内边距
  • 注意，外边距无效
• 特有属性：
  • vertical-align：top/middle/bottom 作用在td/th，input，img
  • 指点单元格内部数据的垂直对齐方式

11.2、table的特殊表现方式

• 一个表格的实际尺寸是根据内容的多少决定的
  • 内容多，设置的尺寸小，以内容为准
  • 内容少，设置的尺寸大，以设置的尺寸为准
• 一个表格中，
  • 一整列的宽度是由这一列中，最宽的那一列决定的
  • 一整列的高度是由这一行中，最高的那一列决定的
• table在浏览器的渲染方式
  • 把table所有的数据都读取进内存，再从内存中一次性渲染到页面，效率极低。

11.3、table的特有样式

• 边框的边距

• 边框的合并

• 标题的位置

• 设置表格的显示规则

12.1、什么是定位？

设置元素在页面中的位置

12.2、定位的分类

• 普通流定位
• 浮动定位
• 相对定位
• 绝对定位
• 固定定位

12.3、普通流定位 默认文档流

• 所有元素在页面上都有自己的空间。
• 每个元素都是从父元素的左上角开始渲染。
• 块级元素按照从上到下的方式逐个排列，每个元素单独成行。
• 行内和行内块，按照从左到右的方式，逐个排列。多个共用一行。

12.4、浮动定位 块级元素横向显示

12.5、浮动元素引发的特殊情况

• 浮动元素占位的问题
  • 当父元素显示不下所有浮动元素时，最后显示不下的会换行显示。但是，已浮动元素会根据自己的浮动方向占据位置，导致显示不下的元素不能在已浮动元素占位空间显示。

• 元素一旦浮动，如果元素未定义，那么浮动元素的宽度是靠内容撑起来的
• 元素一旦浮动，就会变成块级元素（设置宽高有效，设置垂直外边距有效，尤其对行内元素效果显著）
• 文本，行内元素，行内块元素，是不会被浮动元素压在下面，而是会巧妙的避开，环绕着浮动元素显示

【总结】 元素脱离文档流，肯定会发生几件事情

1. 元素不占页面空间
2. 后续元素上前补位
3. 元素变为块级
4. 元素不设置宽度，宽度靠内容撑开

12.6、清除浮动元素带来的影响

12.7、高度坍塌（高阶）

• 块级元素的高度，如果不设置，默认高度是靠内容撑起来的
• 块级元素内部，如果所有的元素都浮动，块级元素认为自己内部没有元素了，所以撑不起来，就会发生高位坍塌。
• 解决方案：
  • 设置此高度，但是很多时候，我们不知道子元素占据多高
  • 父元素也浮动，弊端，会影响父元素的兄弟元素和父元素的父元素
  • overflow:hidden/auto
  • 在父元素的最后面追加一个空的块级元素，不设置高，不设置宽，只设置clear：both

12.8、定位（相对，绝对，固定）

• 相对定位

• 绝对定位

• 固定定位

• 堆叠顺序

13.1、 设置 元素在页面中的表现形式（块级，行内，行内块）

13.2、

【注】visibility：hidden和display：none的隐藏有什么区别？

display: none;脱离文档流,不占页面空间的
visibility: hidden 看不见，但是依然占据页面空间

13.3、 透明度

• 列表的标识类型

• 列表项图标

• 列表项的位置

• 简写方式

16.1、兄弟选择器

• 兄弟元素：具备同样父级元素的平级元素之间，称为兄弟元素

• 兄弟选择器，只能往后找，不能往前找

• 相邻兄弟选择器 获取挨在某个选择器后面的兄弟元素

  • 案例： .c相邻的h元素变红

• 通用兄弟选择器 获取某个选择器后面所有符合条件的兄弟元素

  • 案例：#d1后的所有.c元素变红

16.2、属性选择器

• 匹配带有attr属性的元素

• 匹配带有attr属性并且值为value的元素

• 匹配带有attr属性的elem元素

• 匹配带有attr1属性，attr2属性，…的元素

  • 案例：匹配dic元素有class和id属性的样式

16.3、模糊属性值

• [attr^=value] 匹配attr属性以value开头的元素
• [attr$=value] 匹配attr属性以value结尾的元素
• [attr*=value] 匹配attr属性有value的元素
• [attr~=value] 匹配attr属性有value这个独立单词的元素

16.4、伪类选择器（h5新出）

• 目标伪类 让被激活的锚点应用此样式

• 结构伪类

  • 通过元素的结构关系来找到对应元素
  • select父元素的第一个孩子，同时这个还得符合selector
  • select父元素的最后一个孩子，同时这个还得符合selector
  • n从1开始，这个还得符合selector

• 匹配内部没有任何元素标签（没有任何元素：内部不能有其他元素，本文，符号）

• 匹配属于其父元素的唯一子元素

• 否定伪类 将所有满足selector条件的元素都排除

  • 方法：在正常的选择器上添加否定伪类:not( )

  • 案例：

16.5、伪元素选择器

• 匹配元素的一部分

  • 匹配元素的首字符： h4写法 / h5写法
  • 匹配元素的首行，如果与首字符冲突，听首字符的： h4写法 / h5写法
  • 匹配鼠标在页面选中文本的样式 只能修改背景颜色和字体颜色

• 伪元素,内容生成,使用css动态来生成html结构

  • 或者 在内容区域中，最前面添加一个假的元素

  • 或者 在内容区域中，最后面添加一个假的元素

  • 给内容生成添加内容，只能添加文本

  • 内容生成能解决的问题：

    • 解决外边距溢出问题

    • 高度坍塌

17.1、什么是弹性布局？

• 一种布局方式，主要解决某个元素中的子元素的布局方式
• 为布局提供了很大的灵活性

17.2、弹性布局的相关概念

• 容器（父）

  • 当一个元素被设置为display：flex，这个元素称为弹性布局的容器，容器内部都按照弹性布局的方式排列。

• 项目（子）

  • 要发生弹性布局的子元素们，称为弹性项目。

• 主轴-四条 （类似于对称轴）

  • 项目们的排列方向
  • 项目们横向排列，主轴为x轴
  • 项目们纵向排列，主轴为y轴
  • 项目们在主轴上的排列顺序，称为主轴起点和终点。

• 交叉轴（2条）

  • 与主轴垂直的一条轴
  • 项目们在交叉轴上的排列方式，称为交叉轴起点和终点。

17.3、设置容器为弹性布局

• 让块级元素变为容器
• 让行内元素变为容器
• 将元素变为弹性容器，他所有的子元素都将变为弹性项目
• 弹性项目中（子）设置浮动无效，容器（父）中text-align无效，但是项目（子）会继承。

【注意：】
1.元素设置为容器之后，元素的text-align，vertival-align失效，只能使用主轴和交叉轴的属性来设置子元素的对齐方式。
2.弹性项目，浮动，清楚浮动失效。

17.4 用于设置容器的属性

• 主轴方向

• 是否换行

• 上面两个属性的简写

• 项目在主轴上的排列方式

• 项目在交叉轴上的排列方式

17.5 用于设置项目的属性

• 定义项目的排列顺序

• 当主轴有足够大的剩余空间时，项目将按照设置的增长速度变大。

• 容器空间不足时，项目按照设置的缩小速度变小

• 单独定义当前项目在交叉轴上的对齐方式

应用场景：悬浮图片变大变小（转换），慢慢变大（过度）

18.1、什么是转换

• 改变元素在页面中的位置，大小，角度，以及形状。
• 转换分为2d转换和3d转换
• 2d的转换：在x轴和y轴上发生转换效果
• 3d的转换：在x y基础上增加了z轴的转换效果

18.2、转换的属性

18.3、2D转换

• 位移

• 缩放

• 旋转

• 倾斜

  • skewX(xdeg)，让y轴向x轴倾斜n度，n:+ 逆时针 -顺时针

    

  • skewY(ydeg)，让x轴向着y轴倾斜n度，n：+顺时针 -逆时针

    

  • skew(xdeg,ydeg)

    

面试题

• 使用css，让一个div在任何情况下，都处于页面的正中心

  

18.4、3D转换

• 所有3d都是模拟的

• 透视距离

  • 模拟人的眼睛到3d转换元素之间的距离，距离不同，看到的效果也不同。
  • 距离 此属性要设置在3d转换元素的父元素上。

• 3d旋转

  • rotateX(xdeg) 以x轴为中心轴的旋转 （考羊腿，老式爆米花机）

  

  • rotateY(ydeg) 以y轴为中心轴的旋转（旋转门 土耳其烤肉

    

  • rotateZ(Zdeg) 以z轴为中心的旋转（电风扇 风车）

  

  • rotate3D(x,y,z,ndeg) 3条轴一块旋转

• (让CSS的值,在一段时间内平缓变化的效果)
• 研究 cubic-bezier（0，0，0，1）贝塞尔曲线

19.1、语法

19.2、过度时长

19.3、时间曲线函数

19.4、过渡的延迟时间

• cubic-bezier（0，0，0，1）贝塞尔曲线

19.5 过渡代码的编写位置

• 写在原来的样式里，过渡效果有去有回
• 写在hover中，过渡效果有去无回

19.6、过渡的简写方式

20.1、什么是动画

• 是元素从一种状态逐渐变为另外一种状态（多个状态）
• 其实动画就是多个过渡效果放到一起
• 动画就是过渡的升级版

20.2、使用关键帧，来控制动画的每一个状态

• 一秒播放24张图片
• 一秒播放12张图片
• 动画执行的时间点
• 在这个时间点上的样式

20.3、使用动画的步骤

• 声明动画

  

• 调用动画的属性

  • 选中要使用的动画
    • 动画名称
  • 动画的执行时间
  • 动画的时间曲线函数
    • ease/linear/ease-in/ease-out/ease-in-out
  • 动画的延迟时间
  • 动画的播放次数
    • 具体的次数/infinite无限
  • 动画的播放顺序

• 动画的简写方式

• 最简方式

• 动画的填充模式

• 动画的播放模式

20.4、案例

20.5、动画的兼容性

• 如果需要兼容低版本浏览器，需要添加前缀

• 在声明动画时添加内核

20.6、使用animate.css第三方动态库