CSS3&HTML5_夯实基础

CSS3&HTML5_夯实基础

目录

• CSS3&HTML5_夯实基础
  • 1.选择器
    • 1.1 常用选择器
    • 1.2 复合选择器
    • 1.3 关系选择器
    • 1.4 属性选择器
    • 1.5 伪类选择器
    • 1.6 伪元素选择器
    • 1.7 餐厅练习
  • 2.样式的继承
  • 3.选择器的权重
    • 3.1 样式的冲突
    • 3.2 选择器的权重
  • 4.单位
    • 4.1 像素
    • 4.2 百分比
    • 4.3 em
    • 4.4 rem
  • 5.文档流（normal flow）
  • 6.盒模型
    • 6.1 盒子模型
    • 6.2 水平方向的布局
    • 6.3 垂直方向的布局
    • 6.4 外边距的重叠
  • 7.行内元素的盒模型
  • 8.浏览器默认样式
  • 9.盒子的尺寸
  • 10.轮廓、阴影和圆角
    • 10.1 轮廓
    • 10.2 阴影
    • 10.3 圆角
  • 11. 浮动
  • 12.脱离文档流
  • 13.高度塌陷问题和BFC
    • 13.1 高度塌陷
    • 13.2 BFC
    • 13.3 clear
    • 13.4 使用after伪元素解决高度塌陷问题
  • 14.解决外边距的重叠问题
  • 15.定位（position）
    • 15.1 什么是定位
    • 15.2 利用绝对定位实现元素垂直居中
    • 15.3 元素的层级
  • 16.字体
    • 16.1 字体族
    • 16.2 图标字体
    • 16.3 行高
    • 16.4 font简化写法
    • 16.5 文本的水平和垂直对齐
    • 16.6 其他文本样式
  • 17.背景
    • 17.1 背景颜色
    • 17.2 背景图片
    • 17.3 背景重复方式
    • 17.4 背景图片的位置
    • 17.5 设置背景的范围
    • 17.6 设置背景图片滚动
    • 17.7 背景相关的简写属性
    • 17.8 关于雪碧图
    • 17.9 渐变
  • 18.PS切图
  • 19.表格
    • 19.1 table标签
    • 19.2 表格样式
  • 20.表单
  • 21.实战总结
  • 22.过渡
  • 23.动画
  • 24.变形
  • 25.less语法
    • 25.1 什么是less
    • 25.2 less常用语法
    • 25.3 对less插件进行配置
  • 26.flex弹性盒子布局
    • 26.1 flex是什么
    • 26.2 弹性容器和弹性元素
    • 26.3 弹性容器和弹性元素的属性
  • 27.像素和移动端像素
    • 27.1 像素的两种类型
    • 27.2 移动端像素
    • 27.3 vw单位
  • 28.响应式布局
    • 28.1 什么是响应式布局
    • 28.2 使用媒体查询
    • 28.3 响应式设计的网页
  • 29.总结

1.选择器

1.1 常用选择器

• 元素选择器
  • 作用：通过标签名选中指定元素
  • 语法：标签名{}
• id选择器
  • 作用：通过id选中一个元素
  • 语法：#id属性值{}
• 类选择器
  • 作用：通过元素的class属性值选中一组元素
  • 语法：.class属性值
  • 注意：可以同时为一个元素指定多个class属性
• 通配选择器
  • 作用：选中页面中的所有元素
  • 语法：*{}

1.2 复合选择器

• 交集选择器
  • 作用：选中同时符合多个条件的元素
  • 语法：选择器1选择器2选择器3选择器n{}
  • 注意：交集选择器中如果有元素选择器，必须使用元素选择器开头
• 选择器分组（并集选择器）
  • 作用：同时选择多个选择器对应的元素
  • 语法：选择器1,选择器2,选择器3,选择器n{}

1.3 关系选择器

• 几种元素关系
  • 父元素
  • 子元素
  • 祖先元素
  • 后代元素
  • 兄弟元素
• 子元素选择器
  • 作用：选中指定父元素的指定子元素
  • 语法：父元素 > 子元素{}
• 后代元素选择器
  • 作用：选中指定元素内的指定后代元素
  • 语法：祖先 后代{}
• 兄弟选择器
  • 作用1：选择下一个兄弟
  • 语法1：前一个 + 下一个{}
  • 作用2：选择下边所有的兄弟
  • 语法2：兄 ~ 弟{}

1.4 属性选择器

• 属性选择器
  • 作用1：选择含有指定属性的元素
  • 语法1：[属性名]{}
  • 作用2：选择含有指定属性和属性值的元素
  • 语法2：[属性名=属性值]{}
  • 作用3：选择属性值以指定值开头的元素
  • 语法3：[属性值^=属性值]{}
  • 作用4：选择属性值以指定值结尾的元素
  • 语法4：[属性值$=属性值]{}
  • 作用5：选择属性值中含有某值的元素
  • 语法5：[属性值*=属性值]{}

1.5 伪类选择器

• 伪类（不存在的类，特殊的类）
  • 伪类用来描述一个元素的特殊状态
    • 如：第一个子元素、被点击的元素、鼠标移入的元素...
  • 伪类一般情况下都是使用 : 开头
    • :first-child 第一个子元素
    • :last-child 最后一个子元素
    • :nth-child() 选择第n个子元素
    • 特殊值：
      • n 第n个 n的范围0到正无穷
      • 2n 或 even 表示选中偶数位的元素
      • 2n+1 或 odd 表示选中奇数位的元素
    • 以上这些伪类都是根据所有的子元素进行排序
    • :first-of-type、:last-of-type、:nth-of-type()，这几个伪类功能和上述类似，不同点是他们是在同类型元素中进行排序
    • :not() 否定伪类，将符合条件的元素从选择器中去除
• a元素的伪类
  • :link 用来表示正常的链接
  • :visited 用来表示访问过的链接，由于隐私的原因visited这个伪类只能修改链接的颜色
• :hover 用来表示鼠标移入的状态
• :active 用来表示鼠标点击的状态

1.6 伪元素选择器

• 伪元素（表示页面中特殊的不真实存在的元素）
  • 伪元素用来描述特殊的位置
  • 伪元素使用 :: 开头
    • ::first-letter 表示第一个字母
    • ::first-line 表示第一行
    • ::selection 表示选中的内容
    • ::before 元素的最开始
    • ::after 元素的最结尾
      • before 和 after 必须结合content属性来使用

1.7 餐厅练习

• 使用餐厅练习可以练习CSS选择器的使用

• 进入餐厅练习

2.样式的继承

• 我们为一个元素设置的样式同时也会应用到它的后代元素上
• 继承是发生在祖先和后代之间的
• 继承的设计是为了方便我们的开发
• 注意：并不是所有的样式都会被继承，如背景相关、布局相关等

3.选择器的权重

3.1 样式的冲突

• 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突
• 发生样式冲突时，应用那个样式由选择器的权重（优先级）决定

3.2 选择器的权重

• 内联样式 1,0,0,0
• id选择器 0,1,0,0
• 类和伪类选择器 0,0,1,0
• 元素选择器 0,0,0,1
• 通配选择器 0,0,0,0
• 继承的样式 没有优先级
• 注意事项：
  • 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示
  • 分组选择器是单独计算的
  • 选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
  • 如果优先级计算相等，此时优先使用靠下的样式
  • 可以在某一个样式的后面添加 !important ，此样式将会获得最高优先级，甚至超过内联样式，慎用

4.单位

4.1 像素

• 显示器由像素点构成
• 不同屏幕像素大小是不同的，像素越小的屏幕，显示效果越清晰
• 所以同样的200px在不同设备效果不一样

4.2 百分比

• 可以将属性值设置为相对于其父元素属性的百分比
• 设置百分比可以使子元素跟随父元素的改变而改变

4.3 em

• em是相对于元素的字体大小来计算的
• 1em = 1font-size
• em会根据字体大小的改变而改变

4.4 rem

• rem是相对于根元素的字体大小来计算

5.文档流（normal flow）

• 网页是一个多层结构，一层摞着一层
• 通过CSS可以分别为每一次来设置样式
• 作为用户来讲只能看到最顶上一层
• 这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列
• 对于我们来说元素主要有两个状态：
  • 在文档流中
  • 不在文档流中（脱离文档流）
• 元素在文档流中的特点：
  • 块元素
    • 块元素会在页面中独占一行（自上向下垂直排列）
    • 默认宽度是父元素的100%
    • 默认高度是被内容撑开（子元素）
  • 行内元素不会独占页面的一行，只占自身的大小
  • 行内元素在页面中左向右水平排列，如果一行不能容纳所有行内元素，则元素会换到第二行继续自左向右排列
  • 行内元素的默认宽度和高度都是被内容撑开

6.盒模型

6.1 盒子模型

• CSS将页面中的元素都设置为了一个矩形的盒子
• 将元素设置为矩形的盒子后，对页面的布局就变成了摆放不同盒子到不同位置
• 每一个盒子都由以下几部分组成：
  • 内容区（content）
  • 内边距（padding）
  • 边框（border）
  • 外边距（margin）
• 设置width和height影响内容区的大小
• 其中：内容区、内边距、边框都会影响盒子可见框的大小
• 外边距可以设置为负值，设置上、左外边距移动元素本身，设置下、右外边距移动其他元素

6.2 水平方向的布局

• 元素在其父元素中水平布局必须满足：整个盒子模型的宽度相加 = 父元素内容区宽度
• 当以上等式不成立的时候，称为过度约束，当没有设置auto值的时候，浏览器自动调整margin-right值使等式成立，反之则调整auto值
• 通常可以设置子元素的margin-left和margin-right的值为auto来使子元素内容区水平居中

6.3 垂直方向的布局

• 子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出
• 使用 overflow 属性来设置父元素如何处理溢出的子元素，还有overflow-x、overflow-y单独设置x轴和y轴的处理方式
• overflow的可选值：
  • visible，默认值，子元素会从父元素中溢出，在父元素外部的位置显示
  • hidden，溢出的内容将会被裁剪不会显示
  • scroll，生成两个滚动条，通过滚动条来查看完整的内容
  • auto，根据需要生成滚动条

6.4 外边距的重叠

• 相邻的垂直方向外边距会发生重叠现象
• 兄弟元素
  • 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
  • 特殊情况：
    • 如果相邻的外边距一正一负，则取两者的和
    • 如果相邻的外边距都是负值，则取两者中绝对值较大的
  • 兄弟元素之间的外边距的重叠，对开发者是有利的，所以我们不需要处理
• 父子元素
  • 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
  • 父子外边距的折叠会影响页面的布局，必须进行处理

7.行内元素的盒模型

• 行内元素不支持设置宽度和高度
• 行内元素可以设置padding、border、margin，但垂直方向的设置不会影响页面布局
• 通过设置display这个属性，可以选择元素的显示类型
  • inline：将元素设置为行内元素
  • block：将元素设置为块元素
  • inline-block：将元素设置为行内块元素
    • 行内块：既可以设置宽度和高度又不会独占一行
  • table：将元素设置为一个表格
  • none：元素不在页面中显示
• visibility用来设置元素的显示状态
  • visible：默认值，元素在页面中正常显示
  • hidden：元素在页面中隐藏，不显示，但是依然占据页面的位置

8.浏览器默认样式

• 通常情况，浏览器都会为元素设置一些默认样式

• 默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面）

• 简单方案：

  /* 去除浏览器默认样式 */
  *{
  	margin: 0;
  	padding: 0;
  }
  

• 完美方案：在项目中引入写好的重置样式表，对所有存在默认样式的元素进行重置

  • reset.css 直接去除浏览器的默认样式
  • normalize.css 对默认样式进行了统一

9.盒子的尺寸

• 默认情况下，盒子的可见框的大小由内容区、内边距和边框共同决定
• box-sizing：用来设置盒子尺寸的计算方式（设置width和height的作用）
  • content-box：默认值，宽度和高度依赖设置内容区的大小
  • border-box：宽度和高度用来设置整个盒子可见框的大小

10.轮廓、阴影和圆角

10.1 轮廓

• border：用这个属性用来设置边框，会影响盒子的大小，造成对布局的影响
• outline：用这个属性用来设置轮廓线，用法与border相同，但它不会影响布局

10.2 阴影

• box-shadow：用来设置元素的阴影效果，阴影不会影响页面布局
  • 语法：box-shadow: X轴偏移量 Y轴偏移量 阴影的模糊半径 阴影颜色(rgba)
• 设置inset即可使用内阴影

10.3 圆角

• border-radius：用来设置圆角
  • border-radius: 圆角半径
  • border-radius: 水平半径 / 垂直半径
• 针对元素的四个角还有border-top-left-radius、border-top-right-radius...等四个属性

11. 浮动

• 使用 float 属性来设置元素的浮动，通过浮动可以使一个元素向其父元素的左侧或右侧移动
  • none 默认值，元素不浮动
  • left 元素向左浮动
  • right 元素向右浮动
• 元素设置浮动后，会脱离文档流，不需要满足水平布局的等式，也不再占据文档流中的位置
• 浮动元素默认不会从父元素中移出
• 浮动元素向左、向右移动时，不会超过它前面的其他同方向浮动元素
• 浮动元素不会超过它上边的兄弟浮动元素，最多和它一样高
• 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移，浮动元素用于水平布局
• 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，浮动元素的初衷就是用来实现文字环绕效果

12.脱离文档流

• 块元素
  • 块元素不再独占页面的一行
  • 脱离文档流以后，块元素的宽度和高度默认都被内容撑开
• 行内元素
  • 行内元素脱离文档流以后就会变成块元素，特点和块元素一样

13.高度塌陷问题和BFC

13.1 高度塌陷

• 在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，子元素会脱离文档流，导致父元素高度丢失，最终导致页面布局混乱
• 高度塌陷是浮动布局中比较常见的问题，这个问题必须处理

13.2 BFC

• BFC(Block Formatting Context) 块级格式化环境
• BFC是一个CSS中的隐含属性，可以为一个元素开启BFC
• 开启BFC该元素会变成一个独立的布局区域
• 元素开启BFC后的特点
  • 开启BFC的元素不会被浮动元素所覆盖
  • 开启BFC的元素子元素和父元素外边距不会重叠
  • 开启BFC的元素可以包含浮动的子元素
• 可以通过一些特殊的方式开启元素的BFC
  • 设置元素的浮动
  • 将元素设置为行内块
  • 将元素的overflow设置为一个非visible的值（推荐）
    • 常用方式是为元素设置 overflow: hidden 开启其BFC，使其可以包含浮动元素

13.3 clear

• 如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素的影响
• clear的作用：清除浮动元素对当前元素的影响
• clear的可选值：
  • left 清除左侧浮动元素对当前元素的影响
  • right 清除右侧浮动元素对当前元素的影响
  • both 清除两侧中影响最大的那侧

13.4 使用after伪元素解决高度塌陷问题

• 为浮动的子元素的after伪元素添加clear属性，并设置display为块元素
• 该伪元素会撑开父元素的高度，并随子元素高度而变化
• 这是解决高度塌陷问题的最佳方案

14.解决外边距的重叠问题

• 在子元素与父元素之间添加一个元素使其在垂直方向的外边距不再重叠

• /* 利用before伪元素 */
  .box::before{
      content: '';
      display: table;/* 必须设置为table才能完美解决 */
  }
  

• 综合解决高度塌陷和解决外边距重叠的方法，我们可以设计一个用来解决这些问题的类

• /* 使用这个类，同时解决高度塌陷和外边距重叠 */
  .clearfix::before,
  .clearfix::after{
      content: '';
      display: table;
      clear: both;
  }
  

15.定位（position）

15.1 什么是定位

• 定位是一种更加高级的布局手段，可以将元素摆放到页面任意位置
• 设置position的属性值
  • static 默认值，元素是静止的没有开启定位
  • relative 开启元素的相对定位
    • 元素开启相对定位，不设置偏移量元素不会发生变化
    • 相对定位是参照元素在文档流中的位置进行定位
    • 相对定位会提升元素的层级
    • 不脱离文档流
  • absolute 开启元素的绝对定位
    • 元素开启绝对定位，不设置偏移量元素的位置不会发生变化
    • 绝对定位是相对于其包含块（containing block）进行定位的
    • 如果所有的祖先元素都没有开启定位则相对于根元素进行定位
    • 绝对定位会提升元素的层级
    • 脱离文档流
  • fixed 开启元素的固定定位
    • 固定定位是一种特殊的绝对定位，所以固定定位的大部分特点和绝对定位一样
    • 唯一不同的是固定定位永远参考于浏览器的视口进行定位（可以固定在视口不动）
  • sticky 开启元素的粘滞定位
    • 粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定
    • 兼容性不好
• 包含块（containing block）
  • 正常情况下
    • 包含块就是离当前元素最近的祖先块元素
  • 绝对定位的包含块
    • 包含块就是离当前元素最近的开启了定位的祖先元素
  • html（根元素、初始包含块）

15.2 利用绝对定位实现元素垂直居中

• 开启定位的元素在发生过度约束时，会调整auto值满足布局等式，如果没有auto值，则会调整right值

• /* 实现元素垂直居中 */
  /* 父元素 */
  .box1{
       200px;
      height: 200px;
      position: relative;
  }
  /* 子元素 */
  .box2{
       100px;
      height: 100px;
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
  }
  

15.3 元素的层级

• 对于开启了定位的元素，可以通过z-index属性来指定元素的层级
• z-index需要一个整数作为参数，值越大元素的层级越高
  • 元素的层级越高越优先显示
• 如果元素层级一样，则优先显示靠下的元素
• 祖先元素的层级再高也不会盖住后代元素

16.字体

16.1 字体族

• 字体相关的样式

  • color 用来设置前景色（设置字体颜色）
  • font-size 字体的大小
    • em 相对于当前元素的一个font-size
    • rem 相对于根元素的一个font-size
  • font-family 字体族（字体的格式）
    • serif 衬线字体
    • sans-serif 非衬线字体
    • monospace 等宽字体
    • 这几个值用来指定字体的类别，浏览器会自动使用该类别下的字体

• font-family可以指定多个字体，使用逗号隔开，字体生效时优先使用第一个，第一个无法使用时则使用第二个，以此类推

• @font-face可以将服务器中的字体直接提供给用户去使用

• /* 
  存在的问题：
  	1.加载速度
  	2.版权
   */
  @font-face {
      /* 指定字体名 */
      font-family: 'myfont';
      /* 服务器中字体的路径 */
      src: url('./font/xxxxx.ttf') format("truetype")
  }
  

16.2 图标字体

• 在网页中经常需要使用一些图标，可以通过图片来引入图标
  • 但是图标大小本身比较大，并且非常不灵活
• 所以在使用图标时，我们还可以将图标直接设置为字体
  • 然后通过font-face的形式来对字体进行引入
• 这样我们就可以通过使用字体的形式来使用图标
• 使用矢量图的图标可以避免失真
• 使用方式：
  • 为元素设置对应的类
  • 使用CSS为伪元素的content属性设置对应编码，并设置对应font-family和font-weight
  • 使用实体 &#x图标编码;

16.3 行高

• 行高（line-height） 指的是文字占有的实际高度
  • 行高可以直接指定一个大小（px em）
  • 也可以直接为行高指定一个整数，行高会是字体的指定倍数
• 字体框 字体框就是字体存在的格子，设置font-size实际上就是设置字体框的高度
• 行高会在字体框的上下平均分配
• 将行高设置为和元素高度一样，可以使单行文字在元素中垂直居中
• 行高经常原来设置文字的行间距
  • 行间距 = 行高 - 字体大小

16.4 font简化写法

• font 可以设置字体相关的所有属性

  • 语法 font: 字体大小/行高 字体族
  • 如果省略行高，将使用默认值1.33

• font-weight 字重，字体的加粗

  • normal 默认值 不加粗
  • bold 加粗
  • 100-900 九个级别（没什么用）

• font-style 字体风格

  • normal 正常的
  • italic 斜体

16.5 文本的水平和垂直对齐

• text-align 文本的水平对齐
  • left 左侧对齐
  • right 右对齐
  • center 居中对齐
  • justify 两端对齐
• vertical-align 设置元素垂直对齐的方式
  • baseline 默认值 基线对齐
  • top 顶部对齐
  • bottom 底部对齐
  • middle 居中对齐
• 使用<img>标签的时候需要设置vertical-align，默认基线对齐会导致出现空白

16.6 其他文本样式

• text-decoration 设置文本修饰

  • none 什么都没有
  • underline 下划线
  • line-through 删除线
  • overline 上划线

• white-space 设置网页如何处理空白

  • normal 正常
  • nowrap 不换行
  • pre 保留空白

• 实现以省略号显示溢出文本内容的方法

  box{
       200px;
      white-space: nowrap;/* 不换行 */
      overflow: hidden;/* 裁剪溢出内容 */
      text-overflow: ellipsis;/* 将溢出文本显示为... */
  }
  

17.背景

17.1 背景颜色

• background-color 设置背景颜色

17.2 背景图片

• background-image 设置背景图片
  • 可以同时设置背景颜色和背景图片，这样背景颜色会成为图片的背景色
  • 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
  • 如果背景的图片大于元素，部分背景将会无法完全显示
  • 如果背景图片和元素一样大，则会正常显示

17.3 背景重复方式

• background-repeat 用来设置背景的重复方式
  • repeat 默认值，背景会沿着x轴 y轴双方向重复，将元素铺满
  • repeat-x 沿x轴重复
  • repeat-y 沿y轴重复
  • no-repeat 背景图片不重复

17.4 背景图片的位置

• background-position 用来设置背景图片的位置
  • 设置方式1：通过top left right bottom center 几个表示方位的词来设置背景图片在九宫格中的位置
  • background-position: center center;/* 居中 */
  • 使用方位词时必须要同时指定两个值，如果只写一个则第二个默认为center
  • 设置方式2：通过偏移量来指定背景图片的位置
  • background-position: 水平方向偏移量 垂直方向偏移量;

17.5 设置背景的范围

• background-clip 设置背景的范围
  • border-box 默认值，背景会出现在边框的下边
  • padding-box 背景不会出现在边框，只出现在内容区和内边距
  • content-box 背景只会出现在内容区
• background-origin 设置背景图片的偏移量计算的原点
  • padding-box 默认值，background-position从内边距处开始计算
  • content-box 背景图片的偏移量从内容区处开始计算
  • border-box 背景图片的偏移量从边框处开始计算
• background-size 设置背景图片的大小
  • 第一个值表示宽度
  • 第二个值表示高度
  • 如果只写一个值，第二个值默认是auto
  • cover 图片比例不变，将元素铺满
  • contain 图片比例不变，将图片在元素中完整显示

17.6 设置背景图片滚动

• background-attachment 设置背景图片是否跟随元素移动
  • scroll 默认值 背景图片跟随元素移动
  • fixed 元素会固定在页面中，不会随元素移动

17.7 背景相关的简写属性

• background 背景相关的简写属性，所有背景相关的属性都可以通过该样式来设置，并且该样式没有顺序要求，也没有那个属性是必须写的
• 注意：
  • background-position/background-size，必须的格式
  • background-origin、background-clip，两个样式，origin要在clip的前边

17.8 关于雪碧图

• 图片属于网页中的外部资源，外部资源需要浏览器单独发送请求加载
• 浏览器加载外部资源时是按需加载的，用则加载，不用则不加载
• 将图片资源整合到一张图片中，可以一次性加载资源，解决背景切换的闪烁问题
• 使用background-position来定位背景图，达到切换背景图的效果
• 这个技术在网页中应用十分广泛，被称为CSS-Sprite，也称雪碧图
• 雪碧图的特点
  • 一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户体验
  • 减小图片总体积，提升加载速度

17.9 渐变

• 通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果

• 渐变是图片，需要通过background-image来设置

• linear-gradient() 线性渐变，颜色沿着一条直线发生变化

  • linear-gradient(red, yellow) 红色在开头，黄色在结尾，中间是过渡区域
  • 线性渐变的开头可以指定渐变的方向
    • to left
    • to right
    • to bottom
    • to top
    • xxxdeg deg表示度数
    • xxxturn turn表示圈
  • 渐变可以指定多个颜色，多个颜色默认平均分布，也可以手动指定渐变的分布情况

• repeating-linear-gradient() 可以平铺的线性渐变

• radial-gradient() 径向渐变（放射性的效果）

  • 默认情况下径向渐变圆心的形状是根据元素的形状来计算的
    • 正方形=>圆形
    • 长方形=>椭圆形
  • 可以手动指定径向渐变的大小
    • x y 指定x轴y轴数值
    • circle 指定为正圆
    • ellipse 指定为椭圆
  • 可以指定渐变的位置
    • radial-gradient(100px 100px at center center, red, yellow);

18.PS切图

• ps的psd文件是一个多图层结构
• 使用框选工具配合裁剪可以截下合适的图片
• 使用选择工具并自动选中图层，alt+隐藏可以隐藏其他图层，然后使用裁切导出图层

19.表格

19.1 table标签

• 使用table标签创建表格，在table中使用tr标签表示表格中的一行，在tr中使用td表示一个单元格
• 使用colspan属性横向合并单元格
• 使用rowspan属性纵向合并单元格
• 可以将一个表格分成三个部分
  • 头部 thead
    • th 表示头部的单元格
  • 主体 tbody
  • 底部 tfoot

19.2 表格样式

• 默认大小被内容撑开

• border-spacing 指定边框之间的距离

• border-collapse 设置边框的合并

• 通过使用伪类选择器选中奇数行或偶数行设置背景颜色，可以实现斑纹效果

• 如果表格中没有使用tbody而是直接使用tr，浏览器会自动创建tbody并将所有tr放入其中

  • tr不是table的子元素

• 默认情况下元素在td中垂直居中，可以通过vertical-align设置

• 使用 display: table-cell; 可以将元素设置为单元格td，利用单元格特性实现垂直居中

• .box1{
       300px;
      height: 300px;
      display: table-cell;
      vertical-align: middle;/* 子元素垂直方向居中 */
  }
  .box2{
       100px;
      height: 100px;
      margin: 0 auto;/* 水平方向居中 */
  }
  

20.表单

• 使用<form>标签来创建一个表单
• action 属性表示表单要提交的服务器的地址
• 数据要想提交给服务器必须要为元素指定一个name属性
• 选择框
  • 单选按钮必须设置name属性用来分组，必须设置value属性作为用户填写的值
  • 设置checked属性表示默认选中
  • 多选框同上
• 下拉列表使用<select>标签和<option>标签组成
  • 设置selected属性表示默认选中
  • <select>标签必须设置name属性用来分组，<option>标签必须设置value属性作为用户填写的值
• <input type="button">和<button type="button"></button>的区别
  • input是自结束标签，button是成对出现的，因此button可以编写更加复杂的结构，更加灵活
• autocomplete=“off” 在input标签中使用可以关闭自动补全，也可以在from标签中使用
• disabled 将表单设置禁用，数据不会提交
• readonly 将表单设置只读，数据会提交
• autofocus 设置表单项自动获取焦点

21.实战总结

• 通过边框来画一个三角形
  • 设置元素宽高为0，并设置边框 ?px solid transparent ，然后单独为一条边框设置颜色，把不需要的边框设置为none
• 过渡效果：transition: height 1s;
• 隐藏元素：将元素高度设置为0，overflow属性设置为hidden
• 溢出到padding中的内容不会被overflow: hidden;裁剪
• 隐藏text文本：利用text-indent属性可以对文本进行缩进，可以将文本移出浏览器
• 设置元素上的鼠标指针样式：cursor: pointer;，小手样式
• 视口固定元素位置：利用x轴布局等式，结合fixed百分比定位和margin，来讲元素固定到合适位置
• 设置网站的图标（在标题和收藏栏显示）：<link rel="icon" href="">
• 上线前必须进行打包，压缩文件大小，提升访问速度

22.过渡

• transition（过渡） 通过过渡可以指定一个属性发生变化时的切换方式，提升用户体验

• transition-property 指定要过渡的属性

  • 多个属性使用逗号隔开
  • 如果所有属性都需要过渡，则使用all关键字
  • 大部分属性都支持过渡效果（可以计算的值），过渡时必须从一个有效数值向另一个有效数值进行过渡

• transition-duration 指定过渡效果的持续时间

  • 时间单位：s 和 ms ，1s = 1000ms

• transition-timing-function 过渡的时序函数

  • ease 默认值，慢速开始，先加速，再减速
  • linear 匀速运动
  • ease-in 加速运动
  • ease-out 减速运动
  • ease-in-out 先加速，再减速
  • cubic-bezier(x1,y1,x2,y2) 通过贝塞尔曲线，来指定时序函数
  • steps(n, start/end) 分步执行过渡效果，第二个值表示步骤在时间开始还是结束时执行

• transition-delay 过渡效果的延迟，等待一段时间后执行过渡

23.动画

• animation 动画和过渡类似，都可以实现一些动态的效果
  • 不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果
• 设置动画效果，必须先设置一个关键帧
• @keyframes name{} 定义关键帧
• animation-name 指定要对当前元素生效的关键帧的名字
• animation-duration 动画的执行时间
• animation-delay 动画的延时
• animation-timing-function 时序函数
• animation-iteration-count 动画重复执行的次数
  • 可选值：n（次数）/infinite（无限重复）
• animation-direction 指定动画运行的方向
  • 默认值 normal 从 from 向 to 运行，每次都一样
  • reverse 从 to向 from 运行，每次都一样
  • alternate 从from 向 to 运行，重复执行动画时变化方向
  • alternate-reverse 从 to 向 from 运行，重复执行动画时变化方向
• animation-play-state 设置动画的执行状态
  • 默认值 running 动画执行
  • paused 动画暂停
• animation-fill-mode 动画的填充模式
  • 默认值 none 动画执行完毕回到元素原来位置
  • forwards 动画执行完毕元素会停止在动画结束的位置
  • backwards 动画延时等待时，元素就会处于开始位置
  • both 结合了 forwards 与 backwards 的特性

24.变形

• transform 用来设置元素的变形效果，变形不会影响页面的布局，不会脱离文档流
• 平移
  • translateX() 沿着x轴方向平移
  • translateY() 沿着y轴方向平移
  • translateZ() 沿着z轴方向平移
  • 在平移元素时，百分比是相对于自身进行计算的
• 一个元素只会有一个transform生效，其他会被覆盖
• perspective 设置当前网页的视距，人眼和网页之间的距离
  • 设置视距后，使用z轴平移会改变元素大小
  • 想要产生3D效果，必须指定视距
• 旋转
  • 通过旋转可以使元素沿着x、y或z旋转指定的角度
  • rotateX()
  • rotateY()
  • rotateZ()
• backface-visibility 设置是否显示元素的背面
• 缩放
  • scale() 双方向进行缩放
  • scaleX() 对x轴进行缩放
  • scaleY() 对y轴进行缩放
  • scaleZ() 对z轴进行缩放，必须设置3d效果，否则没有作用
  • 可以实现中心位置不变的缩放效果，用于相册、图片封面等
• transform-origin 设置变形的原点
  • 默认值 center

25.less语法

25.1 什么是less

• less是一门css的预处理语言

  • less是一个css增强版，通过less可以编写更少的代码实现更强大的样式

• css的缺点

  • 变量
    • css原生也支持变量的设置
    • --name: value; 设置变量
    • var(--name); 使用变量
    • 兼容性差
  • 计算函数
    • calc(300px*3); css原生支持数值计算
    • 兼容性差

• 使用less的好处

  • 在less中添加了许多的新特性：比如对变量的支持、对mixin的支持...

  • less的语法大体上和css语法一致，但是less中增添了许多对css的扩展

    • 所以浏览器无法直接执行less代码，要执行必须先将less转换为css，然后再由浏览器执行

25.2 less常用语法

• 支持样式嵌套

  //css
  body div{
      color: #bfa;
  }
  //less
  body{
      div{
          color: #bfa;
      }
  }
  /* 结构更加清晰，便于阅读 */
  

• 变量

  • 在变量中可以存储一个任意的值，并且可以在需要时，任意的修改变量中的值

  • 变量的语法

    @a: 100px;
    @b:box2;
    .box{
         @a;
    }
    //作为字符串变量使用时需要@{变量名}
    .@{b}{
         @a;
    }
    

  • 变量在使用的时候发生重名，则采用就近原则，使用最近的变量

• $取值

  • 在less语法中使用 $属性名 就可以引用该属性的属性值

• 使用&表示外层父元素

  • //css
    .box1:hover{
        color: red;
    }
    //less
    .box1{
        &:hover{
            color: red;
        }
    }
    

• :extend() 对括号里的选择器样式进行扩展

  • 使用选择器分组实现

  • //css
    .p1,.p2{
         100px;
    }
    .p2{
        color: red;
    }
    //less
    .p1{
         100px;
    }
    .p2:extend(p1){
        color: red;
    }
    

• 对指定选择器样式直接引用

  • 通过复制样式实现

  • //mixin 混合
    .p3{
        .p1();
    }
    

• 创建mixins 混合函数

  • 创建的mixins样式不会直接生效，而是用于被引用

  • 简单创建

    .p1(){
         100px;
        heght: 100px;
    }
    

  • 在混合函数中直接设置变量

    //可以指定默认值
    .test(@w,@h,@color:red){
         @w;
        height: @h;
        border: 1px solid @color;
    }
    
    //顺序传值
    div{
        .test(200px,300px);
    }
    //按名传值
    div{
        .test(@200px,@height:300px);
    }
    

• less提供的混合函数

  • less本身提供一些定义好的函数以供直接使用，如average()、darken()...

• 在less中所有数值都可以直接进行计算

  • 不需要使用calc()，直接进行加减乘除

  • .box1{
         100px + 100px;
    }
    

• 使用import可以引入其他less文件

  • 等价于将引入文件的所有代码复制到本文件
  • 可以将样式代码模块化，每个文件负责单独的方面

25.3 对less插件进行配置

• 查看官方文档，得到对less插件进行配置的方法
• 修改json配置文件，修改配置项
• 通过修改配置可以生成less文件和css文件的映射关系文件，在浏览器查看时，会直接显示代码在less文件的位置

26.flex弹性盒子布局

26.1 flex是什么

• flex（弹性盒、伸缩盒）
  • 是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局
  • flex可以使元素具有弹性，让元素可以跟随页面的大小改变而改变

26.2 弹性容器和弹性元素

• 要使用弹性盒，必须先将一个元素设置为弹性容器
  • 通过 display 来设置弹性容器
  • display: flex 设置为块级弹性容器
  • display: inline-flex 设置为行内弹性容器
• 弹性元素
  • 弹性容器的子元素是弹性元素（弹性）
  • 一个元素可以同时是弹性容器和弹性元素

26.3 弹性容器和弹性元素的属性

• 弹性容器

  • flex-direction 指定容器中弹性元素的排列方式
    • row 默认值，弹性元素在容器中水平排列（左向右）
    • row-reverse 弹性元素在容器中反向水平排列（右向左）
    • column 弹性元素纵向排列（自上向下）
    • column-reverse 弹性元素反向纵向排列（自下向上）
  • 主轴：弹性元素的排列方向称为主轴
  • 侧轴：与主轴垂直方向的称为侧轴
  • flex-wrap 设置弹性元素是否在弹性容器中自动换行
    • nowrap 默认值，元素不会自动换行
    • wrap 元素沿着侧轴方向自动换行
    • wrap-reverse 元素沿着侧轴反方向换行
  • flex-flow flex-direction和flex-wrap的简写属性
  • justify-content 如何分配主轴上的空白空间（主轴上的元素如何排列）
    • flex-start 元素沿着主轴起边排列
    • flex-end 元素沿着主轴终边排列
    • center 元素居中排列
    • space-around 空白分布到元素两侧
    • space-between 空白均匀分布到元素间
    • space-evenly 空白分布到元素的单侧
  • align-items 元素在侧轴上如何对齐，元素间的关系
    • stretch 默认值，将元素长度设置为相同的值
    • flex-start 元素不会拉伸，沿着侧轴起边对齐
    • flex-end 元素沿着侧轴终边对齐
    • center 居中对齐
    • baseline 基线对齐
  • align-content 侧轴空白空间的分布，与justify-content类似

• 弹性元素

  • flex-grow 指定弹性元素的伸展的系数
    • 当父元素有多余空间的时候，子元素如何伸展
    • 父元素的剩余空间，会按照比例进行分配
  • flex-shrink 指定弹性元素的收缩系数
    • 当父元素中的空间不足以容纳所有子元素时，如何对子元素进行收缩
    • 1 默认值，等比例收缩
    • 0 不收缩
  • align-self 用来覆盖当前弹性元素上的align-items
  • flex-basis 指定元素在主轴上的基础长度
    • auto 默认值，表示参考元素自身的高度或宽度
  • flex 可以设置弹性元素的三个样式
    • flex: 增长 缩减 基础
  • order 决定弹性元素的排列顺序

27.像素和移动端像素

27.1 像素的两种类型

• CSS像素：CSS代码中的像素
• 物理像素：显示器上的像素
• 关系：CSS像素和物理像素默认1:1显示，他们的比例取决于浏览器的设置，或系统设置

27.2 移动端像素

• 在不同屏幕，单位像素的大小是不同的，像素越小屏幕越清晰
• 智能手机的像素点远远小于计算机的像素点
• 默认情况下，移动端的网页都会将视口设置为980像素（css像素），以确保pc端网页在移动端正常访问
• 若网页的宽度超过了980，移动端的浏览器会自动对网页缩放以完整显示网页
• 大部分pc端网站都可以在移动端正常浏览，但一般不会有好的体验
  • 为了解决这个问题，大部分网站都会专门为移动端设计网页
• 默认情况下，移动端像素比就是 980/移动端宽度
  • 直接编写移动端代码，可能导致网页中内容非常小
  • 编写移动端页面时，必须确保有一个比较合理的像素比
  • 可以通过meta标签来设置视口大小，以此来改变像素比
  • 将像素比设置为最佳像素比的时候大小我们称其为完美视口
  • device-width表示设备的宽度（完美视口）
• 大多数移动端设计图的宽度都是375px的倍数

27.3 vw单位

• 由于不同设备视口和像素比不同，所以同样数量的CSS像素在不同设备下意义是不一样的
• 因此在移动端开发时，使用px布局不是一个好的选择
• vw 表示的是视口的宽度（viewport width）
  • 100vw = 一个视口的宽度
  • vw 永远相对于视口宽度进行计算
  • 使用vw和像素进行换算，使用vw来布局，可以保证设计图和实际效果的比例相同
• vw 适配方案
  • rem
    • 1rem = 1 html的字体大小
    • 网页中字体大小最小是12px（除0外），不能设置一个比12像素还小的字体
  • 将设计图上的px换算成vw，再将html的font-size设置为vw的单位大小，最后使用rem进行布局

28.响应式布局

28.1 什么是响应式布局

• 网页可以工具不同的设备或窗口大小呈现不同的效果
• 使用响应式布局，可以使一个网页使用于所有设备
• 响应布局的关键就是 媒体查询
• 通过媒体查询，可以为不同的设备，或不同的设备状态来分别设置样式

28.2 使用媒体查询

• 语法：@media 查询规则{}

  • 媒体类型：all（所有设备）、print（打印设备）、screen（带屏幕的设备）、speech（屏幕阅读器）
  • 可以使用逗号连接多个媒体类型，这样它们之间就是一个或的关系
  • 可以在媒体类型前添加一个only，表示只有
    • only的使用主要是为了兼容老版本浏览器

• 媒体特性

  • width 视口的宽度

  • height 视口的高度

  • min-width 视口的最小宽度（视口大于指定宽度时生效）

  • max-width 视口的最大宽度（视口小于指定宽度时生效）

  • 样式切换的分界点，我们称其为断电，也就是网页的样式会在这个点发生变化

    • 常用断电
    • 小于 768 超小屏幕 max-width=768px
    • 大于 768 小屏幕 min-width=768px
    • 大于 992 中型屏幕 min-width=992px
    • 大于 1200 大屏幕 min-width=1200px

  • // 表示当媒体设备是屏幕，并且视口宽度大于500px小于700px时的样式
    @media only screen and (min- 500px) and (max- 700px){
        body{
            background-color: #bfa;
        }
    }
    

28.3 响应式设计的网页

• 移动端优先
  • 优先对移动端进行布局
  • 再用媒体查询对其他情况进行布局
• 渐进增强

29.总结

• 在HTML5和CSS3的使用中的一些重点
  • 熟练灵活使用CSS选择器
  • 编写CSS代码时，注意各浏览器是否支持该属性
  • 编写HTML网页结构时，要注意针对搜索引擎的一些写法
  • 熟练使用position属性
  • 熟练使用flex弹性盒
  • 注意选择器的权重，防止样式的冲突