Please enable JavaScript.

Coggle requires JavaScript to display documents.

CSS （Cascading Style Sheets） (选择器 (12.属性选择器 ([attribute=value]CSS2 …

- - - - 作用：规定文字样式的属性
      - 取值：
        
        normal:正常的，默认就是正常的
        
        itailc：倾斜的
      - 快捷键：
        
        fs font-style:italic
        
        fsn font-style:normal
    - - 作用：规定文字粗细的属性
      - 取值：
        
        bold 加粗
        
        bolder 比加粗还要粗
        
        lighter细线，默认就是细线
        
        100-900之间整百的数字
      - 快捷键：
        
        fw font-weight:；
        
        fwb font-weight:bold；
        
        fwbr font-weight:bolder；
    - - 作用：规定文字大小的属性
      - 取值：任意像素值
      - 快捷性
        
        fz font-size:;
        
        fz30 font-size:30px;
      - 注意点：通过font-size设置大小一定要带单位，也就是一定要写PX
    - - 作用：规定文字字体的属性
      - 取值：电脑中的任意字体
      - 快捷键
        
        ff font-family:;
      - 注意点
        
        如果取值是中文，需要用双引号或单引号括起来
        
        设置的字体必须是用户电脑里面已经安装的字体
    - - 1.如果设置的字体不存在，那么系统会使用默认字体显示
      - 2.如何设置备用字体格式：font-family:"字体1”，"字体2”.....；
      - 3.如何给中文和英文分别设置独立字体
        如果想给界面中的英文设置独立字体，那么英文的字体比u写在中文的前面
    - - 格式：font：style weight size family;
      - 例如：font：itailc bold 10px "微软雅虎"；
      - 注意点
        
        1.这种缩写格式中有的属性可以省略
        
        style可以省略
        
        weight可以省略
        
        2.在这种缩写格式中style 和weight的位置可以调换
        
        3.这种缩写格式中有的属性不可以省略的
        
        size不可以省略
        
        family 不可以省略
        
        4.size和family的位置不可以随便调换的
        size一定要写在family的前面，而且size和family必须写在所有属性的最后面。
  - - - 作用：给文本添加装饰
      - 格式：text-decoration：underline；
      - 取值
        
        underline下划线
        
        line-through 删除线
        
        overline 上划线
        
        none什么都没有，最常见的用途就是用于去掉超链接的下划线
      - 快捷键
        
        td text-decoration:none;
        
        tdu text-decoration:underline;
        
        tdl text-decoration:line-through;
        
        tdo text-decoration:overline;
    - - 作用：设置文本水平对齐方式
      - 格式：text-alingn:right;
      - 取值
        
        left左
        
        right右
        
        center 居中
      - 快捷键
        
        ta text-align：left
        
        tar text-align：right；
        
        tac text-align:center;
    - - 作用：设置文本缩进
      - 格式：text-indent：2em；
      - 取值：2em；其中em是表示字符
      - 快捷键
        
        ti text-indent：；
        
        ti2e text-indent:2em;
  - - - 英文单词
        
        一般情况下常见的颜色都会有对应的英语单词，但是单词能够表达的颜色是有限制的，也就是说不是所有的颜色都可以用单词来表示
      - RGB
        
        rgb其实就是三原色，其中r红色g绿色b蓝色
        
        格式：rgb：（0，0，0）
        
        取值范围：0-255
      - RGBA
        
        和rgb一样就加多了一个A
        
        A代表透明度，取值是0-1，值越小就越透明
      - 十六进制
        
        1.十六进制本质就是RGB
        
        2.十六进制中是通过每个两位数来表示一个颜色
        例如：#ffffff,就是白色，分别为255，255，255
- - - - 1.标签选择器选中的是当前界面的所有标签，而不能单独选中某一个标签
      - 2.标签选择器无论标签藏多深都能选中
      - 3.只要是HTML中的标签就可以作为标签选择器（h/a/img/ul/ol/dl/input）
  - - - 1.每个HTML标签都有一个属性叫做ID属性，也就是说每一个标签都可以设置一个ID属性
      - 2.在同一个界面中id的名称不可以重复
      - 3.在编写id选择器时一定要在id名称前面加一个#号
      - 4.id名称是有一定的规范的
        
        id名称只能有字母/数字/下划线
        
        id名称不能以数字开头
        
        id名称不能是HTML标签的名称
  - - - 1.每个HTML标签都有一个叫做CLASS的属性，也就是说每一个标签都是可以设置类名的
      - 2.在同一个界面当中class是可以重复的
      - 3.在编写class选择器的时候前面一定要加上一个.号
      - 4.类名的命名规范和id的命名规范一样的
      - 5.类名就是专门用来设置css样式的
      - 6.在HTML中每一个标签可以同时绑定多个类名
      - 正确写法：
        <标签名称 class=“类名1 类名2 ...”>
        错误写法：
        <标签名称 class=“类名1”class=“类名2”>
  - - - id相当于人的身份证号码不可重复使用
        class相当于人的姓名可以重复使用
      - 一个HTML标签只能绑定一个ID名称
        一个HTML标签可以绑定多个CLASS名称
    - - id选择器是#开头的
      - class选择器是.开头的
    - - 一般情况下ID选择器是给JS使用的，排除特殊情况，否则不要用id选择器设置样式。
  - - - 1.后代选择器必须用空格隔开
      - 2.后代不仅仅是儿子，包括孙子，孙子的孙子，再后后面都可以选择得到
      - 3.后代选择器不仅仅可以使用标签名称，还可以用使用其他选择器
      - 4.后代选择器可以通过空格一直延续下去
  - - - 1.子元素选择器只会找到儿子，不会找到其他被嵌套的标签
      - 2/子元素选择器之间需要用>符号链接，并且不能有空格
      - 3.子元素选择器不仅仅可以使用标签名称，还可以使用其他选择器
      - 4.子元素选择器可以通过>符号一直延续下去
  - - - 1.后代选择器使用空格连接
        2.子元素选择器用>连接
      - 1.后代选择器会选中制定标签中，所有的特定后代标签
        2.子元素选择器只会选中指定标签中的，所有特定儿子标签
    - - 后代选择器和子元素选择器都可以使用标签名 id名称类名称作为
        选择器
      - 后代选择器和子元素选择器都可以通过各自的连接符一直延续下去
      - 例如：
        选择器1 选择器2 选择器3
        选择器1>选择器2>选择器3
  - - - 1.选择器个选择器直接没有任何连接符号
      - 2.选择器可以使用标签名称/id名称/class名称
      - 3.交集选择器仅仅作为了解，企业开发中并不多用
  - - - 1.并集选择器必须使用,来连接
      - 2.选择器可以使用标签名称/id名称/class名称
  - - - 作用：给选择器选中的后面紧跟的那个标签设置属性
      - 格式：
        选择器1+选择器2{属性：值；}
      - 注意点：
        
        1.相邻兄弟选择器必须通过+号连接
        
        2.相邻兄弟选择器只能跟选中紧跟其后的那个标签，不能选中被隔开的标签
    - - 作用：给选择器选中后面所有的特定标签设置属性
      - 格式：
        选择器1~选择器2{属性：值；}
      - 注意点
        
        1.通用兄弟选择器必须用~连接
        
        2.通用兄弟选择器选中的是制定选择器后面某个选择器中的所有标签，无论有没有被隔开都可以选中
  - - - 选择同级的第一个标签
        
        ：first-child
      - 选中同级的最后一个标签
        
        ：last-child
      - 选中同级别中第n个标签
        
        ：nth-child（n）
      - 格式
        选择器：xxx-child{属性：值；}
      - 选中同级别中的倒数第n个标签
        
        ：nth-last-child（n）
      - 选中父元素中唯一的某个标签
        
        ：only-child
    - - 选中同级别中同类型的第一个标签
        
        ：first-of-type
      - 选中同级别中同类型的最后一个标签
        
        ：last-of-type
      - 选中同级别中同类型的第n个标签
        
        ：nth-of-type（n）
      - 选中同级别中同类型的倒数第几个标签
        
        ：nth-last-of-type（n）
      - 选中父元素中类型唯一的某个标签
        
        ：only-of-type
      - 格式：
        选择器：xxx-of-type{属性：值；}
    - - 选中奇数标签
        
        odd
      - 选中偶数标签
        
        even
      - 选中满足公式的标签
        
        xn+y
  - - - 作用：根据制定属性的名称找到对应的标签，然后设置属性
      - 格式：
        选择器[属性=值]{属性：值；}
    - - 作用：找到指定属性并且取值等于vale的标签，然后设置属性
      - 格式：
        选择器[属性=值]{属性：值；}
      - 应用场景
        
        用于区分input属性
        
        input[type=password]{}<input type="text" name="" id=""><input type="password" name="" id="">
    - - 作用：找到属性的取值以value开头的标签，然后设置属性
      - 格式：
        选择器[属性|=值]{属性：值；}
      - 格式：
        选择器[属性^=值]{属性：值；}
      - 两者之间的区别
        
        CSS2中的只能找到value开头，并且value以-与其内容隔开的
        
        CSS3的只要是以value开头的都可以找到，无论有没有被-隔开
    - - 作用：找到属性的取值是以value结尾的标签然后设置属性
      - 格式：
        选择器[属性~=值]{属性：值；}
    - - 作用：找到属性的取值是包含value的标签，然后设置属性
      - 格式：
        选择器[属性~=值]{属性：值；}
      - 格式：
        选择器[属性*=值]{属性：值；}
      - 两者之间的区别
        
        CSS2中的只能找到独立的单词，也即是calue是被空格隔开的
        
        CSS3中的只要保护value就可以找到，无论有没有被隔开
  - - - 由于通配符选择器是设置界面上所有的标签的属性，所以在设置之前会遍历所有的标签，如果当前界面标签比较多，那么性能就会比较差。
- - - - 1.并不是所有的属性都是可以集成的，只有以COLOR/FONT-/TEXT-/LINE-开头的属性才可以集成
      - 2.在CSS的继承中不仅仅是儿子可以继承，只要是后代都可以继承。
      - 3.继承性中的特殊性
        
        a.标签的文字颜色和下划线是不能继承的
        
        b.h标签的文字大小是不能继承的
    - - 设置网页的一些共性信息，例如网页的文字颜色，字体，字体大小等内容
      - 例如：
        body{
        font-size:12px
        font-damily:"微软雅黑"
        color：#ffffff}
  - - - 直接选中就是指继承
        
        如果是简介选中，那么就是谁离目标标签比较近就听谁的
      - 相同选择器（直接选中）
        
        如果都是直接选中，并且都是同类型的选择器，那么就是谁写在后面就听谁的
      - 不同选择器（直接选中）
        
        如果都是直接选中，并且不是相同类型的选择器，那么就会按照选择器的优先级来层叠
        
        id>类>通配符>继承>浏览器默认
    - - 作用：当多个选择器混合在一起使用时，我们可以通过计算权重来判断谁的优先级别最高
      - 权重的计算规则
        
        1.首先先计算选择器中有多少个id，id多的选择器优先级最高
        
        2.如果id的个数一样，那么再看类名的个数，类名个数多的有限级别最高
        
        3.如果类名的个数一样，那么再看这个标签名称的个数，标签名称个数多的优先级别最高
        
        4.如果id个数一样，类名也一样，标签名也一样，那么久不会继续往下计算下去了，那么此时谁写在后面就听谁的
        
        注意点
        
        只有选择器是直接选中标签的才需要计算权重，否则一定会听直接选中的选择器
  - - - 1.！important只能用于直接选中，不能用于间接选中
      - 2.通配符选择器选中的标签也是直接选中的
      - 3.！important只能提升被置顶的属性的优先级，其他的属性的优先级不会被提升
      - 4.！important必须写在属性值的分号前面
      - 5.！important前面的感叹号是不能省略的
- - - - 作用：一般用于配合CSS完成网页的基本布局
    - - 作用：一般用于配合CSS修改网页中的一些局部信息
    - - 1.div会独立的占领一行，而span不会单独占领一行
      - 2.div是一个容器级的标签，而span是一个文本级的标签
    - - 1.容器级的标签中可以嵌套其他所有标签
      - 常见容器级标签：div h ul ol dl li dt dt dd ...
      - 2.文本级的标签中只能嵌套文字/图片/超链接
      - 常用文本级标签：span p buis strong em ins del
    - - 那些标签是容器级那些标签是文本级，我们不用可以去记忆，在企业开发中一般情况下要嵌套都是嵌套在div中，或者按照组标签的形式来嵌套
  - - - 块级元素会独占一行
      - 行内元素不会独占一行
      - 所有的容器级标签都是块级，文本级标签中除了P其他的大部分都是行内块级元素
    - - 1.块级元素
        
        独占一行
        
        如果没有设置宽度，那么默认大小和父元素一样宽
        
        可以设置宽高
      - 2.行内元素
        
        不会独占一行
        
        如果没有设置宽度，那么默认和父元素一样宽
        
        行内元素是不可以设置宽度和高度的
      - 3.行内块级元素
        
        不会独占一行
        
        可以设置宽高
  - - - block 块级
      - inline 行内
      - inlin-bolck 行内快级
    - - di display：inline
      - db display：bolck
      - dib display：inline-block
- - - - 具体单词
      - rgb
      - rgba
      - 十六进制
    - - bc background-color:#ffffff
  - - - 1.图片的地址必须放在url（）中，图片的地址可以是本地地址，可以是网络地址
      - 2.如果图片的大小没有标签的大小大，那么会自动在水平方向和垂直方向平铺来填充
      - 3.如果网页上出现了图片，那么浏览器会再次发送请求获取图片
    - - bi background-image:url();
  - - - repeat 默认，在水平和垂直都需要平铺
      - no-repeat 在水平和垂直都不需要平铺
      - repeat-x 只在水平方向平铺
      - repeat-y 只在垂直方向平铺
    - - 可以通过背景图片的平铺来降低图片的大小，提升网页的访问速度
    - - bgr background-repeat:
  - - - 1.具体的方位名称
        
        水平方向：left center right
        
        垂直方向：top center bottom
    - - 当图片比较大的时候，可以通过定位属性保证图片永远居中显示
    - - bp background-position：0 0；
    - - 同一个标签同时设置背景颜色和背景图片，如果颜色和图片同时存在，那么图片会覆盖颜色
  - - - background：背景颜色背景图片平铺方式关联方式定位方式；
    - - background属性中，任何一个属性都可以被省略
    - - bg+ background：#fff url（） 0 0 no-repeat；
  - - - scroll 默认值，会随着滚动条滚动而滚动
      - fixed 不会随着滚动条滚动而滚动
    - - ba bacjground-attachment:;
  - - - 将多张图片拼凑成一张图片
- - - - 边框就是环绕在标签周围的线条
    - - 同时设置四条边框
        
        格式：
        border：边框的宽度边框的样式边框的颜色；
        
        快捷键：
        bd+ broder：1px solid #000；
        
        注意点
        
        1.连续格式中颜色属性是可以省略的，默认值为黑色
        
        2.连写格式中样式不能省略，省略后就看不到边框了
        
        3.连写格式中宽度可以省略，省略之后可以看到边框
      - 分别设置四条边（按方向）
        
        格式：
        border-top:边框宽度边框样式边框颜色；
        border-right:边框宽度边框样式边框颜色；
        border-bottom:边框宽度边框样式边框颜色；
        border-left:边框宽度边框样式边框颜色；
        
        快捷键：
        bt+ border-top: 1px solid #000;
        br+ border-right: 1px solid #000;
        bb+ border-bottom: 1px solid #000;
        bl+ border-left: 1px solid #000;
      - 分别设置四条边（按照要素）
        
        格式：
        border-width：上左下右；
        border-style：上左下右；
        border-color：上左下右；
        
        注意点
        
        1.这三个属性的取值是按照顺时针来赋值。也就是按照上右下左的顺序来赋值
        
        2.这三个属性的取值省略的规律
        
        上右下左>上右下>左边的取值和右边一样
        
        上右下左>上右>左边的取值和右边一样下边的取值和上边的一样
        
        上右下左>上>全部的取值和上边的一样
      - 同时设置四条边（方向+要素）
        
        格式：
        border-top-width:5px;
        border-top-style:solid;
        border-top-color:red;
        border-right-width:5px;
        border-right-style:solid;
        border-right-color:red;
        border-bottom-width:5px;
        border-bottom-style:solid;
        border-bottom-color:red;
        border-left-width:5px;
        border-left-style:solid;
        border-left-color:red;
      - 注意点
        
        同一个选择器中后面的边框属性会覆盖前面的边框属性
        
        .box3{
        border:5px solid erd;
        border-right:5px addshed red
        }
  - - - 边框和内容之间的距离就是内边距
    - - 单独设置每条边
        
        格式：
        padding-top：；
        padding-right：；
        padding-bottom：；
        padding-left：；
      - 同时设置四条边
        
        格式：
        padding：上右下左；
        
        注意点
        
        1.三个属性的取值省略时的规律
        
        2.上右下左>上右下>左边的取值和右边一样
        
        3.上右下左>上右>左边的取值和右边一样下边的取值和上边的一样
        
        4.上右下左>上>全部的取值和上边的一样
    - - 1.给标签设置内边距之后，标签占有的宽度和高度会发生变化
      - 2.给标签设置内边距之后，内边距也会有背景颜色
  - - - 标签和标签的距离就是外边距
    - - 单独设置每条边
        
        格式：
        margin-top：；
        margin-right：；
        margin-bottom：；
        margin-left：；
      - 同时设置四条边
        
        格式：
        margin：上右下左；
      - 注意点
        
        1.三个属性的取值省略时的规律
        
        2.上右下左>上右下>左边的取值和右边一样
        
        3.上右下左>上右>左边的取值和右边一样下边的取值和上边的一样
        
        4.上右下左>上>全部的取值和上边的一样
    - - 1.外边距的那一部分是没有背景颜色的
      - 2.默认布局的“垂直方向上”外边距不会叠加，会出现合并现象，谁的外边距比较大就听谁的
      - 3.如果两个盒子是嵌套关系，那么设置了里面一个盒子顶部的外边距，外面一个盒子也会被定下来，如果外面的盒子不想被一起顶下来，那么可以给外面的盒子添加一个边框属性
      - 4.我们可以利用margin：0 auto ；让盒子自身水平居中
    - - taxt-align：center;是设置盒子中存储的文字/图片水平居中的
      - margin：0 auto；是让盒子自身水平居中
  - - - CSS盒子模型仅仅是一个形象的比喻，HTML中所有的标签都是盒子
      - CSS盒模型指那些可以设置宽度高度/内边距/外边距/边框的标签，HTML中所有的标签都可以设置这些属性，所以标签也叫做盒子
    - - 1.内容的宽度和高度
        就是通过width/height属性设置的宽度和高度
      - 2.元素的宽度和高度
        宽度=左边框+左内边距+width+右内边距+右边框
        高度同理可证
      - 3.元素空间的宽度和高度
        宽度=左外边框+左边框+左内边距+width+右内边距+右边框+右外边距
        高度同理可证
      - 规律
        
        1.增加了padding/border之后，元素的宽高也会发生变化
        
        2.增加了padding/border之后还想保持“元素的宽高”，那么久必须减去内容的宽高
  - - - content-box（默认取值）
        
        元素的宽高=边框+内边距+内容宽高
      - 2border-box
        
        元素的宽高=width/height的宽高
        
        超出width/height部分系统会自动减少内容宽高来适配
- - - - 浮动流只是一种排版方式，就是水平排版，他只能设置某个元素的左对齐或右对齐
      - 浮动流是一种“半脱离标准流”的排版方式
    - - 1.浮动流中没有剧中对其，也就是没有center这个取值
      - 2.在浮动流中是不可以是用margin：0 auto；
    - - 1.在浮动流中是不区分块级元素/行内元素/行内块级元素的无论是块级元素/行内元素/行内块级元素都可以水平排版
      - 2.在浮动流中无论是块级元素/行内元素/行内块级元素都是可以设置宽高的
      - 3.综上所述，浮动流中的元素和标准刘中的行内块级元素很像
    - - 脱标：脱离标准流
      - 当某个元素浮动之后，那么这个元素看上去就像被从标准流删除了一样，这个就是浮动元素脱标
      - 浮动元素脱标之后会有什么影响？
        
        如果前面一个元素浮动了，而后面一个元素没有浮动，那么这个时候前面一个元素就会盖住后面一个元素
- - - - 给前面的盒子设置高度
    - - 在企业开发中能不写高度酒不写高度，所以这种方式不常用
    - - .box1{background-color:red;height:50px;}
        .box2{background-color:red}
        ul{list-style:none;}
        .il01 {background-color:blue;}
        .il02 {background-color:green;}
        li{float:left}
      - <div cass="box1">
        <ul cass="ul01">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        </ul>
        </div>
        <div cass="box2">
        <ul cass="ul02">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        </ul>
        </div>
  - - - 给后面的盒子添加clear：both；
    - - 由于不能使用margin，所以不推荐使用
      - 使用clear：both之后margin属性会失效
    - - .box1{background-color:red;}
        .box2{background-color:red;clear:both;}
        ul{list-style:none;}
        .il01 {background-color:blue;}
        .il02 {background-color:green;}
        li{float:left}
      - <div cass="box1">
        <ul cass="ul01">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        </ul>
        </div>
        <div cass="box2">
        <ul cass="ul02">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        </ul>
        </div>
  - - - 外墙法
      - 在两个浮动的盒子之间添加一个额外的块级元素
    - - 外墙法中可以通过设置额外标签的高度来实现margin效果
      - 守护中大量使用了这个技术，但是由于需要添加大量无意义的标签，所以不推荐使用
    - - .box1{background-color:red;}
        .box2{background-color:red;}
        ul{list-style:none;}
        .il01 {background-color:blue;}
        .il02 {background-color:green;}
        li{float:left}
        .wall{clear:both;}
        .h20{height:20px;background-color:skyblue;}
      - <div cass="box1">
        <ul cass="ul01">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        </ul>
        </div>
        <div cass="wall h20"></div>
        <div cass="box2">
        <ul cass="ul02">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        </ul>
        </div>
  - - - 内墙法
      - 在前一个有浮动子元素的盒子中，最后一个浮动盒子之后添加一个额外的块级元素
    - - 内墙法会自动撑起盒子的高度，所以可以直接设置margin属性
      - 和外墙法一样需要添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦。
    - - .box1{background-color:red;}
        .box2{background-color:red;margin-top:20px;}
        ul{list-style:none;}
        .il01 {background-color:blue;}
        .il02 {background-color:green;}
        li{float:left}
        .wall{clear:both;}
      - <div cass="box1">
        <ul cass="ul01">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        </ul>
        </div>
        <div cass="wall "></div>
        <div cass="box2">
        <ul cass="ul02">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        </ul>
        </div>
  - - - 给前面的盒子添加overflow：hidden属性
        
        超出盒子范围的内容可以用 overflow: hidden;来隐藏
      - overflow：hidden的作用是清楚溢出盒子边框外的内容，但是由于overflow：hidden；会触发Block Formatting Contexts所以也可以清楚浮动
    - - 由于overflow：hidden可以撑起盒子的高度，所以可以直接设置margin属性
      - IE8以前不支持利用overflow：hidden来清除浮动，所以需要加上以恶搞*zoom：1；
      - *zoom：1；和_zoom:1的区别
        
        这个是hack写法，用来识别不同版本的IE浏览器
        
        “_”后面的属性只有IE6能够识别
        
        *后面的属性IE6 IE7能识别
    - - .box1{background-color:red;overflow:hidden;*zoom:1;}
        .box2{background-color:red;margin-top:20px;}
        ul{list-style:none;}
        .il01 {background-color:blue;}
        .il02 {background-color:green;}
        li{float:left;}
      - <div cass="box1">
        <ul cass="ul01">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        </ul>
        </div>
        <div cass="box2">
        <ul cass="ul02">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        </ul>
        </div>
  - - - 给前面的盒子添加一个伪元素来清除浮动
      - 原理和overflow一样
    - - 推荐使用
      - 本质上和内墙法一样，都是在最后添加了一个块级元素
    - - .cleaifix:after{
        content:"";
        display:block;
        height:0;
        visibility:hidden;
        clear:both;
        }
        .clearfix{
        *zoom:1;
        }
      - <div cass="box1 clearfix">
        <ul cass="ul01">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        </ul>
        </div>
        <div cass="box2">
        <ul cass="ul02">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        </ul>
        </div>
  - - - 给前面的盒子添加双伪元素来清除浮动
      - 原理和overflow一样
    - - 推荐使用
    - - .cfLbefore,.cf:after{
        content:"";
        display:table
        clear:both;
        }
        .cf{
        *zoom:1;
        }
      - <div cass="box1 cf">
        <ul cass="ul01">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        </ul>
        </div>
        <div cass="box2">
        <ul cass="ul02">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        </ul>
        </div>
- - - - 相对定位就是相对于自己以前在标准流中的位置来移动
    - - 1.相对定位是不脱离标准流的，会继续在标准流中占用一份空间
      - 2.由于相对定位是不脱标的，所以在相对定位中区分块级元素/行内元素/行内块级元素
      - 3.由于相对定位是不脱离标准的，所以相对定位的元素会占用标准流中的位置，所以当相对定位的元素设置margin/padding等属性时会影响到标准流的布局
      - 4.在相对定位中同一个方向上的定位属性只能使用一个
    - - 1.用于对元素进行微调
      - 2.配合绝对定位来使用
    - - margin属性用于定位前改变标准流的位置
      - 方向属性改变相对定位后的位置
  - - - 绝对定位就是相对于body或者某个定位流中的祖先元素来定位
    - - 1.绝对定位的元素是脱离标准流的，不会占用标准流中的位置
      - 2.由于绝对定位的元素是脱离标准流的，所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
      - 3.如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是整个网页的宽度和高度作为参考点
      - 4.一个绝对定位的元素会忽略祖先元素的padding
    - - 1.默认情况下所有的绝对定位的元素，无论有没有祖先元素，都会以body为参考点
      - 2.如果一个绝对定位的元素有祖先元素，并且祖先元素中有一个是定位流中的元素，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
      - 3.如果一个绝对定位的元素有祖先元素，并且祖先元素中有多是定位流中的元素，那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素作为参考点
    - - 1.用于对元素进行微调
      - 2.配合相对定位使用
    - - 1.当一个盒子绝对定位之后不能使用margin：0 auto；让盒子自身居中
      - 2.如果想让一个绝对定位的盒子自身居中，可以使用
        
        left:50%
        
        margin-left:盒子宽度的一半px；
  - - - 固定定位和前面学习的背景关联方式很像，背景关联方式可以让某个图片不随着滚动条滚动而滚动，而固定定位可以让某个盒子不随着滚动条的滚动而滚动
    - - 1.固定定位的元素是脱离标准流的，不占用标准流中的位置
      - 2.由于固定定位的元素是脱离标准流的，所以固定定位不区分块级元素/行内元素/行内块级元素
      - 3.I6不支持固定定位
    - - 1.网页对联广告
      - 2.网页头部通栏
  - - - 默认情况下标准流中的元素position属性就等于static,所以静态定位其实就是默认的标准流
    - - 一般用于配合JS清楚定位属性
  - - - 用于指定定位元素的覆盖关系（图层）
    - - 1.默认情况下定位的元素一定会覆盖住没定位的元素
      - 2.默认情况下写在后面的定位元素会盖住前面的定位元素
      - 3.默认情况下所有的元素的z-index值都为0，如果设置了元素的z-index值，那么谁比较大谁就显示在前面
      - 4.定位元素的从父现象
        
        父元素没有z-index值，那么子元素谁的z-index值大谁就盖住谁
        
        父元素z-index值不一样，那么父元素谁的z-index大谁就盖住谁
    - - 控制界面上的定位元素的覆盖关系，例如网页中后面的定位元素不能覆盖前面的导航条通栏。
- - - - 1.a标签的伪类选择器可以单独出现，也可以一起出现
      - 2.a标签伪类选择器如果一起出现，那么有严格的顺序，编写的顺序必须要遵守爱恨原则 love hate
      - 3.如果默认状态的样式和被访问过的状态的样式一样，那么可以缩写成以下格式，就可以设置link和visited的样式属性了
    - - a{
        color: chartreuse;
        }
        a:hover{
        color: aquamarine;
        }
        a:active{
        color: cornflowerblue;
        } #
    - - 1.在企业开发中编写a标签的伪类选择器最好写在标签选择器后面
        2.在企业开发中和a标签盒子相关的属性都写在标签选择器中（显示模式/宽度/高度/padding/maegin）
        3.企业开发中和a标签文字/背景相关的属性都写在伪类选择器中
- - - - transition-property:属性;
        
        作用就是告诉系统哪个属性需要执行过度效果
      - transition-duration: 时间（秒）;
        
        作用就是告诉系统过渡效果持续的时长
      - transition-timing-function: 值；
        
        的作用为告诉系统动画的运动速度
      - transition-delay: 时间（秒）；
        
        的作用就是告诉系统该动作需要延迟多少秒之后才执行
    - - 1.必须要有属性发生变化
      - 2.必须告诉系统哪个属性需要执行过渡效果
      - 3.必须告诉系统过渡效果的持续时长
    - - transition-timing-function: linear; （匀速）（默认值）
      - transition-timing-function: ease; （逐渐慢下来）
      - transition-timing-function: ease-in; （加速）
      - transition-timing-function: ease-out; （减速）
      - transition-timing-function: ease-in-out; （先加速后减速）
    - - 单个连写
        
        代码 transition: margin-left 5s linear 0s;
        
        transition: 过渡属性过渡时间运动速度延迟时间；
      - 多个连写
        （用逗号隔开）
        
        代码： transition: margin-left 5s linear 0s，margin-left 5s linear 0s;
        
        transition: 过渡属性过渡时间运动速度延迟时间，过渡属性过渡时间运动速度延迟时间；
    - - 1.给多个属性添加过渡效果，用逗号隔开
      - 2.连写的时候可以省略后面的两个参数，因为只要编写了前面的两个参数就已经满足了过渡三要素
      - 3.如果多个属性运动的速度/延迟的时间/持续时间都一样，那么可以简写为ransition: all 5s ;
    - - 1.不要管过渡，先编写基本界面
      - 2.修改我们认为需要修改的属性
      - 3.再回头给被修改属性的那个元素添加过渡即可
  - - - 作用：2D模块的转换
      - 取值：
        
        transform: rotate(45deg);
        
        旋转
        其中deg是单位代表多少度
        
        transform:translate(100px,0px);
        
        平移
        第一个参数：水平参数
        第二个参数：垂直参数
        
        transform: scale(0.5,1.5);
        
        缩放
        第一个参数：水平参数
        第二个参数：垂直参数
        
        注意点：
        如果取值是1，代表不变。
        如果取值大于1，代表需要放大
        如果取值小于1，代表需要缩小
        如果水平和垂直缩放都一样，那么可以简写为为一个参数
        例：
        transform: :scale(0.5);
        
        transform: rotate(45deg) translate(100px,0px) scale(0.5);
        
        综合
        1.如果需要进行多个转换，那么用空格隔开
        2.2D的转换模块会修改元素的坐标系，所以旋转之后再平移就不是水平的评议了
  - - - 形变中心点
        第一参数为水平方向
        第二参数为垂直方向
      - 取值模式
        
        具体像素
        
        百分比
        
        特殊关键字（left right center top bottom）
      - 注释
        
        默认情况下所有的元素都是以自己的中心点作为参考来旋转的
  - - - 作用：呈现近大远小的透视结构
      - 注意点：一定要注意,透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
    - - transform:rotateZ(45deg);
      - transform:rotateX(45deg);
      - transform:rotateY(45deg);
      - 默认情况下所有的元素都是围绕着Z轴旋转的
        想围绕哪个轴旋转，那么只需要在rotate后面加上该轴向的大写字母即可
  - - - 代码
        
        box-shadow: h-shadow v-shadow blur spread color inset;
      - 取值
        
        h-shadow ——水平偏移(取值为px，容许负值)
        
        v-shadow ——垂直偏移(取值为px，容许负值)
        
        blur —— 模糊度 (取值为px)
        
        spread ——阴影扩展(取值为px)
        
        color —— 颜色（不解释了，阴影默认颜色由盒子内容的颜色决定的）
        
        inset —— 内外阴影（内阴影为inset，默认为外阴影不设置即可）
    - - 代码
        
        box-shadow: h-shadow v-shadow blur colo;
      - 取值
        
        h-shadow ——水平偏移(取值为px，容许负值)
        
        v-shadow ——垂直偏移(取值为px，容许负值)
        
        blur —— 模糊度 (取值为px)
        
        color —— 颜色（不解释了，阴影默认颜色由文字的颜色决定的）
    - - 就是文字因为比盒子阴影少了两个参数，仅此而已
  - - - 取值
        
        0为全透明
        
        1为全显示
- - - - 过渡必须人为触发才可以执行动画
      - 动画不需要人为执行就可以出发动画
    - - 过渡和动画都是用来给元素添加动画的
      - 过渡和动画都是系统新增的一些属性
      - 过渡和动画都需要满足三要素才会有动画效果
  - - - 告诉系统执行动画的对象（取值用@keyframes自定义名称）
    - - 定义执行动画名称（内含有from{}属性和to{}属性；或者进度百分比去取值）
    - - 告诉系统多少秒之后再执行动画(取值单位为S/秒)
    - - 告诉系统动画执行的速度(取值单位为以下选项)
      - 取值
        
        linear 匀速
        
        ease 逐渐减速（默认）
        
        ease-in 加速
        
        ease-out 减速
        
        ease-in-out 先加速后减速
    - - 告诉系统动画执行次数（取值为数字或者用infinite无限）
    - - 告诉系统是否许需要执行往返动画（取值为normal（默认值）或alternate执行往返动画）
      - 注意点
        
        返程算一次执行次数
    - - 告诉系统当前的动画是否需要暂停（默认取值为running运行，paused为暂停）
    - - 指定动画等待状态和结束状态的样式
      - 取值：
        
        none（默认状态，不作任何改变）
        
        forwards（让元素的结束状态保持动画最后的一帧的状态）
        
        backwards(让元素等待状态的时候显示动画第一帧的样式)
        
        both（其实就是forwards和backwards的结合）
- - - - 具体像素
        
        background-size:100px 100px;
        第一个参数为宽度，第二个参数为高度
      - 百分比
        
        background-size:50% 50%;
        第一个参数为宽度，第二个参数为高度
      - 宽度等比拉伸
        
        background-size:auto 100px;
        auto为等比拉伸
      - 高度等比拉伸
        
        background-size:100px auto;
        auto为等比拉伸
      - cover
        
        background-size:cover;
        cover含义：
        1.告诉系统图片需要灯笔拉伸
        2.告诉系统图片需要拉伸到宽度和高度都填满元素
      - contain
        
        background-size:contain;
        contain含义：
        1.告诉系统图片需要灯笔拉伸
        2.告诉系统图片需要拉伸到宽度或高度都填满元素
  - - - padding-box ——从内边距开始显示
      - border-box ——从边框开始显示
      - content-box ——从内容区域开始显示
  - - - padding-box ——从内边距开始显示
      - border-box ——从边框开始显示
      - content-box ——从内容区域开始显示