html、css入门笔记_006

6. CSS选择器？

    1. ID选择器   
            #elem{}      id="elem"
        注：
        1. ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
        2. 命名的规范，由字母、下划线、中划线、字母（并且第一个不能是数字）
        3. 驼峰写法 : searchButton (小驼峰)  SearchButton (大驼峰)  searchSmallButton
           短线写法：search-small-button
           下划线写法：search_small_button

    2. CLASS选择器
            .elem{}      class="elem"
        注：
        1. class选择器是可以复用的。
        2. 可以添加多个class样式。
        3. 多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
        4. 标签+类的写法
    
    3. 标签选择器(TAG选择器)
            div{}          <div></div>
           使用的场景：
            1. 去掉某些标签的默认样式时
            2. 复杂的选择器中，如 层次选择器

    4. 群组选择器(分组选择器)
            可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。

    5. 通配选择器

        *{  } ->  div,ul,li,p,h1,h2....{}    
        注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
        使用的场景：
            1. 去掉所有标签的默认样式时           

    6. 层次选择器

        后代  M N { }
        父子  M > N { }
        兄弟  M ~ N { }  当前M下面的所有兄弟N标签
        相邻  M + N { }  当前M下面相邻的N标签

    7. 属性选择器

        M[attr] {}    
        = : 完全匹配
        *= : 部分匹配
        ^= : 起始匹配
        $= : 结束匹配
        [][][] : 组合匹配

    8. 伪类选择器
        M:伪类{}
        :link       访问前的样式    ( 只能添加给a标签 )
        :visited    访问后的样式    ( 只能添加给a标签 )
        :hover      鼠标移入时的样式  (可以添加给所有的标签)
        :active     鼠标按下时的样式  (可以添加给所有的标签)

        注：
            一般的网站都只设置  
                a{}   ( link visited active )    a:hover{}

        :after、:before    通过伪类的方式给元素添加一段文本内容，使用content属性
        :checked、:disabled 、:focus 都是针对表单元素的   

        结构性伪类选择器
            nth-of-type()   nth-child()
            角标是从1开始的，1表示第一项，2表示第二项 | n值 表示从0到无穷大
            first-of-type
            last-of-type
            only-of-type

            nth-of-type()和nth-child()之间的区别
                type : 类型
                child : 孩子

7. CSS继承？
    文字相关的样式可以被继承
    布局相关的样式不能被继承 ( 默认是不能继承的，但是可以设置继承属性 inherit 值 )

8. CSS优先级？

    1. 相同样式优先级
        当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
    2. 内部样式与外部样式
        内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。
    3. 单一样式优先级
        style行间 > id > class > tag > * > 继承

        注：style行间 权重 1000
            id       权重 100
            class    权重 10
            tag      权重 1
    4. !important
        提升样式优先级，非规范方式，不建议使用。( 不能针对继承的属性进行优先级的提升 )
      
    5. 标签+类与单类
        标签+类 > 单类
        
    6. 群组优先级
        群组选择器与单一选择器的优先级相同，靠后写的优先级高。

    7. 层次优先级
        1. 权重比较
            ul li .box p input{}   1 + 1 + 10 + 1 + 1
            .hello span #elem{}    10 + 1 + 100

        2. 约分比较    
            ul li .box p input{}    li p input{}
            .hello span #elem{}      #elem{}

9. CSS盒子模型？

    组成 : content -> padding -> border -> margin
           物品        填充物     包装盒      盒子与盒子之间的间距

           content : 内容区域  width和height组成的

           padding : 内边距(内填充)
                只写一个值： 30px (上下左右)
                写两个值 : 30px 40px ( 上下、左右 )
                写四个值 : 30px 40px 50px 60px（上、右、下、左）

            单一样式只能写一个值：
                padding-left
                padding-right
                padding-top
                padding-bottom

            margin : 外边距(外填充)
                只写一个值： 30px (上下左右)
                写两个值 : 30px 40px ( 上下、左右 )
                写四个值 : 30px 40px 50px 60px（上、右、下、左）

            单一样式只能写一个值：
                margin-left
                margin-right
                margin-top
                margin-bottom
            注：
                1. 背景色填充到margin以内的区域 （不包括margin区域）    
                2. 文字在content区域添加。
                3. padding不能为负数，而margin可以为负数。

    box-sizing:
        盒尺寸，可以改变盒子模型的展示形态。
        默认值： content-box :  width、height -> content
        border-box : width、height -> content padding border

        使用的场景：    
            1. 不用再去计算一些值
            2. 解决一些100%的问题

    盒子模型的一些问题：
        1. margin叠加问题，出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。
        2. margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题。        

    扩展：
        1. margin左右自适应是可以的 ，但是上下自适应是不行的。( 如果想实现上下自适应的话，需要在第二大部分来进行学习 )
        2. width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。

10. 标签分类？

    按类型
        block : div、p、ul、li、h1 ...
            1. 独占一行
            2. 支持所有样式
            3. 不写宽的时候，跟父元素的宽相同
            4. 所占区域是一个矩形

        inline : span 、a、em、strong、img ...
            1. 挨在一起的
            2. 有些样式不支持，例如：width、height、margin、padding
            3. 不写宽的时候，宽度由内容决定
            4. 所占的区域不一定是矩形
            5. 内联标签之间会有空隙，原因：换行产生的

        inline-block : input、select ...
            1. 挨在一起，但是支持宽高

        注：布局一般用块标签，修饰文本一般用内联标签

    按内容
        Flow：流内容
        Metadata：元数据
        Sectioning：分区
        Heading：标题
        Phrasing：措辞
        Embedded：嵌入的
        Interactive：互动的
        （详情：https://www.w3.org/TR/html5/dom.html）

    按显示
        替换元素 :浏览器根据元素的标签和属性，来决定元素的具体显示内容。
            img、input ...
        非替换元素 : 将内容直接告诉浏览器，将其显示出来。
            div、h1、p ...