CSS知识概括

@TOC

CSS简介

CSS简介：

• 网页分成三个部分： ①结构(HTML) ②表现(CSS) ③行为(JavaScript)
• CSS：层叠样式表 ①网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式而最终我们能看到只是网页的最上边一层
• 总之一句话，CSS用来设置网页中元素的样式。

CSS三种引入样式

CSS三种引入样式：

• 行内样式（内联样式）： ①在标签内部通过style属性来设置元素的样式 ②使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须在每一个元素中都复制一遍并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便
  ③注意：开发时不要使用行内样式

<p style="color: red; font-size: 60px;">行内样式</p>

• 内部样式 ： ①将样式写道head中的style标签里，然后通过CSS的选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用。 ②内部样式表更加方便对样式进行复用 ③问题：我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用

<style>
   p{
      color: #ffcd22;
      font-size: 30px;
    }
</style>

• 外部样式： ①将css样式写到一个外部的css文件中（开发最佳），然后通过link标签来引入外部的CSS文件。 ②外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用使样式可以在不同页面之间进行复用。 ③将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，增加用户体验。

<link rel="stylesheet" href="style.css">

CSS语法

基本语法：

• CSS中的注释，注释中的内容会自动被浏览器所忽略。

 /* */

• CSS的基本语法： 选择器 声明块
• 选择器：通过选择器可以选中页面中的指定元素。比如 p 的作用就是选中页面中所有的p元素
• 声明块：通过声明块来指定要为元素设置的样式 ①声明块由一个一个的声明组成 ②声明是一个名值对结构 ③一个样式名对应一个样式值，名和值之间以:连接，以;结尾

常用选择器：

• 元素选择器： ①作用：根据标签名来选中指定的元素 ②语法：标签名{} ③例子：p{} h1{} div{}
• id选择器： ①作用：根据元素的id属性值选中一个元素 ②语法：#id属性值{} ③例子：#box{} #red{}
• 类选择器： ①作用：根据元素的class属性值选中一组元素 ②语法：.class属性值{}
• 通配选择器： ①作用：选中页面中的所有元素 ②语法: *{}

复合选择器：

• 交集选择器： ①作用：选中同时复合多个条件的元素 ②语法：选择器1选择器2选择器3选择器n{} ③注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头 ④举例：

div.red{
          font-size: 30px;
        }

<div class="red">我是div</div>

• 选择器分组（并集选择器）： ①作用：同时选择多个选择器对应的元素 ②语法：选择器1,选择器2,选择器3,选择器n{} ③举例：

#b1,.p1,h1,span,div.red{}

关系选择器：

• 子元素选择器： ①作用：选中指定父元素的指定子元素 ②语法：父元素 > 子元素

div.box > span{
            color: orange;
        }

• 后代元素选择器： ①作用：选中指定元素内的指定后代元素 ②语法：祖先 后代 ③举例：

div span{
         color: skyblue
         }

• 选择下一个兄弟： ①语法：前一个 + 下一个
• 选择下边所有的兄弟： ②语法：兄 ~ 弟
• 名词解释： ①父元素：直接包含子元素的元素叫做父元素 ②子元素：直接被父元素包含的元素是子元素 ③祖先元素：直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是它的祖先元素。 ④后代元素：直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后代元素。 ⑤兄弟元素：拥有相同父元素的元素是兄弟元素

属性选择器：

• [属性名] 选择含有指定属性的元素
• [属性名=属性值] 选择含有指定属性和属性值的元素
• [属性名^=属性值] 选择属性值以指定值开头的元素
• [属性名$=属性值] 选择属性值以指定值结尾的元素
• [属性名*=属性值] 选择属性值中含有某值的元素的元素

伪类选择器：

• 伪类（不存在的类，特殊的类）
• 伪类用来描述一个元素的特殊状态 ①比如：第一个子元素、被点击的元素、鼠标移入的元素...
• 伪类一般情况下都是使用:开头
• 以下这些伪类都是根据所有的子元素进行排序： ①:first-child 第一个子元素 ②:last-child 最后一个子元素 ③:nth-child() 选中第n个子元素 <1>特殊值： n 第n个 n的范围0到正无穷 2n 或 even 表示选中偶数位的元素 2n+1 或 odd 表示选中奇数位的元素 ④:nth-last-child()从后面数第n个

ul>li:first-child {
          color: red;
}
如果ul内li元素不在第一个，就不会被渲染

• 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序： ①:first-of-type ②:last-of-type ③:nth-of-type()
• :not() 否定伪类，将符合条件的元素从选择器中去除。
• p:only-of-type{}属于父元素的特定类型的唯一子元素的每个p元素,就是p元素在子元素中只能有一个。
• :empty{}指定里面是空的元素

a元素的伪类：

• :link {}用来表示没被访问的链接
• :visited {}用来表示访问过的链接 ，由于隐私的原因，所以visited这个只能修改链接的颜色。
• :hover {} 表示鼠标移入的状态（所有元素）
• :active {}表示鼠标点击（所有元素）
• 不能改变顺序，否则可能由于覆盖无法显示

伪元素选择器：

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

div::before{
            content: '『';
         }

        div::after{
            content: '』';
        }

样式的继承：

• 样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上。
• 继承是发生在祖先和后代之间的。
• 继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式。
• 注意： ①并不是所有的样式都会被继承 ②比如：背景相关的，布局相关等的这些样式都不会被继承。

选择器的权重：

• 样式的冲突：当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。
• 发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定
• 选择器的权重： ①内联样式 1,0,0,0 ②id选择器 0,1,0,0 ③类和伪类选择器 0,0,1,0 ④元素选择器 0,0,0,1 ⑤通配选择器 0,0,0,0 ⑥继承的样式 没有优先级
• 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）,选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器，如果优先级计算后相同，此时则优先使用靠下的样式
• 可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式， ①注意：在开发中这个玩意一定要慎用！

长度单位：

• 像素px： ①屏幕（显示器）实际上是由一个一个的小点点构成的 ②不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰 ③所以同样的200px在不同的设备下显示效果不一样
• 百分比%： ①也可以将属性值设置为相对于其父元素属性的百分比 ②设置百分比可以使子元素跟随父元素的改变而改变
  ③100% <1>标准盒模型：代表自身Width=父contentWidth*100% <2>IE盒模型：代表自身Width=(父contentWidth+paddingWidth+borderWidth)*100%
• em： ①em是相对于元素的字体大小来计算的 ②1em = 1font-size ③em会根据字体大小的改变而改变 ④有一个比较普遍的误解，认为 em 单位是相对于父元素的字体大小。 事实上，根据W3标准 ，它们是相对于使用em单位的元素的字体大小。父元素的字体大小可以影响 em 值，但这种情况的发生，纯粹是因为继承。
• rem： ①rem是相对于根元素(html元素)的字体大小来计算 ②rem会根据字体大小的改变而改变

颜色单位：

• 在CSS中可以直接使用颜色名来设置各种颜色，比如：red、orange、yellow、blue、green ...。但是在css中直接使用颜色名是非常的不方便
• RGB值： ①RGB通过三种颜色的不同浓度来调配出不同的颜色 ②R red，G green ，B blue ③每一种颜色的范围在 0 - 255 (0% - 100%) 之间 ④语法：RGB(红色,绿色,蓝色)
• RGBA： ①就是在rgb的基础上增加了一个a表示不透明度 ②需要四个值，前三个和rgb一样，第四个表示不透明度 ③1表示完全不透明 0表示完全透明 .5半透明
• 十六进制的RGB值： ①语法：#红色绿色蓝色 ②颜色浓度通过 00-ff ③如果颜色两位两位重复可以进行简写
  ④#aabbcc --> #abc
• HSL值： ①H 色相(0 - 360) ②S 饱和度，颜色的浓度 0% - 100% ③L 亮度，颜色的亮度 0% - 100%
• HSLA值： ①其他一样 ②A透明度

布局（layout）

文档流（normal flow）：

• 网页是一个多层的结构，一层摞着一层
• 通过CSS可以分别为每一层来设置样式
• 作为用户来讲只能看到最顶上一层
• 这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列。
• 对于我们来元素主要有两个状态： ①在文档流中 ②不在文档流中（脱离文档流）
• 元素在文档流中有什么特点： ①块元素： <1>块元素会在页面中独占一行(自上向下垂直排列) <2>默认宽度是父元素的全部（会把父元素撑满） <3>默认高度是被内容撑开（子元素） ②行内元素： <1>行内元素不会独占页面的一行，只占自身的大小 <2>行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列（书写习惯一致） <3>行内元素的默认宽度和高度都是被内容撑开
• 脱离了标准流的特点： ①元素都是不区分行、块的，体现在任何元素都可以设置宽、高了。 ②都有了收缩的 性质，就是不设置宽度，就自动缩减为里面内容的宽度。

盒模型、盒子模型、框模型（box model）:

• CSS将页面中的所有元素都设置为了一个矩形的盒子

• 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置

• 每一个盒子都由一下几个部分组成： ①内容区（content） ②内边距（padding） ③边框（border） ④外边距（margin）

• 内容区（content），元素中的所有的子元素和文本内容都在内容区中排列 ①内容区的大小由width 和 height两个属性来设置 <1>width 设置内容区的宽度（初始值为auto，且不是继承属性） 1、此外标准盒模型下width：auto代表自身contentWidth+paddingWidth+borderWidth+marginWidth=父contentWidth <2>height 设置内容区的高度

• 边框（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部 ①边框的大小会影响到整个盒子的大小 ②要设置边框，需要至少设置三个样式： <1>边框的宽度 border-width <2>边框的颜色 border-color <3>边框的样式 border-style ③border-width: 10px; 默认值，一般都是 3个像素 <1>border-width可以用来指定四个方向的边框的宽度 <2>值的情况： 1、四个值：上 右 下 左 2、三个值：上 左右 下 3、两个值：上下 左右 4、一个值：上下左右 <3>除了border-width还有一组 border-xxx-width，xxx可以是 top right bottom left用来单独指定某一个边的宽度。 ④border-color用来指定边框的颜色，同样可以分别指定四个边的边框，规则和border-width一样。 <1>border-color也可以省略不写，如果省略了则自动使用color的颜色值 ⑤border-style指定边框的样式 <1>solid 表示实线 <2>dotted 点状虚线 <3>dashed 虚线 <4>double 双线 <5>border-style的默认值是none 表示没有边框 ⑥border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求 <1>除了border以外还有四个 border-xxx 1、border-top 2、border-right 3、border-bottom 4、border-left

• 内边距（padding） ①内容区和边框之间的距离是内边距 ②一共有四个方向的内边距： <1>padding-top <2>padding-right <3>padding-bottom <4>padding-left ③内边距的设置会影响到盒子的大小 ④背景颜色会延伸到内边距上（padding不可设置颜色）
  ⑤padding 内边距的简写属性，可以同时指定四个方向的内边距，规则和border-width一样。

• 一共盒子的可见框的大小，由内容区,内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算。

• 外边距（margin） ①外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置 ②一共有四个方向的外边距： <1>margin-top：上外边距，设置一个正值，元素会向下移动 <2>margin-right：默认情况下设置margin-right不会产生任何效果 <3>margin-bottom：下外边距，设置一个正值，其下边的元素会向下移动 <4>margin-left：左外边距，设置一个正值，元素会向右移动 ③margin也可以设置负值，如果是负值则元素会向相反的方向移动 ④元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距会移动其他元素 ⑤margin的简写属性：margin 可以同时设置四个方向的外边距 ，用法和padding一样 ⑥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 = 其父元素内容区的宽度 （必须满足）
• 以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整。调整的情况： ①如果这七个值中没有为 auto 的情况，则浏览器会自动调整 margin-right值以使等式满足 ②这七个值中有三个值可设置为auto <1>width <2>margin-left <3>maring-right
  ③如果某个值为auto，则会自动调整为auto的那个值以使等式成立 ④如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0 ⑤如果将三个值都设置为auto，则外边距都是0，宽度最大 ⑥如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值，所以我们经常利用这个特点来使一个元素在其父元素中水平居中。（宽度最大）

垂直方向布局：

• 默认情况下父元素的高度被内容撑开
• 子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出，使用 overflow 属性来设置父元素如何处理溢出的子元素。可选值： ①visible默认值 子元素会从父元素中溢出，在父元素外部的位置显示 ②hidden 溢出内容将会被裁剪不会显示 ③scroll 生成两个滚动条，通过滚动条来查看完整的内容 ④auto 根据需要生成滚动条
• 垂直外边距的重叠（折叠） ①相邻的垂直方向外边距会发生重叠现象 ②兄弟元素 <1>兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值） <2>特殊情况： 1、如果相邻的外边距一正一负，则取两者的和 2、如果相邻的外边距都是负值，则取两者中绝对值较大的 <3>兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理 ③父子元素 <1>父子元素间相邻外边距，子元素的会传递给父元素（上外边距） <2>父子外边距的折叠会影响到页面的布局，必须要进行处理

行内元素的盒模型：

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

默认样式：

• 默认样式：通常情况，浏览器都会为元素设置一些默认样式，默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面） ①单独去除margin，padding等 ②去除所有 ③重置样式表：专门用来对浏览器的样式进行重置的 <1>reset.css 直接去除了浏览器的默认样式 <2>normalize.css 对默认样式进行了统一

*{
	magin: 0;
	padding: 0;
}

计算盒子尺寸的方式：

• 默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
• box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用） ①content-box (W3C标准盒模型)：默认值，宽度和高度用来设置内容区（contentWidth）的大小 ②border-box (IE盒模型，IE8及以下只支持IE盒模型)：宽度和高度用来设置整个盒子可见框(contentWidth+paddingWidth+borderWidth)的大小 ③记忆方法：content就是边界到内容，border就是边界到边框。

轮廓阴影和圆角：

• box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局 ①第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动 ②第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动 ③第三个值 阴影的模糊半径 ④第四个值 阴影的颜色
• outline 用来设置元素的轮廓线，用法和border一模一样 ①轮廓和边框不同的点，就是轮廓不会影响到可见框的大小
• border-radius: 用来设置圆角 圆角设置的圆的半径大小 ①圆角是设置圆的半径大小 ②border-radius 可以分别指定四个角的圆角 <1>四个值 左上 右上 右下 左下 <2>三个值 左上 右上/左下 右下 <3>两个值 左上/右下 右上/左下 <4>一个值 全部 ③椭圆设置：border-radius：20px / 40px ④将元素设置圆形：border-radius: 50%; ⑤单独设置border-方向(top或bottom)-方向(left或right)-radius <1>border-top-left-radius:
  <2>border-top-right-radius <3>border-bottom-left-radius:
  <4>border-bottom-right-radius:

三角：

• 因为我们一般设的border-width都很小，导致很多童鞋以为border是四个矩形，然而其实并不是，我们把content的宽度变小，border-width增大，并涂上不同的颜色,更改代码如下：

#test-border {
    width: 40px;
    height: 40px;
    margin: 100px auto;
    background: #fff;
    border: 30px solid;
    border-color: green orange;
}

• 那么把width和height设为0，就可以得到四个三角形：
• 注意，这里的border-width指的是外边界到中心点的垂直距离！即如上图所示。

浮动（float）

简介：

• 通过浮动可以使一个元素向其父元素的左侧或右侧移动
• 使用 float 属性来设置于元素的浮动 ①可选值： <1>none 默认值 ，元素不浮动 <2>left 元素向左浮动 <3>right 元素向右浮动
• 注意：元素设置浮动以后，水平布局的等式便不需要强制成立，元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动。

浮动的特点：

• 浮动元素会完全脱离文档流，不再占据文档流中的位置
• 设置浮动以后元素会向父元素的左侧或右侧移动，
• 浮动元素默认不会从父元素中移出
• 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
• 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
• 浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高

简单总结：

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

浮动详解：

• 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果。
• 元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化
• 脱离文档流的特点： ①块元素： <1>块元素不在独占页面的一行 <2>脱离文档流以后，块元素的宽度和高度默认都被内容撑开 ②行内元素： <1>行内元素脱离文档流以后会变成块元素，特点和块元素一样 ③脱离文档流以后，不需要再区分块和行内了

BFC(Block Formatting Context) 块级格式化环境:

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

高度塌陷的问题：

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

清除浮动产生的影响（外边距重叠）：

• 如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响。

• clear ①作用：清除浮动元素对当前元素所产生的影响 ②可选值： <1>left 清除左侧浮动元素对当前元素的影响 <2>right 清除右侧浮动元素对当前元素的影响 <3>both 清除两侧中最大影响的那侧 ③原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响。

• 综合来看：使用after伪类解决外边距重叠

.box1::after{
            content: '';
            display: block;
            clear: both;
        }

clearfix详解：

• clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可

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

定位（position）

定位（position）：

• 定位是一种更加高级的布局手段
• 通过定位可以将元素摆放到页面的任意位置
• 使用position属性来设置定位 ①可选值： <1>static 默认值，元素是静止的没有开启定位 <2>relative 开启元素的相对定位 <3>absolute 开启元素的绝对定位 <4>fixed 开启元素的固定定位 <5>sticky 开启元素的粘滞定位

相对定位：

• 当元素的position属性值设置为relative时则开启了元素的相对定位
• 相对定位的特点： ①元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化 ②相对定位是参照于元素在文档流中的位置进行定位的 ③相对定位会提升元素的层级 ④相对定位不会使元素脱离文档流 ⑤相对定位不会改变元素的性质块还是块，行内还是行内
• 偏移量（offset） ①当元素开启了定位以后，可以通过偏移量来设置元素的位置 <1>top定位元素和定位位置上边的距离 <2>bottom定位元素和定位位置下边的距离 <3>定位元素垂直方向的位置由top和bottom两个属性来控制，通常情况下我们只会使用其中一。top值越大，定位元素越向下移动，bottom值越大，定位元素越向上移动。 <4>left定位元素和定位位置的左侧距离 <5>right定位元素和定位位置的右侧距离 <6>定位元素水平方向的位置由left和right两个属性控制，通常情况下只会使用一个left越大元素越靠右，right越大元素越靠左。

绝对定位：

• 当元素的position属性值设置为absolute时，则开启了元素的绝对定位
• 绝对定位的特点： ①开启绝对定位后，如果不设置偏移量元素的位置不会发生变化 ②开启绝对定位后，元素会从文档流中脱离 ③绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开 ④绝对定位会使元素提升一个层级 ⑤绝对定位元素是相对于其包含块进行定位的

包含块( containing block )：

• 正常情况下：包含块就是离当前元素最近的祖先块元素

<div> 
	<div> </div> 
</div>
<div>
	<span>
		<em> hello </em>
	</span>
</div>

• 绝对定位的包含块:包含块就是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位则根元素就是它的包含块。

html（根元素、初始包含块）

固定定位：

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

粘滞定位:

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

水平布局：

• left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度
• 当我们开启了绝对定位后：水平方向的布局等式就需要添加left 和 right 两个值，此时规则和之前一样只是多添加了两个值： ①当发生过度约束： <1>如果9个值中没有 auto 则自动调整right值以使等式满足 <2>如果有auto，则自动调整auto的值以使等式满足 ②可设置auto的值：margin width left right ③因为left 和 right的值默认是auto，所以如果不指定left和right，则等式不满足时，会自动调整这两个值。
• 垂直方向布局的等式的也必须要满足：top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度

元素层级：

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

字体（font）

字体相关样式：

• color 用来设置字体颜色
• font-size 字体的大小 ①和font-size相关的单位： <1>em 相当于当前元素的一个font-size <2>rem 相对于根元素的一个font-size
• font-family 字体族（字体的格式） ①可选值： <1>serif 衬线字体 <2>sans-serif 非衬线字体 <3>monospace 等宽字体 ②指定字体的类别，浏览器会自动使用该类别下的字体 ③font-family 可以同时指定多个字体，多个字体间使用,隔开。字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推。

Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif

• font-face可以将服务器中的字体直接提供给用户去使用 ①问题： <1>加载速度 <2>版权 <3>字体格式

<style>
@font-face{
    /*指定字体的名称*/
	font-family: 'myfont';
    /*服务器中字体的路径，url可以多个，逗号隔开,format指定字体格式（一般浏览器会识别，可以不写）*/
    src: url('') format('');
}
</style>

• font-weight 字重 字体的加粗 ①可选值： <1>normal 默认值 不加粗 <2>bold 加粗 100-900 九个级别（没什么用）
• font-style 字体的风格 <1>normal 正常的 <2>italic 斜体
• 字体的简写属性： font可以设置字体相关的所有属性 ①语法：font: 字体大小/行高 字体族； ②行高可以省略不写，不写使用默认值

font:italic bold 22px/3 微软雅黑;

• 图片放大会失真，字体是矢量不会

图标字体：

• 在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常的不灵活，所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标。
• fontawesome 使用步骤： ①下载 fontawesome.com/ ②解压 ③将css和webfonts移动到项目中 ④将all.css引入到网页中 ⑤使用图标字体 <1>直接通过类名来使用图标字体

class="fas fa-bell"
class="fab fa-accessible-icon"

• 通过伪元素来设置图标字体 ①找到要设置图标的元素通过before或after选中 ②在content中设置字体的编码 ③设置字体的样式（有两种font-family）

fab
font-family: 'Font Awesome 5 Brands';

fas
font-family: 'Font Awesome 5 Free';
font-weight: 900; 

li::before{
    content: '\f1d8';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; 
    color: blue;
}

• 通过实体来使用图标字体 ①&#x图标的编码; ②例子：

<span class="fas">&#xf0f3;</span>`

使用阿里的字体库:

• www.iconfont.cn/home/index?…
• 步骤： ①选择图标添加购物 -> 添加到项目 -> 下载到本地 ②导入 ③三种图标表现形式

<style>
     p::before{
           content: '\e651';
           font-family: 'iconfont';
       }
</style>
<span class="iconfont icon-icon-test"></span>
<span class="iconfont">&#xe651;</span>
<p></p>

行高（line height）：

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

文本的样式：

• text-align 文本的水平对齐 ①可选值： <1>left 左侧对齐 <2>right 右对齐 <3>center 居中对齐 <4>justify 两端对齐
• vertical-align 设置元素垂直对齐的方式（图片在底部右一段距离，可以用vertical-align去除） ①可选值： <1>baseline 默认值 基线对齐 <2>top 顶部对齐 <3>bottom 底部对齐 <4>middle 居中对齐
• text-decoration 设置文本修饰 ①可选值： <1>none 什么都没有 <2>underline 下划线 <3>line-through 删除线 <4>overline 上划线
• white-space 设置网页如何处理空白 ①可选值： <1>normal 正常 <2>nowrap 不换行 <3>pre 保留空白

背景（background）

简介：

• background-color 设置背景颜色
• background-image 设置背景图片 ①可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色 ②如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满 ③如果背景的图片大于元素，将会一个部分背景无法完全显示 ④如果背景图片和元素一样大，则会直接正常显示
• background-repeat 用来设置背景的重复方式 ①可选值： <1>repeat 默认值 ， 背景会沿着x轴 y轴双方向重复 <2>repeat-x 沿着x轴方向重复 <3>repeat-y 沿着y轴方向重复 <4>no-repeat 背景图片不重复
• background-position 用来设置背景图片的位置 ①设置方式： <1>通过 top left right bottom center 几个表示方位的词来设置背景图片的位置 <2>使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center <3>通过偏移量来指定背景图片的位置：水平方向的偏移量 垂直方向变量
• background-clip设置背景的范围 ①可选值： <1>border-box 默认值，背景会出现在边框的下边 <2>padding-box 背景不会出现在边框，只出现在内容区和内边距 <3>content-box 背景只会出现在内容区
• background-origin 背景图片的偏移量计算的原点 ①padding-box 默认值，background-position从内边距处开始计算 ②content-box 背景图片的偏移量从内容区处计算 ③border-box 背景图片的变量从边框处开始计算
• background-size 设置背景图片的大小 ①第一个值表示宽度，第二个值表示高度，如果只写一个，则第二个值默认是 auto。 ②cover 图片的比例不变，将元素铺满 ③contain 图片比例不变，将图片在元素中完整显示
• background-attachment：背景图片是否跟随元素移动 ①可选值： <1>scroll 默认值 背景图片会跟随元素移动 <2>fixed 背景会固定在页面中，不会随元素移动
• backgound 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置，并且该样式没有顺序要求，也没有哪个属性是必须写的。
• 注意： ①background-size必须写在background-position的后边，并且使用/隔开，background-position/background-size ②background-origin background-clip 两个样式 ，orgin要在clip的前边

雪碧图：

• 图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，浏览器加载外部资源时是按需加载的，用则加载，不用不加载，a标签伪元素link首先加载，而hover等其它在指定状态触发时加载。
• 解决图片闪烁问题： ①可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示的图片 ②这样图片会同时加载到网页中 ③这样可以有效的避免出现闪烁的问题
• （这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们称为雪碧图）
• 雪碧图使用步骤： ①先确定要使用的图标 ②测量图标的大小 ③根据测量结果创建一个元素 ④将雪碧图设置为元素的背景图片 ⑤设置一个偏移量以显示正确的图片 注意正负
• 雪碧图特点： ①一次性将多个图片加载进页面，降低请求的次数，加快访问次数，提示用户的体验。

渐变：

• 通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果！！
• 渐变是图片，需要通过background-image来设置
• 线性渐变，颜色沿着一条直线发生变化
• linear-gradient() ①linear-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过渡区域
• 线性渐变的开头，我们可以指定一个渐变的方向 ①to left ②to right ③to bottom ④to top ⑤deg deg表示度数 ⑥turn 表示圈

background-image: linear-gradient(to right,yellow,blue);
background-img: linear-gradient(to top left,red,yellow，#bfa,orange);
background-image: linear-gradient(0.25turn,yellow,blue);

• 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况。

background-img: linear-gradient(red 50px,yellow 100px,green 120px);

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

background-image: repeating-linear-gradient(red 0px,yellow 50px);
//解释：red 从0 到yellow 从50px这个范围渐变，渐变重复

径向渐变：

• radial-gradient() 径向渐变(放射性的效果)
• 默认情况下径向渐变的形状根据元素的形状来计算的 ①正方形 --> 圆形 ②长方形 --> 椭圆形
• 我们也可以手动指定径向渐变的大小 ①circle 圆形 ②ellipse椭圆
• 也可以指定渐变的位置，语法：radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置) ①大小： <1>circle 圆形 <2>ellipse 椭圆 <3>closest-side 近边 <4>closest-corner 近角 <5>farthest-side 远边 <6>farthest-corner 远角 ②位置：top right left center bottom

background-image: radial-gradient(ellipse,red,yellow);

background-image: radial-gradient(100px 100px,red,yellow);

background-image: radial-gradient(100px 100px at 0 0,red,yellow);
background-image: radial-gradient(100px 100px at top center,red,yellow);
at 指定圆心的位置

表格样式：

• border-spacing:;指定边框之间的距离
• border-collapse: collapse;设置边框的合并
• 上面两个在table中设置
• 注意：

如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody
tr不是table的子元素
table>tr{}这种选择器错误 应该是tbody>tr{}

• 默认情况下元素在td中是垂直居中的，可以通过vertical-align设置，水平方向用text-align设置
• 我们设置垂直居中可以考虑把元素display设置为table-cell，这样子元素就可以使用vertical-align设置居中。元素变成特殊的行内，其它元素下一行显示，同类型在一行。

注意：

• 设置网站的图标（在标题栏和收藏栏），网站图片一般都存储在网站的根目录下， 名字一般都叫做favicon.ico。

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

动画（animation）

过渡transition：

• 通过过渡可以指定一个属性发生变化时的切换效果
• 通过过渡可以创建一些好的效果，提升用户体验
• transition-property：指定要执行过渡的属性 ①多个属性间 , 隔开 ②如果是全部属性，使用all关键字 ③大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
• transition-duration：指定过渡效果的持续时间 ①时间单位：s 和 ms 1s=1000ms

  transition-property: width,height;
  transition-duration: 1s,2s;

• transition-timing-function：过渡的时序函数 ① 指定过渡的执行的方式 ②可选值： <1>ease 默认值 慢速开始，先加速，再减速 <2>linear 匀速运动 <3>ease-in 加速运动 <4>ease-out 减速运动 <5>ease-in-out 先加速后减速 <6>cubic-bezier() 来指定时序函数： cubic-bezier.com <7>step()分布执行过渡效果：可以设置一个第二个值 1、end 在时间结束时执行过渡（默认值） 2、start 在时间开始时执行过渡
• transition-delay：过渡效果的延迟，等待一段时间后在执行
• transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟

动画：

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

  @keyframes test{
      /*from表示动画的开始位置 也可以使用0%表示*/
      from{
          margin-left: 0;
      }
      /*to动画的结束位置*/
      to{
          margin-left: 700px;
      }
  }

• animation-name要对当前元素生效的关键帧的名字
• animation-duration 效果时间
• animation-delay 延时
• animation-timing-function 时序函数
• animation-iteration-count 动画执行的次数 ①可选值： <1>次数 <2>infinite 无限执行
• animation-direction指定动画运行的方向 ①可选值： <1>normal 默认值 从 from 向 to 运行 每次都是这样 <2>reverse 从 to 向 from 运行 每次都是这样 <3>alternate 从 from 向 to 运行 重复执行动画时反向执行 <4>alternate-reverse 从 to 向 from 运行 重复执行动画时反向执行
• animation-play-state 设置动画的执行状态 ①可选值： <1>running 默认值 动画执行 <2>paused 动画暂停
• animation-fill-mode动画的填充模式 ①可选值： <1>none 默认值 动画执行完毕元素 回到原来位置 <2>forwards 动画完毕元素会停止在动画结束的位置 <3>backwards 动画延时等待时，元素就会处于开始位置 <4>both 结合了 forwards 和 backwards
• animation 简写属性 效果持续时间在前 延迟时间在后，其它无所谓

变形：

• 变形是指通过css来改变元素的形状或位置
• 变形不会影响到页面的布局
• transform 用来设置元素的变形效果：平移，旋转，缩放。

平移：

• translateX() 沿x轴方向平移
• translateY() 沿y轴方向平移
• translateZ() 沿z轴方向平移
• z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近。
• 平移元素 百分比是相对于自身计算的 多个用空格隔开 一个元素只能设置一个transform，否则会覆盖

transform: translateX(100%) translateY(100%);

• 元素居中

.box{
	 background-color: green;
     position: absolute;
     /*需要设置宽高居中*/
     width: 200px;
     height: 200px;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
	/*不用设置宽高，被内容撑开居中*/
	 left: 50%;
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
}

• z轴属于立体效果（近大远小），默认情况下网页是不支持透明，如果需要看见效果必须要设置网页的视距。（练习时，只有Google浏览器有效）

/*网页视距设置大概800px到1200px*/
html{
	perspective: 800px;
}

旋转:

• 通过旋转可以使元素沿着 x y 或 z 旋转指定的角度
• rotateX()
• rotateY()
• rotateZ()

transform: rotateX(45deg) 45度
transform: rotateX(.25turn) 0.25圈

• backface-visibility: 是否显示元素的背面 ①visible 显示 默认值 ②hidden 隐藏
• 多个用 空格隔开， 顺序不同，显示效果不同

缩放:

• 对元素进行缩放的函数
• scaleX() 水平方向缩放
• scaleY() 垂直方向缩放
• scaleZ() z轴方向缩放 需要设置3D效果才能看出
• scale() 双方向缩放
• opacity：为元素设置透明效果

 opacity：0.5;

• transform-style:设置3d变形效果

 tranform-style: preserve-3d;

• transform-origin：设置变形的原点

transform-origin ：20px 20px;

/*css支持原生变量 兼容性差ie不支持*/ 
html{
 --color: aqua;
 }
 [class*=box]{
 /*css计算函数*/ 
 width: calc(1000px/5);
 height: 100px;
 }
 .box1{
 background-color: var(--color);
 }
 .box2{
 color: var(--color);
 }

.box3{
border: 10px solid var(--color);
}

less

简介：

• less是一门css的预处理语言
• less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
• 在less中添加了许多的新特性：像对变量的支持、对mixin的支持... ...
• less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，
• 所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行

less语法：

• import用来将其他的less引入到当前的less，可以通过import来将其他的less引入到当前的less中。

@import "syntax2.less";

• 在less中所有的数值都可以直接进行运算。
• 在less中css的注释，内容会被解析到css文件中， less中的单行注释，注释中的内容不会被解析到css中。
• 变量：在变量中可以存储一个任意的值，并且我们可以在需要时，任意的修改变量中的值。 ①变量的语法： @变量名
• 作为类名，或者一部分值使用时必须以 @{变量名} 的形式使用
• 变量发生重名时，会优先使用比较近的变量
• 可以在变量声明前就使用变量

.@{c}{
    width: @a;
    background-image: url("@{c}/1.png");
}

• 子元素和后代元素可以这样写： ①& 就表示外层的父元素

.box1{
    .box2{
        color: red;
    }

    >.box3{
        color: red;

        &:hover{
            color: blue;
        }
    }

    //为box1设置一个hover
    //& 就表示外层的父元素
    &:hover{
        color: orange;
    }

    div &{
        width: 100px;
    }
}

• ：extend() 对当前选择器扩展指定选择器的样式（选择器分组）

.p1{
    width: 100px;
    height: 200px;
}

.p2:extend(.p1){
    color: red;
}

.p3{
	//直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制（mixin 混合）
    .p1();
}

• 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins

.p4(){
    width: 100px;
    height: 100px;
}

.p5{
    .p4;
}

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

.test(@w:100px,@h:200px,@bg-color:red){
    width: @w;
    height: @h;
    border: 1px solid @bg-color;
}

div{
    //调用混合函数，按顺序传递参数
    // .test(200px,300px,#bfa);
    .test(300px);
    // .test(@bg-color:red, @h:100px, @w:300px);
}

• darken函数

body:hover{
    background-color: darken(#bfa,50%);
}

弹性盒（flex）

flex（弹性盒、伸缩盒）:

• 是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局
• flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
• 弹性容器 ①要使用弹性容器，必须先将一个元素设置为弹性容器 ②我们通过display来设置弹性容器 ③display: flex; 设置块级弹性容器 ④ display: inline-flex; 设置为行内的弹性容器
• 弹性元素 ①弹性容器的子元素（直接子元素）使弹性元素 ②弹性元素可以是弹性容器
• 主轴 ①弹性元素的排列方向称为主轴
• 侧轴 ①与主轴垂直方向的称为侧轴

弹性容器的样式：

• flex-direction 指定容器中弹性元素的排列方式 ①可选值： <1>row 默认值，弹性元素在容器中水平排列（左向右） <2>row-reverse 弹性元素在容器中反向水平排列（右向左） <3>column 弹性元素纵向排列（自上而下） <4>column-reserve 弹性元素反向纵向排列 （自下而上）
• flex-wrap： 设置弹性元素是否在弹性容器中自动换行 ①可选值 <1>nowrap 默认值，元素不会自动换行 <2> wrap 元素沿着辅轴方向自动换行 <3>wrap-reverse 元素沿着主轴反方向换行
• flex-flow: wrap 和 direction 的简写属性

flex-flow: row wrap;

• justify-content：如何分配主轴上的空白空间（主轴上的元素如何排列） ①可选值 <1>flex-start 元素沿着主轴起边排列 <2>flex-end 元素沿着主轴终边排列 <3>center 元素居中排列 <4>space-around 空白分布到元素两侧 <5>space-evenly 空白分布到元素的单侧（每一边的距离都一样）（兼容性不好，慎用） <6>spance-between 空白均匀分布到元素间
• align-items： 元素在辅轴上如何对齐 ①元素间的关系 ②可选值 <1>stretch 默认值 ，将元素的长度设置为相同的值（同一行） <2>flex-start 元素不会拉伸，沿着辅轴起边对齐 <3>flex-end 沿着辅轴的终边对齐 <4>center 居中对齐 <5>baseline 基线对齐
• align-content：辅轴空白空间的分布 ①可选值： <1>center 上下空白元素中间 <2>flex-start 下面空白 <3>flex-end 上面空白 <4>space-around 环绕两边 <5>space-between 空白在中间 <6>space-evenly

/*让元素居中对齐*/
ul{
	display： flex；
	justify-content：center；
	align-items： center；
}

弹性元素的属性:

• flex-grow 指定弹性元素的伸展的系数 ①当父元素有多余空间时，子元素如何伸展 ②当元素有剩余空间，会按照比例进行分配
• flex-shrink 指定弹性元素的收缩系数 默认为1 收缩 ①当父元素中的空间不足以收纳所有的子元素时，如何对子元素进行收缩 ②越大越小 ③弹性元素的缩减系数 缩减系数的计算方式比较复杂 缩减多少是根据 缩减系数和元素大小来计算
• align-self：用来覆盖当前弹性元素上的align-items
• flex-basis：指定的是元素在主轴上的基础长度 ①如果主轴是 横向的 则 该值指定的就是元素的宽度 ②如果主轴是 纵向的 则 该值指定的就是元素的高度 <1>默认值是auto ， 表示参考元素自身的高度或宽度 <2> 如果传递一个具体的数值，则以该值为准
• flex 可以设置弹性元素所有的三个样式 ①flex: 增长 缩减 基础; <1>initial "flex: 0 1 auto;" <2>auto "flex: 1 1 auto;" <3>none "flex: 0 0 auto;"弹性元素没有弹性
• order： 决定元素的排列顺序

像素视口

像素:

• 屏幕由一个个小点构成，这些小点就是像素
• 分辨率：1920×1080 说的就是屏幕中小点的数量
• 在前端开发中像素要分成两种情况讨论：css像素和 物理像素
• 物理像素：屏幕的小点点就属于物理像素
• css像素，编写网页时，我们所用像素都是css像素 ①浏览器在显示网页时，需要将css像素转化为物理像素然后再呈现 ②一个css像素是最终由几个物理像素显示，由浏览器决定； ③默认情况下在pc端，一个css像素 = 一个物理像素

视口（viewport）：

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

手机像素:

• 在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰 ①电脑24寸 1920×1080 ②i6 4.7寸 750×1334 ③material.io/resources/d… 查看手机 ④智能手机的像素点 远远小于 计算机的像素点
• 问题：一个宽度为900px的网页在iPhone6中要如何显示？ ①默认情况下，移动端的网页都会将视口设置为980像素（css像素），以确保pc端网页可以在移动端正常访问，但是如果网页中的宽度超过了980，移动端的浏览器会自动对网页缩放以完整显示网页。
• 所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验，为了解决这个问题，大部分网站都会专门为移动端设计网页。

完美视口:

• 移动端的默认视口大小是980px（css像素），
• 默认情况下，移动端的像素比就是 视口大小/移动端宽度（980/750）
• 如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比不好，导致网页的内容小。
• 编写移动端页面时，必须要确保有一个比较合理的像素比： ①1css 像素 对应 2 个物理像素 ②2 css像素 对应 3 个物理像素
• 可以通过meta标签来设置视口大小

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

• 每一款移动设备设计时，都会有一个最佳的像素比，一般我们只需要将像素比设置为该值既可得到最佳像素比,一般我们只需要将像素比设置为该值即可得到一个最佳效果。
• 将像素比设置为最佳像素比的视口我们称其为完美视口。

/*设置视口大小 device-width表示设备的宽度（完美视口）*/
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

vw单位:

• 不同的设备完美视口的大小是不一样的 ①iphone6 -- 375 ②iphone6plus -- 414
• 由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，比如在iphone6中 375就是全屏，而到了plus中375就会缺一块。所以在移动端不能使用px来进行布局。
• vw表示的时视口的宽度（viewport width） ①100vw = 一个视口宽度 ②1vw = 1%视口宽度
• vh：1vh等于视口高度的1%。
• 和百分比不同，vw单位永远都是相对于视口宽度进行计算，百分比相对于父元素。

假设设计图 750px
vw作为单位 100vw
 
创建一个48px的元素  （100/750）*48 vw

• vw适配

html{
      /*网页中字体大小最小是12，除0外不能设置比12像素还小的字体，如果我们设置了一个小于12px的字体网页自动设置为12px
      font-size: 0.13333vw = 1px;
      0.13333vw = 1px
      5.33333 vw=  40px
      */
  }

响应式布局

简介：

• 网页可以根据不同的设备或窗口大小呈现出不同的效果，使用响应式布局，可以使一个网页使用于所有设备。
• 响应布局的关键就是媒体查询，通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式。
• 使用媒体查询 ①语法：@media 查询规则{}
• 媒体类型： ①all 所有设备 ②print 打印设备 ③screen 带屏幕的设备 ④speech 屏幕阅读器
• 可以使用 , 连接多个媒体类型，这样他们之间就是一个或的关系
• 可以在媒体类型前面添加一个only，表示只有。 only的使用主要是为了兼容一些老版本浏览器 （老版本无法识别会跳过）

@media screen,print{
      body{
          background-color: aqua;
      }
  }

媒体的特性:

• width 视口宽度
• height 视口高度
• min-width 视口最小宽度（视口大于指定宽度时生效）
• max-width 视口最大宽度 （视口小于指定宽度时生效）
• 样式切换的分界点，我们称之为断点，也就是网页的样式会在这个点时发生变化
• 一般常用的断点： ①小于768 超小屏幕 max-width=768px ②大于768 小屏幕 min-width=768px ③大于992 中型屏幕 min-width=992px ④小于1200 大屏幕 min-width=1200px

/* not 非  and  与   ， 或*/ 
    @media not screen and (min-width: 700px) and (max-width: 800px){
         body{
             background-color: aqua;
         }
    }    

• 响应设计网页规则： ①移动端优先（先编写小的） ②渐进增强