llc - css要点浏览

01_introduce

HTML超文本标记语言

是一种用于创建网页的标准标记语言

• 实体

  • 在网页中编写的多个空格默认情况会自动被浏览器解析成一个空格
  • 在HTML中有些时候，我们不能直接书写一些特殊符号
    • 例如多个连续的空格，比如字母两侧的大于和小于号
  • 如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）
    • 语法：&实体的名字
    • &nbsp；空格
    • &gt；大于号
    • &lt；小于号
    • &copy；版权符号

• meta标签

  • 主要用于设置网页中的一些元数据，不是给用户看的 元数据指的是描述数据的数据，对数据以及信息资源的描述性信息

    • charset 指定网页的字符集

    • name 指定的数据的名字

    • content 指定的数据的内容

      • keywords 表示网站的关键字，可以同时指定多个关键字，之间使用，隔开

         <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,"/>
         <meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越">
      

      • description 用于指定网站的描述

        网站的描述会显示在搜索引擎的搜索的结果中

      <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
  

  • title 标签的内容会作为搜索结果的超链接上的文字显示

  • 页面重新定向到另外一个网站

    • <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
      

• 语义化标签

  • 在网页中HTML专门用来负责网页的结构
    • 所以在使用html标签时，应该关注标签的语义，而不是他的样式
  • 标题标签
    • 在h1~h6一共有六级标题
    • 重要性递减
    • 在网页中h1的重要性仅次于title标签，一般情况下一个页面只会有一个h1
    • 一般情况下标题标签指挥使用到13,46很少用
    • 标题标签都是块元素
  • 页面中独占一行的元素称为块元素
    • hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
  • p 标签标示页面中的一个段落 也是一各块元素
  • em标签用于标示语音语调的一个加重
    • 在页面中不会独占一行的元素成为行内元素
  • strong 表示强调；重要内容
  • blockquote 表示一个长引用
  • q表示一个短引用
  • br表示换行

• 块元素

  • 在网页中一般通过块元素来对页面进行布局
  • 行内元素主要用来包裹文字
  • 一般情况下会在块元素中放行内，而不会在行内里面放块元素
  • 块元素中基本什么都能放
  • p元素中不能放任何的块元素

• 浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正

  • 比如：
    • 标签写在了根元素的外部
    • p元素中嵌套了块元素
    • 根元素中出现了head和body以外的子元素

• 布局标签

  • header 表示网页的头部
  • main 表示网页的主体部分 一个页面中只会有一个main
  • footer 表示网页的底部
  • nav 表示网页中的导航
  • aside 和主体相关的其他内容（侧边栏）
  • article 表示一个独立的文章
  • section 表示一个独立的区块 上面的所有标签都不能表示时使用section
  • div 没有语义，就用来表示一个区块，目前来说div还是我们主要布局元素
  • span 行内元素 没有任何的语义，一般用来在网页中选中文字

• 列表

  • list 在html中也可以创建列表，html列表分三种
    • 有序 ol > li
    • 无序 ul > li
    • 定义 dl >dt & dd 定义内容和对内容的解释说明
  • 列表之间可以相互嵌套

• 超链接

  • 可以让我们从一个页面跳转到其他页面 或者是当前页面的其他位置

  • 使用a标签来定义超链接

    • 属性
      • href 指定跳转的目标路径
      • 值可以是一个外部网站的地址
      • 也可以是一个内部页面的地址

  • 超链接也是一个行内元素，在a标签中可以嵌套除他以外的任何元素

  • 超链接中 target属性，指定超链接打开的位置

    • _self默认值 在页面中打开
    • _blank 在一个新页面中打开超链接

  • 在开发中可以将#作为超链接的路径展位符使用

  • 可以使用javascript:;作为href的属性，此时点击这个超链接什么都不会发生

  • 可以直接将超链接的href属性设置为# 这样点击超链接以后，页面不会发生跳转，而是转到当前页面的顶部的位置

    可以跳转到页面的指定位置，只需将href属性设置#目标元素的id属性值

    id属性（唯一不重复的）

    		- 每一个标签都可以添加一个id属性
    		- id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
    

• img标签

  • 自结束标签 属于替换元素 （块和行内元素之间，有两个元素的特点）

  • 图片标签用于向当前页面引入一个外部图片

  • 属性

    • src属性指定的是外部图片的路径（路径规则和超链接是一样的）
    • alt属性是图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示
      • 搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
    • width 图片的宽度 --单位是像素
    • height 图片的高度
      • 高度和宽度如果只修改了一个，则另一个会等比例缩放

  • 一般情况下载pc端，不建议修改图片的大小，需要多大的图片就裁多大

    ​ 但是在移动端，经常要对图片进行缩放

  • 图片的格式

    • jpeg（jpg）
      • 支持的颜色比较丰富，不支持透明效果，不支持动图
      • 一般用来显示照片
    • gif
      • 支持的颜色比较少，支持简单透明，支持动图
      • 颜色单一的图片，动图
    • png
      • 支持的颜色丰富，支持复杂透明，不支持动图
      • 颜色丰富，复杂透明图片（专为网页而生）
    • webp
      • 这种格式是谷歌新推出的专门用来表示网页中图片的一种格式
      • 它具备其他图片格式的所有优点，而且文件还特别的小
      • 缺点：兼容性不好
    • base64
      • 将图片使用base64编码，可以将图片转换为字符，通过字符的形式来引入图片
      • 一般都是需要和网页一起加载的图片才会使用base64
    • 效果一样，用小的
    • 效果不一样，用效果好的

• 内联框架

  • 用于向当前页面中引入一个其他页面 标签是 iframe
    • src 指定要引入的网页的路径
    • frameborder 指定内联框架的边框

• audio 标签

  • audio标签用来向页面中引入一个外部的音频文件的

    • 音视频文件引入时，默认情况下不允许用户自己控制播放停止

  • 属性

    • control 是否允许用户控制播放

    • autoplay 音频文件是否自动播放

      • 如果设置了autoplay 则音乐在打开页面时 会自动播放 但是目前来讲 大部分浏览器都不会自动对音乐进行播放

    • loop 音乐是否循环播放

    • <audio src="./source/audio.mp3" controls autoplay loop></audio>
      

  • 除了通过src来指定外部文件的路径以外，还可以通过source来制定文件的路径

    •     <audio controls>
              <!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ -->
              <source src="./source/audio.mp3">
              <source src="./source/audio.ogg">
              <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
          </audio>
      

  • 使用video也可以向页面中引入一个视频

    • 使用方式和audio基本一样

    • <video controls>
           <source src="./source/flower.webm">
           <source src="./source/flower.mp4">
           <embed src="./source/flower.mp4" type="video/mp4">
       </video>
         
       <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true"
           width="500" height="300"></iframe>
      

  • 使用iframe可以引入一个外部视频 直接复制地址就可以

• 注释

  • HTML中的注释内容会被浏览器所忽略，不会在网页中直接显示

    但是可以在源码中直接查看注释，注释用来对代码进行解释说明的

    开发中一定要养成良好的编写注释的习惯，注释要求简单明了

  • 还可以将一些不希望显示的内容隐藏

  • 不能嵌套

• 属性

  • 在标签中（开始标签或者自结束标签）还可以设置属性
  • 是一个名值对
  • 属性用来设置标签中的内容如何显示
  • 属性和标签名或者其他属性应该使用空格隔开
  • 属性不能瞎写，应该根据文档中的规定来编写
    • 有些属性有属性值，有些没有，如果有属性值，应该用引号引起来

• meta标签

  • 可以通过meta标签来设置网页的字符集，避免乱码问题

• doctype

  • 文档声明用来告诉浏览器当前网页的版本
  • HTML5的文档声明

• 进制

  • 十进制（日常使用）

    • 特点：满十进一
    • 计数：0 1 2 3 4 5 6 ... 19 20
    • 单位数字：10个

  • 二进制（计算机底层的进制）

    • 特点：满二进一
    • 计数：0 1 10 11 100 101 110 111
    • 单位数字：2个 （0-1）
    • 扩展
      • 所有数据在计算机底层都会以二进制形式保存
      • 可以将内从想象成为一个有多个格子组成的容器，每一个小格子中可以储存一个1或者一个0
      • 每一个小格子在内存中被称为1位（bit）
      • 8bit = 1byte(字节)

    ​ 1024byte = 1kb(千字节)

    ​ 1024kb = 1mb(兆字节)

    ​ 1024mb = 1gb(吉字节)

    ​ 1024gb = 1tb(特字节)

    ​ 1024tp = 1pb

  • 八进制（很少用）

    • 特点：满8进1
    • 计数：0 1 2 3 4 5 6 ... 17 20
    • 单位数字：8个（0-7）

  • 十六进制（一般显示一个二进制数字时，都会转换为十六进制）

    • 特点满16进1

    • 计数：0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 ... 1a 1b 1c 1d 1e 1f 20 ..

    • 单位数字：16个

  • 字符编码

    • 李立超 -> 110000110110 （编码）

      110000110110 -> 李立超 （解码）

    • 所有的数据在计算机中储存时都是以二进制形式储存的，文字也不例外

      所以一段文字在储存到内存中，都需要转换成二进制编码

      当我们读取这段文字时，计算机会将编码转换成字符，供我们阅读

    • 编码

      • 将文字转换为二进制码的过程称为编码

    • 解码

• 将二进制码转换为字符的过程称为解码

• 字符集（charset）

  • 编码和解码所采用的规则称为字符集

• 乱码问题

  • 如果编码和解码所采用的字符集不同就会出现乱码问题

• 常见的字符集

  - ASCII
  - ASO88591
  - GB2312
  - GBK
  

  • UTF-8，在开发时我们使用的字符集都是UTF-8

• html根标签

  • 网页中所有的内容都要写在根元素里面

• head

  • head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或者搜索引擎来解析网页
  • meta标签用来设置网页的元数据，这里用meta用来设置网页的字符集，避免乱码问题
  • title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title的内容来判断网页的主要内容
  • body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里

• 相对路径

  • 当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径
    • 相对路径都会使用.开头 或者..开头
    • ./可以省略不写，如果不写./或者../则就相当于写了./
    • ./表示当前文件所在的目录

02_css

• 网页分成三个部分

  • 结构（HTML）
  • 表现（CSS）
  • 行为（JavaScript）

• css 层叠样式表

  • 网页实际是一个多层结构，通过CSS可以分别为网页的每一个层来设置样式而最终我们能看到的只是网页的最上边一层
  • 总之，CSS用来设置网页中元素的样式

• 使用CSS来修改元素的样式

  • 第一种方式（内联样式，行内样式）

    • 在标签内部通过style属性来设置元素的样式

    • 问题

      • 使用内联样式，样式只能对一个标签生效

        如果希望影响到多个元素必须在每一个元素中复制一遍

        并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便

      • 注意：开发时绝对不要使用内联样式

  • 第二种（内部样式表）

    • 将样式编写到head中的style标签里

      然后通过CSS的选择器来选中元素并为其设置各种样式

      可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用

    • 内部样式表更加方便对样式进行复用

    • 问题

      我们的内部样式表只能对一个网页起作用

      ​ 它里面的样式不能跨页面进行复用

  • 第三种（外部样式表）最佳实践

    • 可以将CSS样式编写到一个外部的CSS文件中

      之后通过link标签来引入外部的CSS文件

    • 外部样式表需要通过link标签进行引入

      意味着只要想使用这些样式的网页都可以对其进行引用

      使样式可以在不同的页面之间进行复用

    • 将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制

      从而加快网页的加载速度，提高用户的体验

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

  • 选择器 声明块

  • 选择器，可以通过选择器选中页面中的指定元素

    比如 p 的作用就是选中页面中所有的 p 元素

  • 声明块，通过声明块来指定要为元素设置的样式

    ​ 声明块由一个一个的声明组成

    ​ 声明是一个名值对结构

    ​ 一个样式名对应一个样式值，名和值之间以：连接，以；结尾

• 常用选择器

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

• 复合选择器

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

• 关系选择器

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

• 元素关系

  • 父元素
    • 直接包含子元素的元素叫做父元素
  • 子元素
    • 直接被父元素包含的元素是子元素
  • 祖先元素
    • 直接或间接包含后代元素的元素叫做祖先元素
    • 一个元素的父元素也是它的祖先元素
  • 后代元素
    • 直接或间接被祖先元素包含的元素叫做后代元素
    • 子元素也是后代元素
  • 兄弟元素
    • 拥有相同父元素的元素是兄弟元素

• 属性选择器

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

• 伪类（不存在的类，特殊的类）

  • 伪类用来描述一个元素的特殊状态

    • 比如第一个子元素，被点击的元素，鼠标移入的元素……

  • 伪类一般情况下都是：开头

    • :first-chlid 第一个子元素

    • :last-child 最后一个子元素

    • :nth-child() 选中第n个子元素

      • 特殊值： n 第n 个n的范围0 到正无穷

        ​ 2n 或 even 表示选中偶数位的元素

        ​ 2n+1 或 odd 表示选中奇数位的元素

        • 以上这些伪类都是根据所有的子元素进行排序

    • :first-of-type

    • :last-of-type

    • :nth-of-type()

      • 将符合条件的元素从选择器中去除

• :link 用来表示没访问过的链接（正常的链接）

• :visited 用来表示访问过的链接

  • 由于隐私原因，所以visited这个伪类只能修改链接的颜色

• :hover 用来表示鼠标移入状态

• :active 用来表示鼠标点击

• 伪元素，表示页面中的一些特殊的并不真实的存在的元素（特殊的位置）

  ​ 伪元素使用 :: 开头

  ::first-letter 表示第一个字母

  ::first-line 表示第一行

  ::selection 表示选中的内容

  ::before 元素的开始

  ::after 元素的最后

  • before 和 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，则此时该样式会获取到最高的优先级，甚至超过内联样式，
    • 注意：在开发中这个玩意一定要慎用！

• 长度单位：

  • 像素
    • 屏幕显示器实际上是由一个一个的小点点构成的
    • 不同的屏幕像素大小是不同的，像素越小的屏幕显示的效果越清晰
    • 所以同样的200px在不同的设备下显示效果肯定不一样
  • 百分比
    • 也可以将属性值设置为其父元素属性的百分比
    • 设置百分比可以将子元素跟随父元素的改变而改变
  • em
    • em是相对于元素的字体大小计算的
    • 1em = 1font-size
    • em会根据字体大小的改变而改变
  • rem
    • rem是相对于根元素的字体大小来计算的

• 颜色单位：

  • 在CSS中可以直接使用颜色名来设置各种颜色
    • 比如：red，orange，yellow，…………
    • 但是在css中直接使用颜色名是非常的不方便
  • RGB值
    • RGB通过三种颜色的不同浓度来调配出不同的颜色
    • R red，G green，B blue
    • 每一种颜色的范围在 0 -255（0% - 100%）之间
    • 语法：RGB（红色，绿色，蓝色）
  • RGBA
    • 就是在rgb的基础上增加了一个a表示不透明度
    • 需要四个值，前三个和rgb一样，第四个表示透明度
  • HSL值 HSLA值

    • H 色相（0 - 360）

    • S 饱和度，颜色的浓度 0% - 100%

    • L 亮度，颜色的亮度 0% - 100%

03_layout

• 文档流

  • 网页是一个多层的结构，一层落着一层
  • 通过CSS可以分别为每一层来设置样式
  • 作为用户来讲只能看到最顶上一层
  • 这些层中，最底下的一层称为文档流，文档流是网页的基础
    • 我们所创建的元素默认都是在文档流中进行排列
  • 对于我们来说元素主要有两个状态

    • 在文档流中

    • 不在文档流中（脱离文档流）

• 元素在文档流中有什么特点

  • 块元素
    • 块元素在页面中独占一行（自上向下）
    • 默认宽度是父元素的全部（会将父元素撑满）
    • 默认高度是被内容撑开（子元素）
  • 行内元素

    • 行内元素不会独占页面一行，只占自身的大小

    • 行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素

      • 则元素会换到第二行继续自左向右排列（书写习惯一致）

    • 行内元素的默认高度和宽度都是被内容撑开的

• 盒模型

  • 内容区 content

    • 内容区所有的子元素和文本内容都在内容区中排列
    • 大小由width和height两个属性来设置

  • 边框 border

    • 边框属于盒子边缘，边框里边属于盒子内部，除了边框都是盒子的外部，边框的大小会影响到整个盒子的大小

• 盒模型，盒子模型，框模型

  • CSS将页面中所有的元素都设置为了一个矩形的盒子
  • 将元素设置为矩形的盒子后，对页面的布局就将变成不同的盒子摆放到不同的位置
  • 每一个盒子都由一下几个部分组成

    • 内容区

    • 内边距 padding

    • 边框 border

    • 外边距 margin

• 一共盒子的可见框大小，由内容区 内边距 和边框共同决定

• 所以在计算盒子大小时，需要将这三个区域加到一起计算

• 外边距 margin

  • 不会影响盒子可见框的大小

  • 但是外边距会影响盒子的位置

  • 会影响到盒子实际占用空间

• 元素的水平方向的布局

  • 等式必须满足，如果相加使等式不成立 则称为过度约束，等式会自动调整

• 垂直方向的布局

  • 子元素是在父元素的内容区排列的
    • 如果子元素的大小超过了父元素，则子元素会从父元素中溢出
    • 使用overflow来设置父元素如何处理溢出的子元素

      • visible 默认值 子元素会从父元素溢出，在父元素外部的位置显示

      • hidden 溢出内容将会被剪裁不显示

      • scroll 生成两个滚动条，通过滚动条来查看完整的内容

      • auto 根据需要生成滚动条

• 垂直外边距的重叠（折叠）

  • 相邻的垂直外边距会发生重叠现象
  • 兄弟元素
    • 兄弟元素的相邻垂直外边距会取两者之间的较大值（两者都是正值）
    • 特殊情况
      • 如果相邻的外边距一正一负，则取两者的和
      • 如果相邻的外边距都是负值，则取两者中绝对值较大的
    • 兄弟元素之间的外边距重叠，对于开发是有利的，所以我们不需要进行吹
  • 父子元素

    • 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）

    • 父子外边距的折叠会影响到页面的布局，必须要进行处理

• 行内元素盒模型

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

• display 用来设置元素显示的类型

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

• visibility 用来设置元素的显示状态

  • visible 默认值，元素在页面中正常显示

  • hidden 元素在页面中隐藏不显示，但是仍然占据页面的位置

• 重置样式表：专门来对浏览器的样式进行重置的

  • reset.css 直接去除了浏览器的默认样式
  • normalize.css 对默认样式进行了统一
    • 默认样式：
      • 通常情况，浏览器都会为元素设置一些默认样式
      • 默认样式的存在会影响到页面的布局

        • 通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面）

• 盒子的样式，盒子可见框的大小由内容区，内边距和边框共同决定

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

      • width和height 指的是内容区和内边框和边框的总大小

• box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局

  • box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ; 
    

  • 第一个值，水平偏移量 设置阴影的水平位置 正值向右

  • 第二个值，垂直偏移量 设置阴影的垂直位置 正值向下

  • 第三个值，阴影的模糊半径

  • 第四个值，阴影的颜色

• outline

  • 用来设置元素的轮廓线，用法和border一模一样

    • 轮廓和边框不同的点，就是轮廓不会影响到可见框的大小

04_float

• 通过浮动可以使一个元素向其父元素的左侧或右侧移动

  • 使用float 属性来设置于元素的浮动

  • 可选值

    • none 默认值，元素不浮动

    • left 元素向左浮动

    • right 元素向右浮动

      • 注意： 元素设置浮动以后，水平布局的等式便不需要强制成立

        ​ 元素浮动以后，会完全从文档流中脱离，不再占用文档流的位置

        ​ 所以元素下边的还在文档流中的元素会自动向上移动

  • 浮动的特点

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

  • 简单总结

    • 浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，

      通过浮动可以制作一些水平方向的布局

  • 浮动元素其他特点

    • 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果
    • 元素设置浮动以后，将会从文档流中脱离，从文档流中脱离以后，元素的一些特点也会发生变化
      • 脱离文档流的特点

        • 块元素

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

        • 行内元素

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

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

• 网页布局看sgg的

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

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

        • 常用的方式 为元素设置 overflow:hidden 开启其BFC以使其可以包含浮动元素

• 高度塌陷问题

  • 在浮动布局中，父元素的高度默认是被子元素撑开的

    • 当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离
    • 将会无法撑起父元素的高度，导致父元素的高度丢失

  • 父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱

  • 所以高度塌陷是浮动不居中比较常见的一个问题，这个问题我们必须进行处理

• 例子

   <style>
        div {
            font-size: 50px;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: rgba(187, 255, 170, 0.224);
            float: left;
        }

        .box2 {
            width: 400px;
            height: 150px;
            background-color: #ff0;
            float: right;
        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: orange;
          //  clear: both;
        }
    </style>
</head>

<body>

    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>

</body>

• 由于box1的浮动，导致box3位置上移

  • 也就是说box3收到了box1的影响，位置发生了改变

• 如果我们不希望某个元素因为其他元素浮动的位置而改变位置

  • 我们可以通过clear属性来清除浮动元素对当前元素所产生的影响

• clear

  • 作用：清除浮动元素对当前元素所产生的影响
    • 可选值：
      • left 清除左侧浮动元素对当前元素的影响
      • right 清除右侧浮动元素对当前元素的影响
      • both 清除两侧中最大影响的那侧
  • 原理：

    • 设置清除浮动以后，浏览器会自动为元素添加一个上外边框，

    • 以使其位置不受其他元素的影响

• 最终解决方案：

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

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

05_position

• 定位（position）

  • 是一种更加高级的布局手段
  • 通过定位可以将元素摆放到页面的任意位置
  • 可以使用position属性来设置定位
    • 可选值
      • static 默认值，元素是静止的，没有开启定位
      • relative 开启元素的相对定位
      • absolute 开启元素的绝对定位
      • fixed 开启元素的固定定位
      • sticky 开启元素的粘滞定位
    • 相对定位
      • 当元素的position 属性值设置为relative时则开启了元素的相对定位
      • 相对定位的特点
        • 元素开启相对定位以后，如果不设置偏移量元素不会发生任何变化
        • 相对定位会提升元素的层级
        • 相对定位是参照于元素在文档流中的位置进行定位的
        • 相对定位不会使元素脱离文档流
        • 相对定位不会改变元素的性质 块还是块，行内还是行内
      • 偏移量
        • 当元素开启了的定位以后，可以通过偏移量来设置元素的位置
          • top
            • 定位元素和定位位置上边的距离
          • bottom
            • 定位元素和定位位置下面的距离
            • 定位元素垂直方向的位置由top和bottom两个和属性来控制，通常情况下我们只会使用其中之一
            • top值越大，定位元素越向下移动
            • bottom值越大，定位元素越向上移动
          • left
            • 定位元素和定位位置的左侧距离
          • right
            • 定位元素和定位位置的右侧距离
            • 定位元素水平方向的位置由left和right两个属性控制，通常情况下只会使用一个
            • left越大元素越靠右
            • right越大元素越靠左
  • 绝对定位
    • 当元素的position属性值设置为absolute时，则开启了元素的绝对定位
    • 特点
      • 开启后，不设置偏移量元素的位置不会发生变化
      • 开启后，元素会从文档流中脱离
      • 绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
      • 绝对定位会使元素提升一个层级
      • 绝对定位元素相对于其包含块进行定位的
    • 包含块( containing block )
      • 正常情况下
        • 包含块就是离当前元素最近的祖先块元素
      • 绝对定位的包含块
        • 包含块就是离它最近的开启了定位的祖先元素
          • 如果所有的祖先元素都没有开启定位则根元素就是他的包含块
      • html（根元素，初始包含块）
    • 水平布局
      • left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度
      • 当我们开启了绝对定位之后
        • 水平方向的布局等式就需要添加 left 和 right 两个值
          • 此时规则和之前一样只是多添加了两个值
            • 当发生过度约束：
              • 如果9个值没有 auto 则自动调整 right 值以使等式满足
              • 如果有 auto ，则自动调整 auto的值以使等式满足
            • 可设置auto 的值
              • margin width left right
            • 以为left 和right 的值默认是 auto ，所以如果不指定left和right
              • 则等式不满足时，则会自动调整这两个值
        • 垂直方向布局的等式的也必须满足
          • top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度
  • 固定定位
    • 将元素的position属性设置为fixed 则开启了元素的固定定位
    • 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
      • 唯一不同的是固定定位永远参照于浏览器的视口进行定位
      • 固定定位的元素不会随网页的滚动条滚动
  • 粘滞定位
    • 当元素的position属性设置为sticky时则开启了元素的粘滞定位
    • 粘滞定位和相对定位的特点基本一致

      • 不同的是粘滞定位可以在元素到达某个位置时将其固定

• 对于开启了定位元素，可以通过z-index属性来指定元素的层级

  • z-index 需要一个整数作为参数，值越大元素的层级越高，元素的层次越高越优先显示

    • 如果元素的层级一样，则优先显示靠下的元素

    • 祖先的元素的层级再高也不会盖住后代元素

06_font&background

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

  •     @font-face {
                /* 指定字体的名字 */
            font-family:'myfont' ;
            /* 服务器中字体的路径 */
            src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
        }
    

  • 问题

    • 加载速度
    • 版权
    • 字体格式

  • 字体相关的样式

    • color 用来设置字体颜色
    • font-size 字体的大小
      • 单位
        • em 相当于当前元素的一个font-size
        • rem 相当于根元素的一个font-size
    • font-family 字体族（字体的格式）
      • 可选值
        • serif 衬线字体
        • sans-serif 非衬线字体
        • monospace 等宽字体
          • 指定字体的类别，浏览器会自动使用该类别下的字体
        • font-family 可以同时指定多个字体，多个字体间用，隔开

          • 字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推

• 图标字体

  • 在网页中经常使用一些图标，可以通过图片来引入图标
    • 但是图片大小本身比较大，而且非常不灵活
  • 所以在使用图标时，我们还可以将图标直接设置为字体
    • 之后通过font-face 的形式来对字体进行引入
  • 这样我们就可以通过使用字体的形式来使用图标

• fontawesome 使用步骤

•   1.下载 https://fontawesome.com/
    2.解压
    3.将css和webfonts移动到项目中
    4.将all.css引入到网页中
    5.使用图标字体
        - 直接通过类名来使用图标字体
            class="fas fa-bell"
            class="fab fa-accessible-icon"
  

• 通过伪元素来设置图标字体

  • 找到要设置图标的元素通过before 或 after 选中

  • 在content 中设置字体的编码

  • 设置字体的样式

  • 可以通过实体来使用图标字体

    • &#x 图标的编码

                content: '\f1b0';
                /* font-family: 'Font Awesome 5 Brands'; */
                font-family: 'Font Awesome 5 Free';
                font-weight: 900; 
                color: blue;
                margin-right: 10px;
    

  • 阿里的字体

    •     <link rel="stylesheet" href="./iconfont/iconfont.css">
          <style>
              i.iconfont{
                  font-size: 100px;
              }
      
              p::before{
                  content: '\e625';
                  font-family: 'iconfont';
                  font-size: 100px;
              }
          </style>
      </head>
      <body>
      
          <i class="iconfont">&#xe61c;</i>
          <i class="iconfont">&#xe622;</i>
          <i class="iconfont">&#xe623;</i>
          <i class="iconfont icon-qitalaji"></i>
          <p>Hello</p>
      

• 行高

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

• font

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

    • 语法
      • font ： 字体大小/行高 字体族
      • 行高可以省略不写 如果不写将使用默认值
      • font-weight 自重 字体的加粗
        • normal 默认值 不加粗
        • bold 加粗
        • 100-900 九个级别（没什么用）
      • font-style 字体的风格
        • normal 正常的
        • italic 斜体
      • text-align 文本的水平对齐
        • left 左侧对齐
        • right
        • center
        • justify
      • vertical-align
        • baseline 默认值 极限对齐
        • top
        • bottom
        • middle
      • text-decoration
        • none 什么都没有
        • underline 下划线
        • line-through 删除线
        • overline 上划线
      • white-space
        • normal 正常
        • nowrap 不换行
        • pre 保留空白

  • 背景

    • background-image 设置背景图片

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

    • background-repeat 用来设置背景的重复方式

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

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

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

    • background-position: -50px 300px;
      background-image: url("./img/1.png");
      background-repeat: no-repeat;
      background-color: #bfa;
      

    • 设置背景的范围

      • background-clip
        • border-box 默认值 背景会出现在边框的下边
        • padding-box 背景不会出现在边框，只出现在内容区和内边距
        • content-box 背景只会出现在内容区
      • background-origin 背景图片的偏移量计算的原点
        • padding-box 默认值，background-position 从内边距处开始计算
        • content-box 背景图片的偏移量从内容区计算
        • border-box 背景图片的变量从边框处开始计算
      • background-size
        • 设置图片的大小
        • 第一个值表示宽度
        • 第二个值表示高度
        • 如果只写一个，第二个默认值为auto
        • cover 图片的比例不变，将元素铺满
        • contain 图片比例不变，将图片在元素中完整显示
      • background 背景相关的简写，所有背景相关的样式都可以通过该样式来设置
        • 没有顺序要求，也没有哪个属性是必须写的
          • 注意
            • background-size 必须写在 background-position 的后边 并且使用/隔开
              • background-position/background-size
            • background-origin background-clip 两个样式 ，orgin要在clip的前边
      • background-attachment
        • 背景图片是否跟随元素移动

          • scroll 默认值 背景图片会随元素移动

          • fixed 背景会固定在页面中，不会随元素移动

• 线性渐变

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

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

    • linear-gradient()

    • 在属性的开头，我们可以指定一个渐变的方向

      • to left
      • to right
      • to bottom
      • to top
      • deg度数
      • turn 圈

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

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

    • background-image: linear-gradient(red,yellow,#bfa,orange);
      background-image: linear-gradient(red 50px,yellow 100px, green 120px, orange 200px);
      background-image: repeating-linear-gradient(to right, red, yellow 50px);
      

  • 径向渐变

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

    • 默认情况下径向渐变的形状根据元素的形状来计算的

      • 正方形--> 圆
      • 长方形 --> 椭圆形

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

      • circle
      • ellipse

    • 也可以指定渐变的位置

      • 语法

        • radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置)

        • 大小

          • circle 圆形

            ellipse 椭圆

            closest-side 近边

            closest-corner 近角

            farthest-side 远边

            farthest-corner 远角

        • 位置

          • top right left center bottom

          • background-image: radial-gradient(farthest-corner at 100px 150px, red , #bfa)
            

07_HTML

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

  • 同样在网页中我们也需要使用表格，我们通过table 标签来创建一个表格
  • 在table中使用tr表示表格中的一行，有几个tr就有几行
    • 在tr中使用td表示一个单元格，有几个td就有几个单元格
    • rowspan
      • 纵向的合并单元格
    • colspan
      • 横向的合并单元格
  • 可以将一个表格分成三个部分
    • 头部 thead
    • 主体 tbody
    • 底部 tfoot
    • th表示头部的单元格
  • border-spacing
    • 指定边框之间的距离
  • border-collapse
    • 设置边框的合并
  • 默认情况下元素在td中是垂直居中的，可以通过 vertical-align 来修改
  • 如果表格中没有使用tbody 而是直接使用 tr

    • 那么浏览器会自动创建一个tbody ，并且将 tr 全都放到tbody 中

    • tr 不是 table 的元素

• 表单

  • 在现实生活中表单用于提交数据

  • 在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器

  • 使用form 标签来创建一个表单

    • 属性

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

    • 文本框

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

    • 密码框

      • type="text"

    • 单选按钮

      • 像这种选择框，必须要指定一个value 属性，value属性最终会作为用户的填写的值传递给服务器
      • checked 可以将单选按钮设置为默认选中

    • 多选框/下拉列表

    •     多选框 <input type="checkbox" name="test" value="1">
          <input type="checkbox" name="test" value="2">
          <input type="checkbox" name="test" value="3" checked>
        
          <br><br>
        
          <!-- 下拉列表 -->
          <select name="haha">
              <option value="i">选项一</option>
              <option selected value="ii">选项二</option>
              <option value="iii">选项三</option>
          </select>
      <!-- 提交按钮-->
            <input type="submit" value="注册">
      

    • autocomplete="off " 关闭自动补全

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

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

      • autofocus 设置表单项自动获取焦点

08_animation

• 过渡（transition）

  • 通过过渡可以指定一个属性发生变化时的切换方式
  • 通过过渡可创建一些非常好的效果，提升用户体验
    • transition-property
      • 指定要执行过渡的属性 多个属性间使用，隔开
      • 如果所有的属性都需要过渡，则使用all关键字
      • 大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
    • transition-duration
      • 指定过渡效果的持续时间
      • 时间单位
        • s 和 ms 1s = 1000ms
      • 可以同时指定不同的属性，和上一个api相对应
    • transition-timing-function
      • 过渡的时序函数
      • 制定过渡的执行的方式
        • 可选值
          • ease 默认值，慢速开始，先加速，再减速
          • linear 匀速运动
          • ease-in 加速运动
          • ease-out 减速运动
          • ease-in-out 先加速 后减速
          • cubic-bezier(） 来指定时序函数 cubic-bezier.com
          • step() 分步执行过渡效果
            • 可以设置一个第二个值
              • end，在时间结束时执行过渡（默认值）
              • start，在时间开始时执行函数
    • transition-delay
      • 过渡效果的延迟，等待一段时间后在执行过渡
    • transition

      • 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟

• 动画

  • 动画和过渡类似，都是可以实现一些动态的效果

    • 不同的是过渡需要在某个属性发生变化时才会触发
    • 动画可以自动触发动态效果

  • 设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行的每一步

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

  • animation-name

    • 要对当前元素生效的关键帧的名字

  • animation-duration

    • 动画的执行时间

  • animation-delay

    • 动画的延时

  • animation-iteration-count

    • 动画执行的次数
      • 可选值：infinite 无限执行

  • animation-direction

    • 指定动画运行的方向

      • 可选值

        • normal 默认值 从from 向to 运行 每次都是这样

        • reverse 从 to 向 from 运行 每次都是这样

        • alternate 从from 向to 运行 重复执行动画时反向执行

        • alternate-reverse 从to 向from 运行 重复执行动画时反向执行

  • animation-fill-mode 动画的填充模式

    • 可选值

      • none 默认值 动画执行完毕元素回到原来的位置

      • forwards 动画执行完毕元素会停止在动画结束的位置

      • backwards 动画延时等待时，元素就会处于开始位置

      • both 结合了forwards 和 backwards

• 变形

  • 变形就是指通过CSS来改变元素的形状或位置
    • 不会影响到页面的不觉
      • 平移
        • translateX() 沿着x轴方向平移
        • translateY() 沿着y轴方向平移
        • translateZ() 沿着z轴方向平移
          • 平移元素，百分比是相对于自身计算的
    • z轴平移，调整元素在z轴的位置，正常情况下就是调整元素和人眼之间的距离
      • 距离越大，元素离人越近
    • z轴平移属于立体效果（近大远小），默认情况下页面是不支持透视的，如果看见效果
      • 必须要设置网页的视距

• 旋转

  • 通过旋转可以使元素沿着x y 或者 z 旋转指定的角度

    • 对函数进行旋转的函数

    • rotateX()

    • rotateY()

    • rotateZ()

    •     /* transform: rotateZ(.25turn); */
          /* transform: rotateY(180deg) translateZ(400px); */
          transform: translateZ(400px) rotateY(180deg) ;
          /* transform: rotateY(180deg); */
          /* 是否显示元素的背面 */
          backface-visibility: hidden;
      

• 缩放

  • 变形的原点 默认值 center
    • transform-origin:20px 20px;
  • 对元素进行缩放的函数

    • scaleX() 水平

    • scaleY() 垂直

    • scale() 双方向的缩放

09_less

less

• 是一门css 的预处理语言

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

  • 在less中添加了许多新特性：像对变量的支持，对mixin的支持

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

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

  • css也支持变量的设置

    •     html{
              /* css原生也支持变量的设置 */
              --color:#ff0;
              --length:200px;
          }
        
          .box1{
              /* calc()计算函数 */
              width: calc(200px*2);
              height: var(--length);
              background-color: var(--color);
          }
        
          .box2{
              width: var(--length);
              height: var(--length);
              color: var(--color);
          }
        
          .box3{
              width: var(--length);
              height: var(--length);
              border: 10px solid var(--color);
          }
      

    • //import用来将其他的less引入到当前的less
      //可以通过import来将其他的less引入到当前的less中
      @import "syntax2.less";
      
      .box1{
          // 在less中所有的数值都可以直接进行运算
          // + - * /
          width: 100px + 100px;
          height: 100px/2;
          background-color: #bfa;
      }
      
      // less中的单行注释，注释中的内容不会被解析到css中
      /*
          css中的注释，内容会被解析到css文件中
      */
      .box1{
          background-color: #bfa;
          .box2{
              background-color: #ff0;
              .box4{
                  color: red;
              }
          }
          .box3{
              background-color: orange;
          }
      }
      
      //变量，在变量中可以存储一个任意的值
      // 并且我们可以在需要时，任意的修改变量中的值
      // 变量的语法： @变量名
      @a:200px;
      @b:#bfa;
      @c:box6;
      
      .box5{
          //使用变量时，如果是直接使用则以 @变量名 的形式使用即可
          width: @a;
          color:@b;
      }
      
      //作为类名，或者一部分值使用时必须以 @{变量名} 的形式使用
      .@{c}{
          width: @a;
          background-image: url("@{c}/1.png");
      }
      
      @d:200px;
      @d:300px;
      
      div{
          // 变量发生重名时，会优先使用比较近的变量
          @d:115px;
          width: @d;
          height: @e;
      }
      
      //可以在变量声明前就使用变量
      @e:335px;
      
      div{
          width: 300px;
          // 新版的语法
          // height: $width;
      }
      
      .box1{
          .box2{
              color: red;
          }
          >.box3{
              color: red;
              &:hover{
                  color: blue;
              }
          }
          //为box1设置一个hover
          //& 就表示外层的父元素
          &:hover{
              color: orange;
          }
      
          div &{
              width: 100px;
          }
      }
      
      .p1{
          width: 100px;
          height: 200px;
      }
      
      //:extend() 对当前选择器扩展指定选择器的样式（选择器分组）
      .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);
      }
      
      span{
          color: average(red,blue);
      }
      
      html{
          width: 100%;
          height: 100%; 
      }
      body {
          width: 100%;
          height: 100%;
          background-color: #bfa;
      }
      
      body:hover{
          background-color: darken(#bfa,50%);
      }
      
      

10_flex

• flex（弹性盒，伸缩盒）

  • 是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局

  • flex 可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

  • 弹性容器

    • 要使用弹性盒，必须先将一个元素设置为弹性容器

    • 我们通过 display 来设置弹性容器

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

    • 属性

      • flex-direction 指定容器中弹性元素的排列方式
        • 可选值
          • row 默认值，弹性元素在容器中水平排列（左向右）
          • row-reverse 弹性元素在容器中反向水平排列（左向右）
          • column 弹性元素纵向排列（自上向下）
          • column-reverse 弹性元素方向总线排列（自上向下）
        • 主轴：
          • 弹性元素的排列方向称为主轴
        • 侧轴：
          • 与主轴垂直方向的称为侧轴
      • flex-wrap
        • 设置弹性元素是否在弹性容器中自动换行
          • 可选值
            • nowrap 默认值，元素不不会自动换行
            • wrap 元素沿着辅轴方向自动换行
            • wrap-reverse 元素沿着f辅轴反方向换行
      • flex-flow
        • wrap 和direction的简写属性
        • flex-flow: row 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 指定弹性元素的收缩系数
      • 当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩
    • flex-grow flex-shrink
      • 弹性元素的增减系数
        • 增减系数的计算方式比较复杂
        • 增减多少是根据增减系数和元素大小来计算的
    • flex-basis
      • 指定的是元素在主轴上的基础长度
      • 如果主轴是横向的 则该值指定的就是元素的宽度
      • 如果主轴是纵向的 则该值的指定值就是元素的高度
        • 默认值是 auto， 表示参考元素自身的高度或宽度
        • 如果传递了一个具体的数值，则以该值为准
    • flex 可以设置弹性元素所有的三个样式
      • flex 增长 缩减 基础；
        • initial "flex: 0 1 auto"
        • auto "flex:1 1 auto"
        • none "flex: 0 0 auto" 弹性元素没有弹性
    • order
      • 决定弹性元素的排列顺序
    • align-self:

      • 用来覆盖当前弹性元素上的align-items

      • 属性和 align-items 一样

• 像素

  • 屏幕是由一个一个发光的小点构成，这一个个的小点就是像素

  • 分辨率：1920 * 1080 说的就是屏幕中小点的数量

  • 在前端开发中像素要分成两种情况讨论：CSS像素 和 物理像素

  • 物理像素，上述所说的小点点就属于物理像素

  • CSS像素，编写网页时，我们所用像素都是CSS像素

    • 浏览器在显示网页时，需要将CSS像素转换为物理限速然后再呈现

    • 一个css像素最终由几个物理像素显示，由浏览器决定

      默认情况下在pc端，一个css像素 = 一个物理像素

• 视口（viewport）

  • 视口就是屏幕中用来显示网页的区域

  • 可以通过查看视口的大小，来观察CSS像素和物理像素的比值

  • 默认情况下

    • 视口宽度 1920px（CSS像素）

      ​ 1920px（物理像素）

      ​ 此时，css像素和物理像素比是一比一

    • 放大两倍的情况

      • 视口宽度 960px（CSS像素）

        ​ 1920px（物理像素）

        ​ 此时，css像素和物理像素的比是1:2

    • 我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值

• 在不同的屏幕中，单位像素的大小是不同的，像素越小，屏幕越清晰

  • 24寸 1920*1080

  • i6 4.7寸 750*1334

  • 智能手机的像素点远远小于计算机的像素点

  • 问题：一个宽度为900px的网页在iphone6中要如何显示呢？ 以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980

    ​ 移动端的浏览器会自动对网页缩放以完整显示网页

    material.io/resources/d…

  • 所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验，为了解决这个问题，大部分网站都会专门为移动端设计网页

• 设置视口大小

  • device-width 表示设备的宽度（完美视口）

  • <meta name="viewport" content="width=device-width">
    

  • 移动端默认的视口大小时980px（css像素）

    • 默认情况下，移动端的像素比就是 980/移动端宽度（980/750）

    • 如果我们直接在网页中编写移动端代码，在980视口下，像素比是非常不好的

      导致网页中的内容非常非常小

    • 编写移动页面时，必须要确保有一个比较合理的像素比

      ​ 1css像素 对应 2个物理像素

      ​ 1css像素 对应3个物理像素

    • 可以通过meta标签来设置视口大小

    • 每一款移动设备设计时，都会有一个最佳的像素比

      • 一般我们只需要将像素比设置为该值即可得到一个最佳效果

      • 将像素比设置为最佳像素比的视口大小我们称为完美视口

      • 将网页的视口设置为完美视口

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

      • 结论：以后再写移动端的页面，就把上边的这个玩意先写上

  • 不同设备的完美视口的大小是不一样的

    ​ iPhone6 - - 375

    ​ iPhone6plus - - 414

    • 由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样的

      • 比如在iPhone6中 375就是全屏，而到了plus中375就会缺一块

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

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

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

      • 设计图的宽度

        • 750px 1125px

      • 设计图

        • 750px

      • 使用vw作为单位

        • 100vw

      • 创建一个 48px * 35px 大小的元素

        100vw = 750px（设计图的像素） 0.13333333333333vw = 1px

        6.4vw = 48px （设计图像素）

        4.667vw = 35px

    • 网页中字体大小最小是15px，不能设置一个比12像素还小的字体

      如果我们设置了一个小于12px的字体，则字体自动设置为12

      0.13333333vw = 1px

      5.3333vw = 40px

    • rem

      ​ 1 rem = 1 html的字体大小

      ​ 1 rem = 40px

• 响应式布局

  • 网页可以根据不同的设备或窗口大小呈现出不同的效果

  • 使用响应式布局，可以使一个网页适用于所有的设备

  • 相应布局的关键就是媒体查询

  • 通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式

  • 使用媒体查询

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

      • 媒体类型：

        • all 所有设备

        • print 打印设备

        • screen 带屏幕的设备

        • speech 屏幕阅读器

          • 可以使用，连接多个媒体设备，这样他们之间就是一个或的关系

        • 可以在媒体类型面前添加一个only，表示只有

          only的使用主要是为了兼容一些老版本的浏览器

      • 媒体特性

        • width 视口的宽度

        • height 视口的高度

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

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

        •     @media (max-width: 500px) {
                  body {
                      background-color: #bfa;
                  }
          

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

          一般比较常用的断点：

          • 小于768 超小屏幕 max-width=768px

          • 大于768 小屏幕 min-width=768px

          • 大于992 中型屏幕 min-width= 992px

          • 大于1200 大屏幕 min-width=1200px

          • @media only screen and (min-width: 500px) and (max-width:700px) {
                        body {
                            background-color: #bfa;
                        }
                    }
            

​

​

​