2W前端培训日记day05

display属性

    设置内联块元素（行内块元素）
    display：inline-block；
    他的本质是对内显示块标签属性，对外显示行标签属性

两个内联块元素之间的缝隙的处理方式

    原因：两个内联块之间键入了回车，回车也是一个字符，他的大小
    和父标签的font-size有关

解决办法：

    1  去掉回车键
    2  设置他们父元素的大小为0

    注意，字体大小是可以传递到子元素上的

body {
            font-size: 0px;
             display: inline-block;
            font-size: 20px;

css基础选择器

  基础选择器

1 通配选择器

        *表示通配符，可以匹配任何标签
        *{css内容}

2 标签名选择器

        E { CSS内容 }给所有标签名为E的元素设置css样式

3 类名选择器

        .类名 { css内容}
        使用的时候需要在标签上绑定class=“类名” 如果有多个类 名，使用空格
        隔开，类名最好不要超过五个 

4 id选择器

        #id名 {css内容}
        在一个页面中，id是唯一的，只能绑定在一个标签上，没 有同名的id

5 群组选择器

        如果多种选择器所表达的css内容是相同的，则可以把他 们
        写成群组选择器
        .wp, #abc, div {css内容}

/* 通配选择器 */
        * {
            color: hsl(76, 73%, 63%)
        }

        /* 标签名选择器 */
        div {
            border: 1px #f00 solid;
        }

        span {
            font-size: 30px;
            color: #f0f;
        }

        /* 类选择器 */
        .mu1 {
            background-color: rgba(200, 0, 0, 0.3);
        }

        .wp {
            height: 200px;
            width: 200px;
            border: 1px #ccc solid;
        }

        .sp {
            color: #00f;
        }

        /* id选择器 */
        #abc {
            font-size: 40px;
            color: #04be02;
        }

        #book {
            font-size: 80px;
            color: #ff0;
        }

        /* 群组选择器 */
        #abc,
        div,
        .wp {
            background-color: rgb(79, 50, 50);
        }

层次选择器

1 后代选择器

        E M {CSS内容} 通过E选择器 设置E 中的M选择器的css内容，M可以是E
        的子级，也可以是E后代中的某一个选择器

2 父子选择器

        E>M {CSS内容}通过E选择器找到E选择器的子级M选择器，设置css内容

3 兄弟选择器

        E>M{CSS内容} 通过E选择器找到该元素之后的所有选择器名为M的兄弟
        元素，并设置css样式

4 相邻兄弟选择器

        E+M {CSS内容}通过E选择器找到该元素之后的第一个兄弟元素M，并且对
        M设置css样式

伪类选择器

a的伪类

    伪类是css系统创建好的内部的类，用来对标签的某个时机设置样式
    link:初始时候的状态
    visited：点击之后的状态
    hover：鼠标悬浮时候的状态
    active：鼠标点击中的状态
    顺序是 l--v--h--a
    ie8以后，任何标签都可以添加 ：hover伪类
    可以根据hover 触发元素本身，以及通过元素能找到的元素的变化

 a:link {
            color: #04be02;
        }

        a:visited {
            color: #f0f;
        }

        a:hover {
            color: #ff0;
            font-size: 40px;
            font-weight: 700;
            background-color: #ccc;
            text-decoration: none;
        }

        a:active {
            color: #f60;
        }

        .wp {
            width: 200px;
            height: 200px;
            background-color: #f60;
            display: none;
        }

        .change {
            width: 200px;
            height: 200px;
            background-color: #f6f;
        }

        /* hover的用法 */
        .show:hover+div {
            display: block;
        }

        .show:hover span {
            display: none;
        }

        .change:hover {
            background-color: #f60;
        }

选择器的优先级

 什么时候需要考虑选择器的优先级
    不同的选择器，同时作用于同一个标签元素，并且他们具有相同的css属性设置，
    对该css属性设置不同的值
    选择器优先级的强弱顺序：
    1  ！important                             
    2  行间样式在标签上添加style属性          
    3  id选择器                                
    4  类名选择器，伪类选择器，属性选择器      
    5  元素（标签）选择器，伪元素选择器        
    6  通配符*                                 
    7  系统默认提供的css属性

    注意，两个拼接在一起的选择器权重大于他们任意选择器的权重，如果权重相同
    ，后来者覆盖

/* 具有类名txt的span标签 */
       span.txt {
           color: rgb(233, 5, 153);
       }

盒子模型

    盒模型：在html中每一个标签都具有一个盒模型
    盒模型的组成部分：content（内容），padding（内边距），
    border（边框），margin（外边距）

    contend  标签的元素内容，一般自定义宽和高，或者由子元素的内容
    撑开宽和高
    padding  设置元素内容到元素边框之间的距离
    border  指的是元素的边框
    margin  设置当前元素到相邻元素之间的距离

设置内边距

        padding-top：数值  设置上边距
        padding-right：    设置右边距
        padding-bottom     设置下边距
        padding-left       设置左边距
    合写：
        padding： 上 右 下 左；
        左=右  上！=下
        padding：上 右 下；
        左=右  上=下
        padding：上 右；
        左=右=上=下
        padding：上

 width: 200px;
            height: 200px;
            background-color: #f60;
            /* 分开设置padding */
            padding-top: 20px;
            padding-left: 60px;
            /* 合写 padding: 上 右 下 左；*/
            padding: 20px 30px 20px 60px;