【前端】HTML+CSS尚硅谷视频笔记

HTML入门

实体

在网页中编写多个空格默认情况会被浏览器解析为一个空格
在HTML中有时不能直接书写特殊符号，若需要书写这些特殊符号需使用实体（转移字符）输入
实体的语法：

• & 实体的名字 ；
  • 空格： &nbsp；
  • 大于： &gt；
  • 小于： &lt；
  • 版权： &copy；

meta标签

meta标签为自结束标签，主要用于设置网页的一些元数据，元数据不是给用户看的，给浏览器看的。

• charset 指定网页的字符集
• name 指定的数据名称
• content 指定的数据内容

常见元数据：

• keywords 网页关键字

  < meta name="keywords" content=“HTML5,前端”>

• description 网页描述

  < meta name="description" content="搜索引擎的搜索结果" >

• title 网页的标题

• http-equiv="refresh" content="3,url=https://www.baidu.com"

语义化标签

在网页中 HTML专门用来负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是表现
在页面中独占一行的元素称为块元素(block element)，在网页中一般通过块元素进行宏观布局
在页面中不会独占一行的元素称为行内元素(inline elemt)，主要用于包裹文字
一般情况下会在块元素中放行内元素，而不会倒置
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正：比如，标签卸载根元素外，p元素中嵌套块元素，根元素出现了除了head和body以外的子元素

• 【块元素】标题标签 一共有六级标题，从h1至h6重要性依次递减，一般情况下一个页面中只有一个h1，一般常用h1-h3，h4-h6很少用
  • h1 > < /h1 > 1···6
  • &ghgroup > < /hgroup > 标题组
• 【块元素】p标签 表示页面中的一个段落
  • < p > < /p >
• 【块元素】blockquote表示一个长引用
  • < blockquote > < /blockquote >
• 【块元素】br 表示换行
  • < br > < /br >
• 【行内元素】em标签 语音语调的加重
  • < em > < /em >
• 【行内元素】strong 表示强调，重要内容
  • < strong > < /strong >
• 【行内元素】q 表示短引用
  • < q > < /q >

CSS入门

盒子模型（box model）

要摆放元素时，在html中该如何摆放。首先知道元素长什么样子（形状），元素多大（大小）

• 定义：css将页面中的所有元素都设置为了一个矩形盒子。
• 将元素设置为矩形的盒子后，对页面的布局就编程了将不同的盒子摆放到不同的位置。
• 每一个盒子都由以下几个部分组成：
  • 内容区(content)
    • 元素中的所有子元素和文本都在内容区中排列
      width 设置内容区的宽度
      height 设置内容区的高度
  • 边框(border)
    • 边框属于盒子的边缘，边框里属于盒子内部，边框外属于盒子外部,边框的大小会影响整个盒子的大小
    • 设置边框，需要至少设置三个样式：
      边框的宽度 border-width;
      默认值:3px 可以指定四个仿写上的边框宽度 写四个值（上 右 下 左，顺时针旋转);三个值(上 左右 下);两个值(上下 左右)
      除了border-width 还可以实用border-xxx-width分别指定某一个方向的边框宽度 xxx:top right bottom left
      border-top-width: 10px;
      边框的颜色 border-color;
      和border-width一样，当省略时使用默认前景色color
      边框的样式 border-style; 必须指定
      solid 表示实线
      dotted 点状虚线
      dashed 虚线
      double 双线
    • 简写属性，通过该属性可以同时设置边框的所有相关样式，并且没有顺序要求
      border: solid 10px orange;
      也有border-xxx
  • 内边距(padding，内容区和边框的距离)
    • 内容区和边框之间的距离是内边距，一共有四个方向的内边距：
      padding-top
      padding-right
      padding-bottom
      padding-left
    • 内边距的设置会影响到盒子的大小，背景颜色会颜色到内边距上
    • 一个盒子的可见框大小，由内容区，内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算
    • padding 内边距的简写属性，可以同时指定四个方向的内边距，规则和border-width一样
  • 外边距(margin，元素外部之间的距离)
    • 外边距不会影响盒子可见框的大小，但会影响盒子的位置
    • 一共有四个方向的外边距：
      margin-top;
      上外边距,设置一个正值，元素会向下移动;
      margin-right;
      默认情况下设置margin-right不会产生任何效果
      margin-bottom;
      下外边距，设置一个正值，其下边的元素会向下移动
      margin-left;
      左外边距，设置一个正值，元素会向右移动
    • 元素在页面中是按照自左向右的顺序排列的，所以默认情况下，如果我们设置的左和上边距则会移动元素自身，而设置下右边距会移动其他元素。
    • margin也可以设置负值，如果是负值元素会向相反方向移动
    • margin会影响到盒子实际在网页中占用空间的大小

盒子的布局

盒子的水平布局

元素水平方向的布局：
元素在其父元素中水平方向的位置由以下几个属性共同决定：
margin-left -> border-left -> padding-left -> width -> padding-right -> border-right -> margin-right

一个元素在其父元素中，水平布局必须要满足以下等式：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度（必须满足）
0px + 0px + 200px + 0 + 0 + 0 = 800

• 若计算相结果使等式不成立，则称为过渡约束，则等式会自动调整
  • 调整的情况：
    • 如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right的值以使等式成立
  • 这七个值中右三个值可以设置为auto
    • 如果某个值为auto，则会自动调整为auto的那个值以使等式成立 width的值是auto
      0 + 0 + 0 + auto + 0 + 0 + 0 = 800 auto = 800
    • 如果将一个宽度和一个外边距设置为auto，则宽度会调整为最大，设置为auto的外边距会自动为0
    • 如果将三个值都设置为auto，则外边距为0，宽度最大
    • 如果将两个外边距都设置为auto，宽度固定，则会将外边距设置为相同的值，所以我们经常使用这个特点使一个元素在其父元素中水平居中

盒子的垂直布局

默认情况下，父元素不设置高度时的高度被内容撑开
子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出
css使用overflow属性来设置父元素如何处置溢出的子元素（overflow-x；overflow-y）
可选值：

• visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示
• hidden 溢出内容将会被裁剪不显示
• scroll 生成两个滚动条，通过滚动跳来查看完整的内容
• auto 根据需要生成滚动条

垂直外边距的重叠

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

行内元素的盒子模型

行内元素不支持设置宽度和高度
行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
行内元素可以设置border，垂直方向的border不会影响页面的布局
行内元素可以设置margin，垂直方向的margin不会影响布局

想要为行内元素设置宽高，使用display属性
display的取值：

• inline 将元素设置为行内元素
• block 将元素设置为块元素
• inline-block 将元素设置为行内块元素，既可以设置宽度和高度，又不会独占一行
• table 将元素设置为一个表格
• none 元素不再页面中显示

隐藏元素除了diplay:none还有一个visibility
可选值：

• visible 默认值，元素在页面中正常显示
• hidden 元素在页面中隐藏不显示，但是依然占据页面控件

默认样式

通常情况下，浏览器都会为元素设置一些默认样式，默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面） reset.css

盒子的大小

默认情况下，盒子可见框的大小由内容区，内边距和边框共同决定

• box-sizing 用来设置盒子尺寸的计算方式(设置width和height的作用)
  • 可选值：
    • content-box 默认值，宽度和高度用来设置内容区的大小
    • border-box 宽度和高度用来设置整个盒子可见框的大小
      width 和 height 指的是 内容区 和 内边距 和 边框 的总大小

轮廓与圆角

• 轮廓
  outline 用来设置元素的轮廓线，用法和border一模一样，与边框不同的点，就是轮廓不会影响到可见框的大小
• 阴影
  box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局，默认阴影在元素正下方，所以看不到，需要设置偏移量，第一值：左侧偏移量——设置水平偏移量，正值向右移动 负值向左移动；第二个值：设置阴影的垂直位置 正值向下 ，负值向下；第三个值：阴影的模糊半径；第四值：阴影的颜色 例如: box-shadow:0px 0px 50px rgba(0,0,0,.3);
• 圆角
  border-radius 用来设置圆角， 圆角设置的圆的半径大小 可以分别指定四个角的圆角尺寸，左上、右下、右下、左下；三个值： 左上 右上/左下 右下； 两个值： 左上/右下 右上/左下 【border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius】
  border-radius: 50% 将矩形变为圆

浮动

通过浮动可以使一个元素向其父元素的左侧或右侧移动，在父元素范围内飘，不会超出父元素。
可选值：

• none 默认值，元素不浮动
• left 元素向左浮动
• right 元素向右浮动

注意，元素设置浮动以后，水平布局的等式便不需要强制成立，元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动
浮动的特点

1. 浮动元素会完全脱离文档流，不再占据文档流中的位置
2. 设置浮动以后，元素会向父元素的左侧或者右侧移动
3. 浮动元素默认不会从父元素中移出
4. 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素（水平方向）
5. 如果浮动元素的上面时一个没有移动的块元素，则浮动元素无法上移
6. 浮动元素不会超过它上班的浮动的兄弟元素，最多就时和他一样高（垂直方向）

浮动目前来讲，主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局

浮动的其他特点：

• 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果

• 元素设置浮动以后，将会从文档流中脱离，从文档流脱离后，元素的一些特点也会发生变化
  块元素：

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

  行内元素：

  • 行内元素脱离文档流以后会变成块元素，特点和块元素一样

  脱离文档流以后，不需要再区分块和行内元素了。

网页布局

自带标签：header main footer nav article aside
横向布局，只需要将块元素设置为float浮动即可，需注意内部元素超出父元素宽度，会被挤到下一行。

高度塌陷问题

当浮动布局中，父元素的高度默认时被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素会从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失。
父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱，所以高度塌陷时浮动布局中比较常见的一个问题，这个问题必须要进行处理

• BFC（Block Formatting Context）块级格式化环境

  • BFC是一个CSS中的一个隐含属性，可以为一个元素开启BFC：
    开启BFC该元素会变成一个独立的布局区域
  • 元素开启BFC后的特点：
    1. 开启BFC的元素不会被浮动元素所覆盖
    2. 开启BFC的元素子元素和父元素外边距不会重叠
    3. 开启BFC的元素可以包含浮动的子元素
  • 可以通过一些特殊方式来开启元素的BFC：
    1. 设置元素的浮动（不推荐）
    2. 将元素设置为行内块元素（不推荐）
    3. 将元素的overflow设置为一个非visible的值
       • 常用的方式，为元素设置 overflow：hidden 开启其BFC 以使其可以包含浮动元素
  • clear：如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清楚浮动元素对当前元素所产生的影响。
    • 作用：清除浮动元素对当前元素所产生的影响
    • 可选值：
      1. left 清除左侧浮动元素对当前元素的影响
      2. right 清楚右侧浮动元素对当前元素的影响
      3. both 清楚两侧中最大影响的那侧
    • 原理：设置清楚浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响
  • 高度塌陷最终解决方案：
    1. ::after伪元素，clear:both; diplay:block

• clearfix
  解决外边距折叠问题使用 after伪元素，并且将display设置为table,将其显示一个表格，这个样式可以同时解决高度塌陷和外边距重叠的问题，当你遇到这个问题时，直接使用这个类。

.clearfix::before,
.clearfix::after{
    content:'';
    display: table;
    clear: both;
}

定位

定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置。

• 可以使用position属性来设置定位
  可选值：
  • static 默认值，元素是精致的没有开启定位
  • relative 开启元素的相对定位
  • absolute 开启元素的绝对定位
  • fixed 开启元素的固定定位sticky 开启元素的粘滞定位

相对定位

当元素的position属性值设置为relative时则开启了元素的相对定位，相对定位是指相对于原来位置的新位置。

• 特点：
  1. 元素开启相对定位以后，如果不设置偏移量元素不会发生任何变化
     • 什么是偏移量？（offset）当元素开启了定位以后，可以通过偏移量来设置元素的位置
       1. top
          定位元素和定位位置上边距的距离（移动元素下方的元素）
       2. bottom
          定位元素和定位位置下边距的距离（移动元素本身）
          定位元素垂直方向的位置由top和bottom两个属性来控制，通常情况下我们指挥使用器中一个，top值越大，定位元素越向下移动；bottom值越大，定位元素越向上移动。
       3. left
          定位元素和定位位置的左侧距离
       4. right
          定位元素和定位位置右侧距离
          定位元素水平方向的位置由left和right两个属性控制，通常情况下只会使用一个，left越大元素约靠右；right越大元素越靠左。
  2. 相对定位是参照于元素再文档流中的位置进行定位的
  3. 相对定位会提升元素的层级
  4. 相对定位不会使元素脱离文档流
  5. 相对定位不会改变元素的性质，块元素还是块元素，行内元素还是行内元素。
• 总结

  • relative属性：脱离文档流，但保留占位符，其偏移位置是相对于本身在正常文档流中时的位置

  • 脱离文档流是说设置了relative属性之后，元素不在z-index:0;的正常文档流中，其z-index的值>0，但保留占位符，就是在正常文档流中位置保留着，后继元素不能占位，然后相对于本身正常位置进行偏移。

绝对定位

当元素的position属性值设置为absolute时，则开启了元素的绝对定位

• 绝对定位的特点：
  1. 开启绝对定位后，如果不设置偏移量元素的位置不会发生改变
  2. 开启绝对定位后，元素会从文档流中脱离
  3. 绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
  4. 绝对定位会使元素提升一个层级
  5. 绝对定位元素是相对于其包含块进行定位
     包含块（containing block）
     • 正常情况下：包含块就是离当前元素最近的祖先元素。
       <div><div></div></div>
     • 绝对定位的包含块：
       • 包含块就是离它最近的开启了定位的祖先元素。
         如果所有祖先元素都没有开启定位，则根元素就是它的包含块
       • html（块元素、初始包含块）

水平布局：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 包含块内容区的宽度

开启绝对定位：
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块内容区的宽度

• 总结
  • absolute：完全脱离文档流，不保留占位符，其元素定位是相对于其父级及以上，一直追溯至设置了position:relative或absolute或fixed属性的外层元素（包含块），如果其外层元素均未设置position属性，则定位是相对于HTML文档进行的绝对定位，并不是相对于body的定位。
  • 缺点：脱离文档流，会导致后续元素全部脱离文档流，可用行差。

固定定位（fixed)

将元素的position设置为fixed则开启了元素的固定定位，固定定位也是一种绝对定位，所以固定定位的大部分特点也和绝对定位一样。唯一不同的是，固定定位永远参照于浏览器的视口（左上角，固定不动）进行定位。固定定位的元素不会随网页的滚动条滚动

粘滞定位（sticky）

当元素的position属性设置为sticky时，则开启了元素的粘滞定位。
粘滞定位和相对定位的特点基本一直，不同的是粘滞定位可以再元素到达某个位置时，将其固定。
兼容性不强

字体

字体属于矢量图，不会失真
字体相关的样式
color:rgba/十六进制颜色
font-size:40px;

• em 相当于当前元素的一个font-size
• rem 相当于根元素的一个font-size

font-family 字体族(字体的格式)

• serif 衬线字体
• sans-serif 非衬线字体
• monospace 等宽字体

Microsoft Yahei,Heiti SC,tahoma,arial,Hirage

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

• 问题：
  1. 加载速度
  2. 版权

@font-face {
    <!--指定字体的名字-->
    font-family: i;
    <!--服务器中字体的路径-->
    src: url();
}

图标字体(icon font)

- 为什么要使用图标字体？
    1. 再网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常的不灵活
    2. 所以再使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体引入
    3. 这样我们就可以通过使用字体的形式来使用图标

- fontawesome 使用步骤
    1. 下载 https://fontawesome.com
    2. 解压
    3. 将css和webfonts移动到项目中
    4. 将all.css引入到网页中
    5. 使用图标字体
        - 直接通过类名来使用图标字体  
                class="fas icon-name"
                class="fab fa-accessible-icon"
- 通过为元素（after before）来设置图标字体
    1. 找到要设置图标的元素通过before或after选择
    2. 再content中设置字体的编码
    3. 设置字体的样式
        fab：font-familt:"Font Awesome 5 Brands";
        fas:font-family:"FontAwesome 5 Free";font-weight: 900
- 通过实体使用图标字体
    设置类名class="fas"
    &#x(图标字体编码);

- 阿里字体库
    和fontawesome使用方式类似

<i class="fas 图标name">

行高

行高是指文字占有的实际高度，可以通过line-height来设置行高
取值：

• 行高可以直接指定一个大小(px em)
• 也可以直接为行高设置一个正式
  如果时一个整数的话，行高将会是字体的指定的倍数
• 行高经常还用来设置文字的行间距
  行间距 = 行高 - 字体大小

字体框

字体框就是字体存在的各自，设置font-size实际上就是再设置字体框的高度

行高会在字体狂的上下平均分配

可以将行高设置为和高度一样的值，使单行文字在一个元素

字体的简写属性

font 可以设置字体相关的所有属性
语法:
- font: 字体大小/行高 字体族
行高 可以省略不写，如果不写使用默认值

font-sizeL 50px;
font-family: "Times New Roman",

字中 字体的加粗

可选值：
- normal 默认值 不加粗
- bold 加粗
- 100-900 九个级别(没什么用)

字体风格

font-style
可选值：
- normal 正常的
- italic 斜体

文本样式

文本的水平对齐

text-align
可选值：

• left 左侧对齐
• right 右侧对齐
• center 居中对齐
• justify 两端对齐

text-align: left

文本的垂直对齐

当文本中存在不同高度的字体时使用 vertical-align；
可选值：

• baseline 默认值 极限对齐
• top 顶部对齐
• bottom 底部对齐
• middle 居中对齐 将子元素的中线和x的中线对齐
• 数值

特殊情况：
当图片对齐时，使用的是基线对齐，但会出现图片底部出现缝隙，此时可以为图片设置垂直对齐，使用除基线对齐以外的对齐方式，即可去除该缝隙。

文本修饰

text-decoration（ie不兼容）
可选值：

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

white-space 设置网页如何处理空白
可选值：

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

text-overflow 设置文本溢出时的表现形式

1. 限制文本框宽度
2. 设置溢出隐藏(overflow: hidden)
3. 设置文本溢出表现形式(text-overflow: ellipsis)

背景

• background-color 设置背景颜色

• background-image

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

• background-repeat 用来设置背景的重复方式
  可选值：

  • repeat 默认值，背景会沿着x轴 y轴双方向重复
  • repeat-x 沿着x轴方向重复
  • repeat-y 沿着y轴方向重复
  • no-repeat 背景图片不重复

• background-position 用来设置背景图片的位置
  设置方式：

  • 通过 top left right bottom center 几个表示方位的此来设置背景图片位置
  • 使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center
  • 通过偏移量来指定背景图片的位置：
    水平方向的偏移量，垂直方向的偏移量

• background-clip 设置背景的范围
  可选值：

  • border-box
    默认值，背景会出现在边框的下边
  • padding-box
    背景不会出现在边框，只出现在内容区和内距
  • content-box
    背景只会出现在内容区

• background-origin
  背景图片的偏移量计算的远点
  可选值：

  • padding-box
    默认值，background-position从内边距处开始计算
  • content-box
    背景图片的偏移量从内容区开始计算
  • border-box
    背景图片的偏移量从边框处开始计算

• backgroun-size 设置背景图片的大小
  第一个值表示宽度，第二个值表示高度，如果只写第一个，则第二个值默认为auto
  可选值：

  • cover 图片比例不变，将元素铺满
  • contain 图片比例不变，将图片在元素中完整

• background-attachment
  设置背景图片是否跟随元素移动

  • 可选值：
    • scroll 默认值 背景图片会跟随元素移动
    • fixed 背景会固定在页面中，不会随元素移动

• background
  背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置

  1. background-size必须写在backgroun-position的后边，并且使用/隔开
     background-position/background-size
  2. background-origin background-clip 两个样式，origin要在clip前面

• 注意
  图片属于网页中的外部资源，外部资源都需要浏览去单独发送请求加载，浏览去加载外部资源时时按需加载的，用则加载，不用则不加载。像联系中link会首先加载，而hover和active会在指定状态触发时才会加载。
  解决图片闪烁问题：
  可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示相应的图片，这样图片会同时加载到网页中就可以有效避免出现闪烁的问题。
  这个技术在网页中应用十分广泛，被称为CSS-Sprite（雪碧图）。
  雪碧图使用步骤：

1. 先确定要使用的图标
2. 测量图标大小
3. 根据测量结果创建一个元素
4. 将雪碧图设置为元素的背景图片
5. 设置一个偏移量以显示正确的图片

雪碧图的特点：

1. 一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验
2. 只适用于小图标。只适用于背景图片

渐变

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果，注意，渐变是图片，需要通过background-image来设置

线性渐变，颜色沿着一条直线发生变化

linear-gradient()

示例：
linear-gradient(red,yellow)红色在开头，黄色在结尾，中间是过渡区域

• 线性渐变的开头，我们可以指定一个渐变的方向
  • to left
  • to right
  • to bottom
  • to top
  • xxxdeg deg表示度数
  • turn 表示圈
    -渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况
  • background-image: linear-gradient(red 50px, yellow, 200px)

repeating-linear-gradient() 可以平铺的线性渐变
background-image：repeating-linear-gradient(red 50px, yellow 100px)

radial-gradient() 径向渐变（放射性的效果）
默认情况下径向渐变的形状根据元素的形状来计算的
正方形 --> 圆形
长方形 --> 椭圆形

我们也可以手动指定径向渐变的大小

• circle
• ellipse
  • 也可以指定渐变的位置：
  • 语法：
    • radial-gradient(大小 at 位置， 颜色 位置， 颜色 位置， 颜色 位置)
    • ellipse 圆形
    • closest-side 椭圆
    • closest-corner 近边
    • farthest-side 远边
    • farthest-corner 远角

表格

在现实生活中，我们经常需要使用表格来表示一些格式化数据：课程表、人名单、成绩单...

同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格。

标签：

普通表格
< table > </ table > 表示整个表格
< tr ></ tr > 表示表格的一行
< td ></ td > 表示表格的单元格

长表格
可以将一个表格分成三个部分
头部 thead
主体 tbody
底部 tfoot
头部单元格 th

属性：

colspan 横向合并单元格

rowspan 横向合并单元格

width 表格宽度

当宽度较宽时，表格自动被内容撑开

border 表格边框

border-spacing 边框之间的距离

border-collapse collapse 设置边框合并

margin 同单元格

伪类奇数行，偶数行颜色有所区分

tr:nth-clid(daa)
注意
如果用子元素选择器进行选择时，tr不是table的子元素。
如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中。

height 单元格高度

默认情况下元素在td中时垂直居中的，可以通过vertical-align设置。
vertical-align：middle;

dipaly 中 table-cell 属性

当将父元素显示样式设置为table-cell时，可以通过vertical-align将子元素垂直居中，一种布局的思路。

<table border="1" width="50%" align="center">
    <!-- 在table中使用tr表示表格中的一行，有几个就有几行-->
    <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td rowspan="2">E1</td>
    </tr>
    <tr>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
        <td>D2</td>
    </tr>
    <tr>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
        <!--合并单元格-->
        <td colspan="2">d3</td>
    </tr>

表单

在现实生活中表单用于提交数据。
在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程服务器。
使用form标签来创建一个表单

标签

< form > </ form >
< input />

• input type值
  • submit 提交按钮
  • reset 重置按钮
  • button 普通按钮
  • color 颜色选择框

属性

action表单要提交的服务器的地址

注意，数据要提交到服务器中，必须要为元素指定一个name属性

autocomplete="off" 自动补全

readonly 将表单项设置为只读 数据会提交

disabled 将表单项设置为禁用 数据不会提交

autofocus 自动获取焦点

<form action="target.html">
    <!--文本框-->
    <input type="text" name="username">
    <!--密码框-->
    <input type="password" name="password">
    <!--单选按钮 需要有相同name属性，才能形成一组-->
    <!--选择框必须要指定一个value属性，value属性为发送给服务器的具体指-->
    <!--checked 可以将单选按钮设置为默认选中-->
    <input type="radio" name="hello">
    <input type="radio" name="hello">
    <!--多选框-->
    <input type="checkbox" name="test" value="1">
    <input type="checkbox" name="test" value="1">
    <input type="checkbox" name="test" value="1">
    <!--下拉列表-->
    <select name="haha">
        <option value="i"> 选项一 </option>
        <option selected value="ii">选项二</option>
        <option value="iii">选项三</option>
    </select>
    <!--提交按钮-->
    <input type="submit">

动画效果

过渡

通过过渡可以指定一个属性发生变化时的切换方式，通过过渡可以创建一些非常好的效果，提升用户的体验

属性

• transition-property:
  指定要执行过渡的属性，多个属性间使用逗号隔开，如果所有属性都需要过渡，则使用all关键字
  大部分属性都支持过渡效果，注意，过渡时必须是从一个有效值向另一个有效数值进行过渡
• transition-duration: 指定过渡效果的持续时间
  时间单位：s和ms 1s=1000ms
• transition-timing-function: 指定过渡执行的方式
  过渡的时序函数：
  • ease 默认值，慢速开始，先加速，再减速。
  • linear 匀速运动。
  • ease-in 加速运动
  • ease-out 减速运动
  • ease-in-out 先加速后减速
  • cubic-bezier() 贝塞尔曲线，指定时序函数
  • steps() 分步执行过渡效果 第二个值 end：分布后时间后执行(默认值)； start：在时间开始时执行过渡
• transition-delay: 过渡效果的延迟，等待一段时间后再执行过渡

动画

动画和过渡类似，都是可以实现一些动态效果，不同的是过渡需要再某个属性发生变化时才会触发，动画可以自动触发动态效果。
设置动画效果，必须要设置一个关键帧，关键帧设置了动画执行每一个步骤

属性

• keyframes 设置关键帧
  • from from表示动画开始位置，也可以使用0%
  • to 动画的结束位置，也可以使用100%
• animation 设置动画
  • animation-name 要对当前元素生效的关键帧的名字
  • animation-duration 动画的执行时间
  • animation-delay 动画的延时
  • animation-timing-function 动画的执行方式
  • animation-iteration-count 动画执行的次数
    • 可选值：
      次数
      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
      animation简写属性，除了执行时间必须在延迟时间之前，其他无要求。

变形(transform)

• transform 用来设置元素的变形效果，一个元素只能由一个transform生效
  通过CSS来改变元素的形状或位置，注意，变形不会影响到页面的布局，只影响自己

平移

• translateX() 沿着X轴方向平移
• translateY() 沿着y轴方向平移
• translateZ() 沿着z轴方向平移
  • 平移元素，百分比是相对与自身计算的
  • z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近
  • z轴平移属于立体效果(近大远小)，默认情况下网页是不支持透视，如果需要看见效果，必须要设置网页视距html{ perspective:800px; }

旋转

通过旋转可以使元素沿着x y 或z旋转指定的角度,配合translate 可以改变视觉效果

• rotateX() rotateY() rotateZ()
• backface-visibility: visibility/hidden

缩放

对元素进行缩放的函数

• scaleX() 对元素进行X缩放
• scaleY() 对元素进行Y缩放
• scale() 双方向缩放

变形的原点

transform-origin: 变形的原点

less时一门css的预处理语言

• less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
• css原生也支持变量的设置 {var() calc()}

flex（弹性盒、伸缩盒）

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

弹性容器

要使用弹性盒，必须先将一个元素设置为弹性容器，我们通过display来设置弹性容器。

• display：flex 设置为块级弹性容器
• display：inline-flex 设置为行内弹性容器

弹性容器的相关属性：

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

弹性元素

弹性容器的直接子元素是弹性元素（弹性项）。
弹性元素可以同时是弹性容器

弹性元素的相关属性：

• flex-grow 指定弹性元素的伸展的系数
  • 当父元素有多余的空间时，子元素如何伸展
  • 父元素的剩余空间，会按照比例进行分配
  • 默认值为0
• flex-shrink 指定弹性元素的收缩系数
  • 当父元素中的空间不足以容纳所有的子元素时，对子元素进行收缩
  • 所见系数的计算方式比较复杂，所见多少是根据缩减系数和元素大小来计算
• flex-basis: 元素的基础长度
• flex 可以设置弹性元素的三个样式
  • flex 增长 缩减 基础
    • initial = “flex： 0 1 auto”。
    • auto = “flex： 1 1 auto”。
    • none = “flex： 0 0 auto” 弹性元素没有弹性
• align-self: 用来覆盖当前弹性元素上的align-items

开发经验

布局相关

固定定位后布局问题

1. 开启固定定位后，视口元素布局需满足以下等式：

• left + margin-left + width + margin-right + right = 视口宽度
• 例如：auto + 0 + 26 + -639 + 50% = 视口宽度

2. 当元素大小确定后可以使用以下方式进行居中:

top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

不确定大小时可以使用以下方式进行居中：

top: 50%;
left: 50%;
transorm: translateX(-50%) translateY(-50%);

浮动布局后如何居中?

已知子元素宽高

// 子盒子
#div1{
    width:200px;
    height:200px;
    position: absolute;        //父元素需要相对定位
    top: 50%;
    left: 50%;
    margin-top:-100px ;   //二分之一的height，width
    margin-left: -100px;
    }

未知父元素高宽

//子盒子
  #div1{
    width: 200px;
    height: 200px;
    margin:auto;
    position: absolute;        //父元素需要相对定位
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
   }

响应式布局

网页可以根据不同的设备或窗口大小呈现出不同的效果，使用响应式布局，可以使一个网页适用于所有设备。

• 媒体查询：通过媒体查询就可以为不同的设备，或设备不同状态来分别设置样式
  • 语法 @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

网页相关

设置网站图标

网站图标一般存储在网站的根目录下，名字一般都叫做favicon.ico

<link rel="icon" href="./favicon.ico"

动画相关

时钟效果

当设置秒针旋转动画时，仅给元素添加旋转效果，会导致绕着元素中点旋转，达不到秒针旋转效果，因此将旋转动画添加到其父元素上，并将元素在父元素中垂直水平居中即可实现秒针效果。

理论相关

像素

屏幕是由一个一个发光的小点构成，这一个个的小店就是像素。
分辨率: 1920*1080 说的是屏幕中小点的数量。
在前端开发中像素要分成两种情况讨论：CSS像素和物理像素。

• 物理像素：上述所说的小点就属于物理像素
• CSS像素，编写网页时，我们所用的像素都是CSS像素
  • 浏览器在显示网页时需要将CSS像素转换为物理像素然后再呈现
  • 一个css像素最终由几个物理像素显示，由浏览器决定：默认情况下在PC端，一个CSS像素=一个物理像素

视口(viewport)

• 视口就是屏幕中用来显示网页的区域
• 可以通过查看视口的大小来观察CSS像素和物理像素的比值
• 默认情况下：
  • 视口宽度1920px(CSS像素) = 1920px(物理像素) 此时比值1：1
• 放大两倍的情况：
  • 视口宽度960px(CSS像素) = 1920px(物理像素) 此时，css像素和物理像素的比是1：2
• 我们可以通过改变视口的大小，来改变css像素和物理像素的比例

在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会月清晰。
需要注意的是，只能手机的像素点远远小于计算机的像素点。

• 默认情况下，移动端的网页都会将视口设置为980像素(css像素)以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，移动端的浏览器会自动对网页缩放以完整显示，像素比是 980/移动端宽度
• 基本大部分的PC端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验，为了解决这个问题大部分网站都会专门为移动端设计网页。
• 编写移动页面时，必须要确保有一个比较合理的像素比：1 css 对应 2个 物理像素 1 css 像素 对应 3个物理像素
• 可以通过meta标签设置视口大小

<meta name="viewport" content="width=100px">

• 每一款移动设备设计时，都会有一个最佳的像素比
• 将像素比设置为最佳像素比的视口大小，我们称其为完美视口，device-width 表示设备的宽度（完美视口）

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

• 结论：以后再写移动端的页面，就把上边这个代码写上。

• 移动端开发时，就不能再使用px来进行布局了

• vw 表示的是视口的宽度（viewport width）

  • 100vw = 一个视口的宽度
  • 1vw = 1%视口宽度
  • vw这个单位永远相当于视口宽度进行计算

• 设计图宽度：750px 1125px

• 考虑用整体font-size计算出rem作为单位：

  • 网页中字体大小最小时12px，不能设置一个比12像素还小的字体
  • 若设置了一个小于12px的字体则字体自动设置为12px

BootStrap 前端UI框架

Bootstrap 是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。
Bootstrap 是移动设备优先的。
为了确保适当的绘制和触屏缩放，需要在 之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

• .container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

• .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
• 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
• 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

栅格参数