【无标题】

浮动

浮动的原理:设置浮动的元素超出文档流
文档流：就是元素从上到下从左到右的布局顺序
浮动的作用：从整体出发，把标签元素惊醒横向布局
使用inline-block横向布局的弊端
1.元素之间有缝隙，需要解决
2.低版本浏览器不支持inline-block
浮动的特点：
1.浮动元素超出文档流
2.块属性标签浮动之后，不再独自占据一行空间，如果不设置宽高，则它的宽高由内容撑开
3.块属性标签浮动之后，他的margin属性的auto值失效
4.行属性标签浮动之后，可以设置宽和高并且支持，上下padding和上下margin

清浮动

当子级元素进行浮动的时候，他的父级元素会因此产生影响，
由于浮动元素脱离文档流，父元素没有被子元素撑开，导致父元素没有高度，这样在布局的时候会产生混乱
清除浮动产生的影响(清浮动)
1.给浮动元素的父级，添加overflow:hidden;
2.给父元素设置指定高度，确保布局正确
3.给父元素添加 display: inline-block; 该方法兼容性差
4.给父元素添加浮动,可能会影响布局
5.设置一个空标签，在空标签中设置一个属性

        .clear {
            clear:both;
            /* 防止IE低版本具有默认高度 */
            height:0;
            overflow:hidden;
        }
    6.通过after伪元素清浮动
        .clearfix::after{
            content: '';
            overflow: hidden;
            display: block;
            height: 0;
            clear: both;
        }

定位

定位原理：定位的元素超出文档流
什么时候用到定位？
在同一块文档流的区域内，需要同时叠放多个标签
定位流程：
1.通过position 属性设置定位的参照物
2.通过方位属性设置具体方位的位置数据，方位属性有top，left，right，bottom，他是用来设置距离参照物有多远。
他们的优先级是 left>right
top>bottom
position属性的值
static relative absolute fixed
static：静态定位，无参照物，不定位
relative：相对定位,以元素本身没有移动位置之前的位置为参照物
absolute：绝对定位，以当前元素的第一个具有定位属性的祖先级元素为参照物，作为参照物的祖先级元素，必须具有
position:relative 或者 position:absolute 设置，如果没有定位的祖先级属性，则参照物是body
fixed:固定定位，相对与浏览器窗口定位

定位特点

相对定位的特点：
1.相对定位是基于元素原来的位置进行定位
2.元素设置了相对定位以后，对元素本身没有任何影响
3.元素设置完相对定位以后，虽然元素脱离文档流，但是元素本身的位置依然占据文档流的空间
4.相对定位的元素天然提升层级，比没有定位的元素层级高
5.相对定位的元素可以通过left right top bottom改变元素位置
绝对定位的特点：
1.设置了绝对定位的元素会脱离文档流，不会占据文档流空间，并且提升层级
2.行元素设置完绝对定位以后，可以设置宽高，可以设置上下margin和上下padding，如果不设置宽高，宽高由内容撑开
3.块元素设置了绝对定位以后，自动的margin消失，如果不设置宽高，宽高由内容撑开
4.绝对定位是相对于他的第一个具有定位属性的祖先级元素进行定位，如果不存在这样的祖先级元素，则相对于document（文档）定位。具有定位属性的祖先级元素，一般需要有relative和absolute其中的一个定位属性
5.一般的，如果设置了绝对定位，那么它的父元素需要有一个固定的高
固定定位的特点：
1.固定定位相对于浏览器窗口定位
2.固定定位脱离文档流

定位层级

比作特殊设置的时候，
定位元素的层级比非定位元素的层级高
定位元素后来者居上
使用z-index设置定位的层级，如果设置该属性，则默认为0
使用z-index的值相同，则还是后加载的元素高于先加载的元素如果值不相同，值大的元素层级高

透明度

transparent 透明色
opacity：设置元素的透明度，可以是元素透明，包含元素里面的所有内容
取值范围0-1，0为完全透明，1为完全不透明
行元素在垂直方向的对齐方式
vertical-align
值：
top：顶部对齐
middle：中间对齐
baseline：基线对齐
bottom：底部对齐
vertical-align只能使用在行元素或者内联元素（inline-block）上，不能使用在块元素上
使用方式
1.如果父元素的高度有其中一个子元素撑开，那么给其他元素设置vertical-align：middle；就可以实现居中效果
2.如果父元素高度固定，不使用子元素撑开高度，则可以通过添加一个自定义标签，该标签的高度为父元素的高度，然后设置vertical-align：middle；和display：inline-bkock；就可以使父元素的内容居中
vertical-align也可以用来解决img标签的缝隙

居中专题

1.块元素水平居中，设置margin:0 auto;
2.行元素，内联元素的水平居中，在父级设置text-aling:center;
3.使用vertical-aling 设置行元素和内联元素的垂直居中
4.使用定位和 margin结合，设置元素居中
a.给需要居中的元素设置margin-top和margin-left为自身的一半
b.给需要居中的元素设置定位距离为left:50%; top:50%;
5.父元素宽高固定，子元素绝对定位，实现绝对居中
a.父元素宽高固定
b.子元素绝对定位
c.给子元素设置left: 0;right: 0;top: 0;bottom: 0;
d.给子元素设置margin: auto;

表格

table 表示表格
表格的作用：
1、在之前可以使用表格进行布局
2、作为列表来显示数据
一个表格使用 thead、tbody和tfoot组成，这三个标签可以不写，浏览器会自动添加
想要创建一个表格可以使用以下标签
table:表示当前创建一个表格
tr：表示表格中的一行
th：表示表格中的一个单元格，一般是表头
td：表示表格的一个单元格，一般代表表的内容
以上标签都是块标签
给table添加border属性，设置边框
cellspacing 设置单元格和单元格之间的距离
cellpadding设置单元格和边框的距离
合并单元格
colspan 合并列（横向合并）
rowspan 合并行（竖向合并）
width设置表格的宽度,可以是具体的值也可以是百分比
height设置表格的高度,可以是具体的值也可以是百分比
以上width height 属性，可以设置table td th 上，width影响的是一列，height影响的是一行
使用 border-collapse 设置单元格的边框是否合并
border-collapse: collapse;合并
border-collapse: separate;不合并

表单

form 标签，表单，可以用来提交数据
form是一个块标签
action属性，数据提交到的服务器地址，一般是接口地址
method属性，数据的提交方式
它的值有
get,post,put,delet等
get:get请求可以把数据拼接到接口地址的url上，缺点是，不安全，提交的数据较少
post:post请求，在post提交的数据信息中，不会看到提交的数据结构，相比较get是安全的，并且提交的数据较大
lable标签，行标签，经常和input搭配使用，表示input的标题
input标签，行标签，输入框，常用于表单输入

        type属性，用来设置输入框的类型
            它的值
                text 文本输入框
                password 密码输入框
                button 普通按钮
                submit 提交按钮
                reset 重置按钮
                radio 单选框
                checkbox 多选框
                hidden 隐藏框

value属性，设置input的值
name 属性，对于界面显示没有任何影响，主要用于数据交互，实际上name的值既是后台数据的字段名
placeholder 属性，输入框的提示信息
maxlength属性，输入字符的最大长度

        单选框 同一类行选项，他们的name值必须相同
         lable 的for属性，用来绑定对应id的input，例如
         <lable for="abc"></lable>只要对该lable操作，则会在当前页面找到id="abc"的input，并且选中该input。
         单选框和多选框的默认选中，只要在input上设置checked属性即可
         禁用某一个input标签，只需要个input添加一个disabled属性即可
         给某一个输入框添加只读属性readonly，确保该输入框内容可以通过程序修改，并且能提交到后台
         disabled和readonly的异同：他们都不能手动修改
         不同的是：disabled的值不能提交和使用，readonly的值可以提交到后台

input标签

    普通input的type类型
    text、password、hidden、submit、reset、radio、checkbox、file、number、button

    input属性
        autofocuse 自动获取光标，也叫自动聚焦
 <form action="##" method="get">
    <!-- email 约束输入的内容为邮箱 -->
    邮箱：<input type="email" value="" autofocus><br>

    <!-- url 约束输入内容为网址 -->
    网址：<input type="url" value=""><br>

    <!-- number 约束输入内容为数字
            step属性为：每次的步长-->
    年龄：<input type="number" value="" step="10"><br>

     <!-- color 取色器 -->
    取色器：<input type="color" value=""><br>

    <!-- range 滑竿 
            min 最小值
            max 最大值
            value 当前值 -->
    滑竿：<input type="range" min="0" max="100" value="10"><br>

    <!-- date 显示日期 -->
    日期：<input type="date" value=""><br>

    <!-- month 显示日期到月 -->
    月：<input type="month" value=""><br>

    <!-- week 显示日期到周 -->
    周：<input type="week" value=""><br>

    <!-- time 设置时间 -->
    时间：<input type="time" value=""><br>

    <!-- datetime-local 设置当地时间-->
    设置当地时间：<input type="datetime-local" value=""><br>

    <!-- image 图片提交按钮 -->
    图片提交按钮：<input type="image" src="./audio/4.jpg" width="100" value="提交"><br>

    <input type="submit" value="提交">

form表单标签

input 属性,input虽然是行但是可以设置宽高
minlength 最少字符数
required 设置为必填项
type 属性补充
file 提交文件
number 输入数字
select 下拉框,行标签
它的子级必须是option标签，每一个option标签表示一个选项，option具有value属性
fieldset创建一个组
legend 组的标题
textarea 多行文本输入框
属性

            rows 设置具有多少行
            cols 设置具有多少列

设置textarea

            通过css的resize属性，设置拖拽的方向
            horizontal 横向拖拽
            vertical 纵向拖拽
            both 双向拖拽
            none 不拖拽

HTML5中的新标签

h5新特性都有哪些
1.新增了很多语义化标签
2.废弃了一些css修饰和html标签
3.支持本地持久化数据
4.增加了音视频标签的api
5.提供了canvas画布及其api
H5各种功能比较新，低于IE9的浏览器支持的功能不够全面，建议使用IE9及其以上的浏览器

     <!-- mark 标记标签 -->
 <p>两个<mark>黄鹂</mark>鸣翠柳</p>
 <!-- meter 用电量标签
常用于能量的使用或者内容的使用量等
    属性
        value 当前电量的值
        max 最大值
        min 最小值
        low 用电量最低报警值
        high 用电量最高报警值
    当前标签中的文字，只有在浏览器不支持的时候会被渲染出来
 -->
 <meter value="34" max="100" low="20" high="90" min="0">你的浏览器太low了</meter>

 <!-- 
    进度条标签
    只有最大值max
    没有min属性
    value属性表示当前值
  -->
  <progress max="100" value="50"></progress>
  <!-- 
    ruby 标签，常用来做拼音，注音，注释等
    rt 表示注释的内容
    rp 如果浏览器不支持，显示的内容
   -->
  <ruby>赵
    <rt>zhao</rt>
    <rp>你的浏览器太low了</rp>
  </ruby>

  <!-- 
    datalist 数据列表
        通过input的list属性和datalist的id属性进行绑定
        datalist中的选项使用option标签
        通过datalist可以制作关联查询效果
   -->
  <input type="text" value="" list="show" />
  <datalist id="show">
    <option value="一枝红杏"></option>
    <option value="一枝红"></option>
    <option value="一枝"></option>
    <option value="两个"></option>
    <option value="两个个"></option>
  </datalist>
  <!-- 
    sup 上角标
    sub 下角标
    常用于注释
   -->
  <p>3<sup>2</sup>+4<sup>2</sup>=5<sup>2</sup></p>
  <p>3<sub>2</sub>+4<sub>2</sub>=5<sub>2</sub></p>

H5新标签2

新标签

    details 展示详情标签，自带折叠效果
    summary 标签是details的标题
 <details>
    <summary>四大名著</summary>
    <p>西游</p>
    <p>水浒</p>
    <p>红楼</p>
    <p>三国</p>
 </details>
 <!-- audio 标签，用来播放音频文件，支持MP3，ogg，wav类型文件
        属性
            controls：控制是否出现播放的控制条
            autoplay: 控制自动播放
            loop：循环播放
            muted：设置静音
            preload:设置预加载
                值：
                    auto：默认值，在整个页面加载之后立即加载音频文件
                    metadata：只加载音乐的源文件
                    none：不加载，可以用它来减少服务器压力
                如果设置了autoplay，则可以不设置preload，默认即可
 -->
 <audio src="./audio/houlai.ogg" controls autoplay loop muted preload="auto"></audio>
 <!-- 
    audio 结合source标签做音频播放兼容效果
    source专门用来解决不同浏览器对不同资源格式的支持问题，做兼容
  -->
 <audio controls>
    <source src="./audio/houlai.ogg"/>
    <source src="./audio/houlai.mp3"/>
    <source src="./audio/houlai.wav"/>
 </audio>
 <!-- video 视频播放标签，支持MP4，ogg，webm格式
     controls
     loop
     muted
     autoplay
     width:视频的播放区域的宽度
     poster：视频封面
 -->
 <video class="man" src="./video/2.mp4" controls loop muted width="400" 
 poster="./audio/4.jpg"></video>

 <!-- 视频播放的兼容写法 -->
 <video controls class="man">
    <source src="./video/1.mp4">
    <source src="./video/1.ogg">
    <source src="./video/1.webm">
 </video>
 <!-- 
    figure注释标签，一般包裹一段文字、图片、代码、图表等
    注释内容写在figcaption标签中
  -->
  <figure>
    <figcaption>美女</figcaption>
    <img width="300" src="./audio/11.jpg
    " alt="">
  </figure>

H5新增布局标签

H5新增关于布局的标签

    header：页面的头部区域，要和head标签做区分
    footer：页面的底部区域
    nav：导航区域
    aside：侧边栏区域
    section:一个独立的区域，类似 div
    article：他一般包含在section中，使用artical包裹一段独立的模块
<header>头部内容</header>
 <nav>导航部分</nav>
 <section>
    <aside>侧边栏</aside>
    <article>主要内容</article>
 </section>
 <footer>底部内容</footer>

单位

em 相对单位，他是父级font-size的倍数
可以理解为子级设置长度单位或尺寸的时候，可以使用em作为单位，
1em=父级的font-size，如果当前元素设置了font-size则1em=当前元素的font-size
rem 相对单位，在html标签上设置一个font-size作为整个页面的root，在设置所有标签尺寸的时候，可以直接以html设置的字号大小为根字号，即为1rem
rem常用于移动端开发

    vh/vw ：vh是 view-height 视窗高度
            1vh=视窗的高度 * 1%
            vw是view-width 视窗高度
            1vw = 宽度 * 1%
    css的最大最小属性：
    min-height 最小高度
    max-height 最大高度
    min-width 最小宽度
    max-width 最大宽度

视窗

viewport-视窗
用户通过视窗可以看到浏览器渲染的内容
常用于移动端的布局
通过meta标签设置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width：值是正整数，定义视窗的宽度，单位是px，也可以设置它的值是device-width，表示视窗的宽度为设备宽度
height：值是正整数，定义视窗的高度，单位是px，也可以设置它的值是device-height，表示视窗的高度为设备高度
initial-scale：范围是在[0-1],用来定义初始时候的缩放值
mininum-scale：范围是在[0-1]，定义最小缩放比例，它的值必须小于或等于initial-scale
maxinum-scale：范围是在[0-1]，定义最大缩放比例，它的值必须大于或等于initial-scale
user-scalable：设置用户是否能够手动缩放，它的值是yes/no，默认是yes

特殊字符

	  空格
    >   大于号
    <   小于号
    © 版权符号
    " 双引号
    ' 单引号
    × × 号
    ™ 商标

弹性布局

弹性布局

    1.他是css3推出的布局方式
    2.低版本浏览器支持
    3.所有移动端都支持

设置弹性容器（弹性盒子）

    块 ->弹性容器
        display:flex
    行 ->弹性容器
        display:inline-flex
    一般行不会设置弹性容器
    设置弹性布局只需要给父容器设置 display:flex；
    flex-direction 设置主轴的方向
        row：默认值，主轴为水平方向，起点在左边
        row-reverse：主轴为水平方向，起点在右边
        column：主轴为垂直方向，起点在上边
        column-reverse：主轴为垂直方向，起点在下边

** flex-wrap 设置子元素是否换行

        nowrap：默认值，不换行，子元素可能会被压缩
        wrap：换行，行的起点在上边
        wrap-reverse：换行，行的起点在下边
    以上两个属性可以和写为 flex-flow
        flex-flow: flex-direction  flex-wrap;

align-content 设置多行元素的排列方式

        stretch 默认值，如果子元素没有设置高度，会被拉伸
        flex-start 根据主轴方向排列元素，第二排紧跟第一排，他们之间的距离不会被弹性拉伸
        flex-end 根据主轴方向排列元素，第二排紧跟第一排，并且他的起始位置在主轴的垂直方向的下边
        space-around 行间距平分
        space-between 第一行和最后一行分别出现在垂直主轴方向的上边和下边，如果有第三行，则行间距相等

** justify-content 设置主轴方向的对齐方式（重要）

        flex-start：默认值从左到右
        flex-end：从右到左
        center：居中
        space-around：在主轴方向把父级整体的尺寸，按照子元素的数量平分，并且子元素在平分的尺寸范围中居中
        space-between：第一个子元素在主轴起始位置，第二个子元素在主轴结束位置。、
        如果子元素的数量大于等于3，则每一个子元素之间的间距相等，第一个子元素在主轴起始位置，最后一个子元素在主轴结束位置。

    Y轴是垂直于主轴方向

** align-items 设置垂直于主轴方向的对齐方式

        stretch:默认值，如果子元素没有高度，则会被拉伸
        flex-start：Y轴的起始点，如果子元素没有高度，则子元素不会被拉伸
        flex-end：Y轴的结束点
        center：垂直居中
        baseline：基线对齐

弹性布局子元素设置

设置弹性布局子级内容的属性

    order 设置单个弹性布局的顺序,order的值越大元素越靠后，默认值为0
    flex-grow 设置元素的放大比例，默认值为0，不放大，使用条件是 他的总宽度小于父级的宽度
        元素的最终宽度 = 元素宽度 + flex-grow的值/总flex-grow的值 * 总体剩余宽度
    flex-shrink 设置元素的缩小比例，默认值为1，使用条件是 总宽度大于父元素的宽度
        如果值为0，则表示不缩小，保持原宽度

flex-basis 设置子元素在父元素的主轴方向上所占空间的大小，他的值可以是具体的值，也可以是百分比，默认是auto，auto的含义是遵循给该子元素设置的width的值

    以上三个属性可以和写
    flex:flex-grow flex-shrink flex-basis;
    因此默认是：flex:0 1 auto;
    后面两个属性是非必写项
    可以简写：flex:flex-grow;
    flex:1;
    align-self:该属性可以设置单个子元素的垂直于主轴方向的对齐方式，他可以覆盖 align-items 设置的方式，
    align-self的属性值和align-items相同，意义相同

流式布局

流式布局，就是百分比布局
高度的百分比是基于父元素的百分比进行渲染，因此使用百分比作为高度，他的父级必须定高
特殊属性的百分比
元素的margin-top、margin-bottom、padding-top、padding-bottom 他们的百分比设置都是基于父元素宽度的百分比
line-height 如果设置百分比，不是基于父元素的line-height值，而是基于他自己字号本身的百分比

媒体查询

媒体查询 根据不同设备的宽度，设置不同的样式
关键字是 @media
属性

        only 指的是只针对某一种设备
        not 不针对某一个设备
        screen 电脑屏幕，手机，iPad 设备中的一种，print 打印机，speech 盲人听读机，all 指的是所有
        and 链接后面括号中条件的关键字，and 的左右两边必须有空格
        () 在()里面可以设置条件,它里面的条件一般那都是 max-width min-width的设置
        {} 满足条件的时候，设置的css样式必须书写在{}中
    注意事项：媒体查询不提供优先级，因此，需要把媒体查询的样式最后加载，基础样式写在媒体查询的前面，这样才不会覆盖媒体查询的样式

样例

媒体查询 
        屏幕宽度 大于600 小于800的时候，渲染的css样式
	@media only screen and (max-width:800px)  and (min-width:600px){
        .wp {
            height: 150px;
        }
        .left {
            background: #ccc;
        }
    }
    @media screen and (min-width:1000px) {
        .right {
            background: #ff0;
        }
    }

外部引入媒体查询的写法

外部引入媒体查询的写法
<link rel="stylesheet" href="./css/c800.css" media="only screen and (min-width:800px) and (max-width:1000px)">
<link rel="stylesheet" href="./css/c1000.css" media="only screen and (min-width:1000px)">

选择器

属性选择器

属性选择器
以下 E 代表标签名，attr 表示属性名 val 表示属性值

    *1.E[attr] 选择所有具有attr属性的 E 元素
    *2.E[attr=val] 选择所有具有attr属性并且它的值是val的E元素
    3.E[attr~=val] 选择所有具有attr属性并且它的值 包含val的E元素
    4.E[attr|=val] 选择所有具有attr属性并且它的值是以 val 或者 val- 开头的E元素
    5.E[attr*=val] 选择所有具有attr属性并且它的值具有 val 字符的 E 元素
    6.E[attr$=val] 选择所有具有attr属性并且它的值是以 val 字符结束的 E 元素
    7.E[attr^=val] 选择所有具有attr属性并且它的值是以 val 字符开始的 E 元素

样例

 /* 属性css的值是abc */
    li[class="abc"] {
        border: 1px #f00 solid;
    }
    /* 属性css中包含show */
    li[class~="show"]{
        width: 200px;
        height: 200px;
        background: #04be02;
    }
    /* 属性class中的字符以abc开头或者abc-开头 */
    div[class|="abc"]{
        font-size: 30px;
        color: #f00;
    }
    /* 属性class值中的字符含有bc */
    div[class*="bc"]{
        border: 1px #f00 solid;
        margin: 10px 0;
    }
    /* 属性class的值以 li 开头 */
    div[class^="li"]{
        color: #04be02;
    }
    /* 属性class的值以 d 结尾 */
    div[class$="d"]{
        color: #00f;
    }
    /* 给所有的文本输入框设置样式 */
    input[type="text"]{
        color: #04be02;
    }
    div.cd {
        color: #f70;
    }
     <ul>
    <li title="剪不断" class="abc">剪不断</li>
    <li class="ab">理还乱</li>
    <li title="是离愁" class="ab show">是离愁</li>
    <li title="恰是一江春水向东流" class="abc show">恰是一江春水向东流</li>
</ul>
<div class="li abc">米饭</div>
<div class="li abc">面条</div>
<div class="ab cd">火鸡面</div>
<div class="abc-li">老母鸡汤</div>

伪类选择器

focus 为所有获取焦点的input设置样式
disabled 为所有被禁用的input设置样式
:target 目标伪类选择器，当跳转到它所修饰的元素的时候才会执行该选择器修饰的样式
root 表示的是html
E:empty 选中所有内容为空的E标签，并添加样式
:empty选中所有内容为空的标签，并添加样式
E:only-child 选中父元素中只有一个E标签的E标签并添加样式（独生子标签）

伪元素选择器

伪元素选择器：通过伪元素选择器可以给元素添加类似子元素的内容，不是真正的标签

    使用伪元素需要添加 ::
    ::first-letter 表示修改第一个字符
    ::first-line 表示修改第一行
    ::before 在元素内容的最前面添加一个伪元素
    ::after 在元素内容的最后面添加一个伪元素

结构伪类选择器

结构伪类选择器

    父级 E:nth-child(num) 选中同一个父级下，排名次序为num的E元素
    num 从1开始
    使用n表达式设置选中的标签，n从0开始计算
    偶数使用 2n
    E:nth-child(2n)
    也可以使用odd表示奇数
    even 表示偶数 
    E:nth-last-child(num) 表示从后开始往前数，使用方式和nth-child 一样，也就是倒着计算

如果父元素中的子元素不是同一个类型，则不能使用nth-child（num）来设置css，因为匹配到的元素不对

    使用E:nth-of-type(num)来匹配元素，他的意思是，找到和E标签同类型的第num个元素

    E:nth-last-of-type(num)使用方法和E:nth-of-type(num)一样，只是倒着数

border圆角设置

border-radius 设置圆角

    border-radius：左上 右上 右下 左下
    左上！=右下 右上=左下 
    border-radius：左上 右上 右下 ；
    左上=右下  右上=左下
    border-radius：左上 右上；
    左上=右下=右上=左下
    border-radius：左上；

实质上，每一个角上面，都有一个水平半径个一个垂直半径，如果每一个方向上的半径不同，则需要写成：水平半径/垂直半径
注意：圆角的值也可以设置百分比，一般的制作一个圆形，可以设置成50%。

背景图设置

background-origin 设置背景图渲染的起始位置
值：

        padding-box 默认值，从padding位置开始渲染的
        content-box 从内容部分渲染
        border-box 从border开始渲染

background-size 设置背景图片的填充方式，也就是设置背景图片大小
值：

            cover 以最短边为基础渲染图片，长边按比例缩放，有可能无法显示全部图片
            contain 以长边为基础渲染图片，短边按比例缩放，有可能无法显示全部图片

值还可以是一下写法：

          background-size:宽度 高度;
          如果只写一个宽度。高度按比例渲染
          宽度和高度可以是具体的是值，也可以是相对于所在元素的百分比

多个背景图设置

css3 支持设置多个背景图
设置方式是按照使用英文逗号分隔开每一个设置

    设置样例
     .wp {
        width: 200px;
        height: 200px;
        border: 1px #f00 solid;
        background:url(./images/icon_img.gif) no-repeat 0 0,url(./images/icon_pdf.gif) no-repeat right top,url(./images/icon_rar.gif) no-repeat center center;
        background-color: #04be02;
    }

背景蒙版

背景蒙版 mask
1.最初只有谷歌浏览器支持
2.背景蒙版可以把透明图的透明部分渲染为不透明，把不透明的部分渲染为透明
3.他的设置方式和背景设置一致
浏览器前缀

    -webkit-：是谷歌。苹果等浏览器内核的前缀
    -moz-：是火狐浏览器前缀
    -ms-：是IE浏览器内核前缀
    -o-：欧朋浏览器内核前缀
    在css属性名之前添加浏览器前缀，表示该css属性是浏览器的私有属性

盒子阴影

box-shadow 设置阴影
box-shadow：x方向的偏移量 y方向的偏移量 阴影的发散度（模糊度） 阴影的宽度 阴影的颜色[阴影位置]
inset 设置内阴影
box-shadow：10px 10px 20px 0 #f00 inset
设置多组阴影，使用英文逗号隔开，设置方式一样
注意：在元素上设置阴影通常是为了增强元素的立体感，阴影占据不占据文档流空间，因此不会引起元素盒模型的变化
样例

单个设置
.wp3 {
        box-shadow: 0 0 50px 2px rgb(0, 0, 0) inset ;
    }
多个设置
    .wp4 {
        box-shadow: 10px 0 10px 10px #f00,-10px 10px 10px 0 #f0f,0 -10px 10px 10px #0f0,0 10px 10px 10px #ff0;
    }

渐变

渐变，至少IE10支持
渐变也是背景图的一种

线性渐变

background:linear-gradient(to 方向,颜色 开始渐变的位置,颜色 开始渐变的位置,…)
linear-gradient 里面参数

        1.to 方向，方向可以使用具体的方向单词，也可以使用角度度数
        如果是度数，则直接写具体角度，不需要to
        正值：顺时针旋转
        0 -> 向上
        90 -> 向右
        180 -> 向下
        负值：逆时针旋转
        开始渐变的位置可以是具体的数值，也可以是百分比
        设置样例
         .wp2 {
    height: 100px;
    background: linear-gradient(135deg,transparent 0%,transparent 30%,#f00 30%,#f00 100%) repeat-x;
    background-size: 20px 20px;

径向渐变

radial-gradient 设置径向渐变
radial-gradient(半径 形状 at 圆心，颜色 渐变的开始位置，颜色 渐变的开始位置,…)
形状的值：

    circle 圆形，默认值，可以省略
    半径可以是具体的数值，也可以是如下系统给定的值：
    farthest-corner 最远角
    closest-corner 最近角
    farthest-side 最远边
    closest-side 最近边

圆心的设置：

    1.可以是具体的数值，第一个数值代表x轴方向，第二个数值代表y轴方向
    2.可以是left，top，right，bottom center 等方位名词的组合
    渐变开始的位置
    1.可以是具体的数值
    2.可以是百分比，百分比是以半径长度为基准
    设置样例
     .wp2 {
        background: radial-gradient(100px at 100px 100px,#f00 0%,#0f0 50%,#ff0 100%);
    }

重复性渐变

重复性渐变
repeating-linear-gradient 设置重复性线性渐变，设置方向和线性渐变一样，只是效果自动渲染出重复的渐变内容
repeating-radial-gradient 设置重复性径向渐变，设置方向和径向渐变一样，只是效果自动渲染出重复的渐变内容
设置重复性渐变需要注意：

    1.需要设置重复渐变的颜色起始位置
    2.至少设置两种颜色

同背景图一样渐变也就可以设置多组渐变,同时设置多组背景图或者渐变图，后面设置的会被前面设置的图覆盖

设置样例
.wp {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: repeating-radial-gradient(100px at center center,#f00 0px,#f00 10px,#0f0 10px,#0f0 20px);
    }

形变

2D形变包含的内容是

    1.平移
    2.旋转
    3.缩放
    4.拉伸(倾斜)
    注意：
    1.行元素不能形变，img和input除外
    2.仅仅是元素的形状的变化，文档流空间并没有变化

设置形变，使用transform 属性

        平移使用 translate
            1.水平方向平移 translateX(num) num是具体的值，正数向右平移，负数向左平移
            2.垂直方向平移 translateY(num) num是具体的值，正数向下平移，负数向上平移
            3.复合写法 translate(x,y)
        旋转使用的是rotate(度数)度数单位是 deg
            度数为正，顺时针旋转
            度数为负，逆时针旋转
            *形变的层级，后来者居上
            使用  transform-origin 属性，设置形变参考点。
            默认是center center

transform-origin:X轴方向的位置 y轴方向的位置

             值：
                1.具体的数值
                2.left top right bottom center 等方向名词的组合，如果只写一个词，则另一个默认是center
        使用缩放 scale(x轴方向的倍数,y轴方向的倍数)

如果x轴和y轴缩放倍数相同可以只写一个
scale(n)
如果需要把型变组合到一起 transform: scale(2) rotate(180deg) translate(30px 50px);
设置倾斜 skew()

            写法和translate一样，分为x轴倾斜，y轴倾斜和复合写法
            skewX(n+deg)元素倾斜，就是元素和y轴的夹角为n度
            X轴的度数为正，向左倾斜
            X轴的度数为负，向有倾斜
            Y轴和X轴一样
            注意：度数不能是90°，使用复合写法他们的和不能是90°

平移和旋转

平移可以使用translate3d(x,y,z);
也可以单独使用 translate3dZ(z)
3d旋转
分开写法

        rotateX(num)：num为正，以上边为基准线，上边往视窗里翻转，num为负，上边往视窗的外面翻转
        rotateY(num)：num为正，以左边为基准线，左边往视窗里翻转，num为负，右边往视窗的外面翻转
        rotateZ(num)：

合写

    rotate3d(x倍数,y倍数,z倍数，度数)
    rotate3d(1,2,3,40deg)
    x轴旋转40度，y轴旋转80度，z轴旋转120度
查看元素从后面看能否看到元素内容
backface-visibility
    值：
    1.visible 默认值可以看到
    2.hidden 不能看到

3D形变

设置3D环境
perspective：景深
它的默认值是none
需要把景深 perspective 设置在3D环境的父级上
它的值是具体的数值，不可以是百分比，因为Z轴没有百分比也不能是0或者负值
使用transform-style设置3D效果
默认值是 flat，表示2D
preserve-3d 表示3D
使用perspective-origin 设置透视点的位置

        值：
        1.可以是left top right bottom center 等方位名词组合
        2.可以是具体数值
        3.可以是百分比
     perspective-origin：X轴的位置 Y轴的位置
以上三个关于3D设置的属性都设置在3D环境的父级上

动画

过渡动画

如果同时设置平移和缩放，有两种方案
1.先写平移，然后再缩放，他的结果是先平移到具体位置，然后在该位置执行缩放
2.先写缩放，然后再平移，他的结果是先把所有的值进行缩放，然后按照缩放后的值平移
一般都用第一种写法
过渡动画，设置元素从一种状态达到另一种状态的动画效果
设置属性是transition

        transition-property 设置需要过渡的css属性，如果有多个属性需要过渡，则可以用英文逗号分开，也可以直接设置all，all表示所有变化的属性都需要过渡，如果不设置该属性，则默认为all。
        transition-duration 设置过渡动画的持续时间，单位是 s(秒)
        transition-delay 设置过渡动画的延迟时间，动画开始的时候有延迟，结束的时候也有延迟

transition-timing-function 设置动画的变化曲线

            ease 默认值，先快后慢
            linear 匀速运动
            ease-in 淡入效果，先快后慢
            ease-out 淡出效果，先匀速，再快，后慢
            ease-in-out 淡入淡出，两边慢，中间快
            以上均属于贝塞尔曲线中的特殊曲线

过渡动画也可以合写： transition:property duration timing-function delay ;
后面两个可以省略，直接设置默认值
过渡动画的触发时机
过渡动画不会主动触发

    触发方式:
    1.通过伪类触发 hover focus targeted
    2.媒体查询
    3.通过js触发

关键帧动画

关键帧动画和过渡动画的区别

    1.关键帧动画的触发时机是，只要添加关键帧动画，就会立即执行动画
    2.关键帧动画可以对动画的流程进行控制

关键帧动画的使用流程

    1.需要先封装一组关键帧动画，使用关键字 @keyframes
    2.给需要设置动画的元素，添加动画属性

设置动画名称

      animation-name:值是通过 @keyframes 声明名称
      设置动画持续时间
       animation-duration:10s;
       以上两个属性,不能省略
       设置动画的运动函数
       animation-timing-function:值和过渡函数一致,都是贝塞尔曲线设置的函数

设置动画的延迟时间

       animation-delay:10s;

设置动画的重复次数

    animation-iteration-count:num;
    值是一个正整数.表示次数, 默认为一次,也可以是infinite 表示无限次数
    设置动画的方向
     animation-direction:
     值
        normal 默认值,正方向运行
        reverse 反方向运行
        alternate 当运行次数为奇数时,正方向运行;偶数时,反方向运行
        alternate-reverse: 当运行次数为奇数时,反方向运行;偶数时,正方向运行
    设置动画最后一帧的状态
     animation-fill-mode
        值:
            forwards 以动画的最后一帧作为动画的最后呈现状态
            both 状态和forwards一样
            backwards 默认值,以动画开始的第一帧作为动画的最后呈现状态

合写

    animation: name duration timing-function delay iteration-count direction fill-mode;
    合写的时候,除了name和duration 不能省略,其他均视情况省略
    控制动画的播放状态
    animation-play-state
        值:
        paused 暂停
        running 运动

animate.css

1.直接在元素上使用 需要添加公共类 animate__animated，然后根据效果添加需要使用的动画类名，注意以animate__ 为前缀也就是animate__动画名
2.使用 animate.css 的动画名
不用刻意添加类名，可以直接在css中声明 animation属性，然后他的动画名是animate.css中的动画名即可

剩余汇总

鼠标手势

鼠标手势，指的是鼠标在页面内或者元素上的样式
cursor

        值：
        crosshair 用于精确定位的 十 字形
        pointer 鼠标显示小手儿
        move 拖拽效果时候的鼠标样式
        text 鼠标悬浮在文本上的样式
        wait 鼠标等待加载时候的样式
        help 鼠标显示带问号的箭头
        not-allowed 禁用效果
        default 默认指针样式
        auto 鼠标根据页面上的内容自行修改样式

引入外部字体

引入外部字体
字体格式
1.ttf：专门用于标准浏览器和 Android等 （最常用）
2.svg 支持ios
3.eot：仅支持IE浏览器
4.woff：支持火狐和谷歌

    使用步骤
    1.将字体引入到项目中
    2.声明引入的字体族
    3.在设置css字体的时侯，使用声明的字体族
    声明字体族的方式
    @font-face {
        font-family: '自定义的字体族名字';
        src: url(字体的资源地址);
    }

文字阴影

设置文字阴影
text-shadow：x轴偏移 y轴偏移 模糊度 阴影颜色
如果需要设置多个阴影，就是用英文逗号隔开
单个阴影
text-shadow：0 0 10px #f60;
多个阴影
text-shadow：0 0 10px #f60,0 0 10px #f60;

    样例
     .wp {
        font-size:30px;
        font-family: 'mao';
        /* 设置阴影 */
        text-shadow: 0 0 10px #f60;
        margin: 50px 0;
        text-align: center;
     <p class="wp">两情若是久长时，又岂在朝朝暮暮</p>

引入iconfont

1.下载图标，并且引入 iconfont.css
2.在使用的标签上引入类名iconfont
3.引入需要的图标类

    样例
    <link rel="stylesheet" href="./icon-font/iconfont.css">
<link rel="stylesheet" href="./iconfont2/iconfont.css">
.txt {
        font-size: 80px;
        color: #f00;
    }
    .wp {
        width: 200px;
        height: 200px;
        background: #04be02 ;
        color: #ff0;
        font-size: 30px;
        resize: both;
    }
     <span class="iconfont icon-jubao txt"></span>
<span class="iconfont icon-xihuan txt"></span>
<span class="iconfont icon-dingwei txt"></span>
<span class="iconfont icon-RectangleCopy1 txt"></span>
<span class="iconfont icon-RectangleCopy txt"></span>
<span class="iconfont icon-RectangleCopy2 txt"></span>

怪异和模型

outline 轮廓线 他的使用方式和 border一样
轮廓线不占据文档流空间
怪异和模型

    box-sizing 
        值：
        box-sizing：
        border-box ：border和padding 统一计算到width之内，也就是宽度包含了border 和padding的值
        content-box:默认值，只有内容被计入到宽度之内
        padding-box：火狐支持，padding计入到宽度之内
    由于 padding-box 存在兼容性问题，因此常用的怪异模式是border-box。

标准盒模型
宽度 = border的宽度 + padding的宽度 + 内容的宽度
怪异和模型
宽度 = 设置的width(包含了border的宽度 + padding的宽度 + 内容的宽度)

多列布局

css3 中最新给出的多列布局方案，他是css布局的一个新的拓展
设置列宽

        column-width ：具体值/auto
        具体值是直接设置元素宽度
        auto 是根据页面宽度，自定义列宽

设置列数

        column-count：num
        num是具体的正整数，范围是[1,10]
    以上两个属性合写
        columns:width count;

设置列间距

        column-gap：normal 或者具体的数值
        normal 是默认值，它的大小是1em

设置两列之间的边框
column-rule 具体设置规则盒css中的border一致
设置标题跨列

        column-span
            只有俩个值：
            1. none 表示不跨列
            2. all 表示跨所有列

网格布局

网格布局，是css3新出的一种布局方式，常见的使用案例为九宫格布局
声明网格布局环境

    display：grid；(最常用，)
    display:inline-grid;
    设置列
    grid-template-columns
        值是 fr，1fr就代表一个比例划分

有几列就可以设置几个 fr，每个fr所占据的宽度比例为1fr，如果需要设置其他比例的宽度，则可以设置整倍fr

        如下例
        grid-template-columns:1fr 2fr 3fr;
        设置了当前网格为3列，第一列的宽度为1fr，第二列的宽度是第一列的2倍，第三列宽度是第一列的3倍
        有几个fr值，就有几列
        还可以直接设置具体宽度
         grid-template-columns：100px 100px 200px;
         也可以设置宽度+auto auto是除了具体宽度列数之外的自适应宽度
         也可以宽度 + fr 组合
    设置行
    grid-template-rows
        值是行高，有几个值就设置几个行高
        grid-template-rows:100px 200px 300px;

以上案例的含义是，设置了三行，第一行的行高是100px，第二行行高是200px，第三行行高是30px

如果总行高小于父级grid的高度，则父级剩余的高度就会被剩余的子元素平分

    行 列合写
     grid-template:行 / 列
    如例子
     grid-template:auto auto auto/1fr 1fr 1fr;
     设置列间距
     column-gap: 具体数值;
     设置行间距
     rows-gap: 具体数值;
     合写间距
     gap:行 列;

指定开始行

     grid-row-start:1;从第一行开始跨行

指定结束行

     grid-row-end;span 3;到第三行结束，合并3行

指定开始列

     grid-row-start:1;从第一列开始跨列

指定结束列

     grid-row-end;span 3;到第三列结束，合并3列

css的hack

css hack：由于不同的浏览器厂商，比如IE ,火狐，谷歌，safair(苹果)等，他们在生产浏览器的时候，会有不同的渲染解决方案，还有不同版本的浏览器也可能对相同的css设置渲染不同效果，例如IE6 7 8 9。css hack 是浏览器厂商给自己的浏览器专门制定的一套特殊的css指令，可以理解为css hack的目的就是解决不同的浏览器的css兼容问题，当然也可以使用css hack为不同浏览器制定不同的css

    ie的条件注释
    [if IE]:只要是IE都生效
    [if lte IE 6]:浏览器的版本小于等于ie6的时候生效
    [if lt IE 6]:浏览器的版本小于ie6的时候生效
    [if gte IE 6]:浏览器的版本大于等于ie6的时候生效
    [if gt IE 6]:浏览器的版本大于ie6的时候生效
    [endif] 条件注释的结束指令
    [if ! IE 6]:浏览器的版本不是IE6的时候生效
    特殊符号 hack
    * 在IE10及其以上生效
    - 减号，只对 IE6 生效
    + 加号 IE7 生效
    _ 下划线，只对IE6 7 生效
    \9 对IE6 7 8 9 10 都生效
    \0 对IE8 9 10 都生效
    \9\0 只对IE9 10 生效

bootstrap

bootstrap初始

bootstrap的栅格系统
栅格系统的最外层必须有一个类名 container
每一行的类名 row
每一列的类名 col
使栅格系统在不同的屏幕宽度下，显示不同的布局方式，可以使用 col-前缀 添加列宽 列数来设置

    列宽设置依据
        sm 屏幕最小宽度是576px
        md 屏幕最小宽度是768px
        lg 屏幕最小宽度是992px
        xl 屏幕最小宽度是1200px
        xxl 屏幕最小宽度是1400px

col-lg-4 他的含义是在 大于 720 小于 960 的宽度下占据4列栅格
栅格系统，把屏幕的总宽度默认分割成12列，元素可以在这12列中布局

button按钮

在bootstrap中使用按钮步骤
1.给需要设置按钮的标签，设置基础类名btn
2.根据按钮功能，设置不同功能名字的类名
通过引入bootstrap来修改样式

     <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
     不同效果按钮
<button type="button" class="btn btn-primary">按钮</button>
<button type="button" class="btn btn-success">按钮</button>
<button type="button" class="btn btn-secondary">按钮</button>
<button type="button" class="btn btn-danger">按钮</button>
<button type="button" class="btn btn-warning">按钮</button>
<button type="button" class="btn btn-info">按钮</button><hr>

通过bootstrap更改字体图标

引入bootstrap更改字体图标

<link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="./bootstrap/bootstrap-icons.min.css">
  <i class="bi-alarm txt"></i>
<i class="bi-search txt"></i>
<i class="bi bi-badge-4k txt"></i>
<i class="txt1 bi bi-calendar-range-fill"></i>
<i class="txt1 bi bi-camera-reels-fill"></i>
<i class="txt1 bi bi-cc-circle-fill"></i>
<i class="txt1 bi bi-chevron-double-right"></i>

不同组件

<div class="dropdown drop1">
    <span class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">点击下拉</span>
    <ul class="dropdown-menu">
        <li>东胜神州</li>
        <li>南瞻部洲</li>
        <li>西牛贺州</li>
        <li>北俱芦洲</li>
    </ul>
</div>
<!-- 深色下拉框 -->
<div class="dropdown">
    <button type="button" class="btn btn-success" data-bs-toggle="dropdown" aria-expanded="false">点击下拉</button>
        <ul class="dropdown-menu dropdown-menu-dark">
            <!-- 设置下拉标题 -->
            <li class="dropdown-header">天下四洲</li>
            <li><a href="##" tabindex="1">东胜神州</a></li>
            <li><a href="##" tabindex="2">南瞻部洲</a></li>
            <li><a href="##" tabindex="3">西牛贺州</a></li>
            <li><a href="##" tabindex="4">北俱芦洲</a></li>
        </ul>
</div>
<!-- 导航元素 -->
<!-- tab 切换形式 -->
<!-- <nav class="nav nav-tabs"> -->
    <!-- 胶囊形式 -->
    <nav class="nav nav-pills">
    <div class="nav-item"><a href="#a" data-bs-toggle="tab" class="nav-link active">首页</a></div>
    <div class="nav-item"><a href="#b" data-bs-toggle="tab" class="nav-link">生活</a></div>
    <div class="nav-item"><a href="#c" data-bs-toggle="tab" class="nav-link">新闻</a></div>
    <div class="nav-item"><a href="#d" data-bs-toggle="tab" class="nav-link">体育</a></div>
</nav>
<!-- tab 切换的实体 -->
<div class="tab-content">
    <div class="active tab-pane fade" id="a">欢迎来到首页</div>
    <div class="tab-pane fade" id="b">台风袭卷郑州</div>
    <div class="tab-pane fade" id="c">哎呀 难受啊</div>
    <div class="tab-pane fade" id="d">中国女足勇夺世界杯</div>
</div>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
        <a href="##" class="navbar-brand">导航栏</a>
        <!-- 缩小之后的导航按钮 -->
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="nav">
            <ul class="navbar-nav">
                <li class="nav-item"><a href="##" class="nav-link active">首页</a></li>
                <li class="nav-item"><a href="##" class="nav-link">生活</a></li>
                <li class="nav-item"><a href="##" class="nav-link">新闻</a></li>
            </ul>
        </div>
    </div>
</nav>
模态框
    data-bs-target 绑定一个操作源，告诉bootstrop操作的是具体哪个元素
    data-bs-target="#abc" 操作的是id=abc的元素
    data-bs-toggle 指的是当前按钮操作的是哪一个功能
        dropdown 表示的是下拉
        modal 表示的是模态框
 
<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#mo">点击弹出模态框</button>
<!-- 透明层 -->
<div class="modal fade" id="mo">
    <!-- 内部框 -->
    <div class="modal-dialog">
        <!-- 内容 -->
        <div class="modal-content">
            <!-- 头部 -->
            <div class="modal-header">
                <h3>锄禾日当午</h3>
                <!-- 删除 -->
                <span class="close" data-bs-dismiss="modal">&times;</span>
            </div>
            <div class="modal-body">
                <p>曲项向天歌</p>
                <p>夜来风雨声</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" data-bs-dismiss="modal">取消</button>
                <button class="btn btn-success">确定</button>
            </div>
        </div>
    </div>
</div>

轮播效果

 .solid {
        height: 800px;
    }
    .carousel-item,.carousel-inner {
        height: 800px;
    }
    .carousel-item{
        text-align: center;
    }
    .carousel-item{
        width: 100%;
        max-height: 800px;
    }
    .dur {
        font-size: 50px;
    }
<div id="banner" class="carousel slide">
    <!-- 分页器 -->
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#banner" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#banner" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#banner" data-bs-slide-to="2" aria-label="Slide 3"></button>
        <button type="button" data-bs-target="#banner" data-bs-slide-to="3" aria-label="Slide 4"></button>
      </div>
    <!-- 轮播图片 -->
    <div class="carousel-inner">
    <div class="carousel-item active"><img src="./images/1000.jpg" alt=""></div>
    <div class="carousel-item"><img src="./images/12.jpg" alt=""></div>
    <div class="carousel-item"><img src="./images/23.jpg" alt=""></div>
    <div class="carousel-item"><img src="./images/9.jpg" alt=""></div>
    </div>
    <!-- 左右切换 -->
    <a href="#banner" class="carousel-control-prev dur" data-bs-slide="next">&lsaquo;</a>
    <a href="#banner" class="carousel-control-next dur" data-bs-slide="next">&rsaquo;</a>
</div>

sass

sass简介

sass 是css的预编译语言

    sass的写法
        简单写法和css是一样的
    less de写法
        通过换行符和空格来表达层级关系

    css 写法
        div { border:1px #f00 solid; }
        div p { font-size:20px; }

    sass 写法
        div{
            border:1px #f00 solid;
            p {
                font-size:20px;
            }
        }
    less 写法
        div
            border:1px #f00 solid;
            p
                font-size:20px;

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

    使用sass，可以使用两种语法格式，语法格式不同，他的文件的后缀名不同，据有scss和sass两种不同的后缀名
    scss：支持css3语法格式，所有的css3语法都通用
    sass：是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性。

sass嵌套规则

sass的嵌套规则

    .wp {
        background:#f60;
        h2 { color:#333 }
        p { color:#333 }
    }

以上规则最终会被编译为后代选择器的形式，因此嵌套不宜过深
属性嵌套:凡是可以进行拆分的属性都可以使用属性嵌套，注意属性名后面的( : )要和 {} 有空格分开

    border: {
    width: 2px;
    style: solid;
    color: #f00;
    }
    父选择器标识符 &,& 表示当前的父选择器

混合器

混合器作用，是把相同的css样式提取出来，单独设置成一个模块，使用方便
使用混合器 @mixin
语法 @mixin name {
css 样式代码
}
其中name就是混合器的名字，他是一个变量，命名规则同变量的命名规则
使用混合器
@include name; 通过@include 把混合器的名字引入到使用混合器的位置
复杂的混合器
混合器也可以接受参数

1.定义混合器

        @mixin name(arg1,arg2,arg3...) {
        css 样式代码
        }
()中的 arg 列表就是混合器的参数，由于它们只是形式上的参数，不具备任何意义，因此称为形参列表
        注意，参数本质也是变量因此需要 $ 开头

2.使用混合器

        @include name(val1,val2,val3,...);
        val列表，史诗剧的护具，因此称为实参列表
    形参和实参是一一对应的关系