05display属性下,css选择器,层次选择器,伪类选择器，选择器优先级，盒模型

day05

01display属性

设置内联块 元素(行内块 元素)

display:inline-block;
它的本质是 对内显示 块标签属性，对外显示 行标签属性

需要谁横向排 inline-block给谁

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

原因： 两个内联块 元素之间键入了回车，回车也是一个字符，
他的大小跟父标签的 font-size有关
解决办法：
    1.去掉回车键
    2.设置他们父元素的 font-size大小为0

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

02基础选择器

1. 通配选择器

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

2. 标签名选择器

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

3. 类名选择器

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

4. id选择器

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

5. 群组选择器

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

    <style>
        /* 通配选择器 */
        *{
            color: #f66;
        }
        /* 标签名选择器 */
        div{
            border: 1px #f00 solid;
        }
        span{
            font-size: 30px;
            color: #f0f;
        }
        /* 类名选择器 */
        .mu-lan1{
            background: rgba(255, 0, 0, 0.3);
        }
        .wp{
            width: 200px;
            height: 200px;
            border: 1px #ccc solid;
        }
        /* id选择器 */
        #abc{
            font-size: 40px;
            color: #04be02;
        }
        #book{
            font-size: 80px;
            background-color: #ff0;
        }

        .sp{
            color: #00f;
        }
        /* 群组选择器 */
        #abc,div,.wp{
            background: rgb(79, 50, 50);
        }
    </style>

03层次选择器

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样式

    <ul class="ls">
        <li>世上<span>无难事</span></li>
        <li>世上<span>无难事</span></li>
        <li>世上无难事</li>
        <li class="f">世上无难事</li>
        <li>世上无难事</li>
        <li>世上无难事</li>
        <li>世上无难事</li>
        <li>世上无难事</li>
        <li class="m">世上无难事</li>
        <li>世<div>上无<p>难事</p></div></li>
    </ul>

<style>
        /* 后代选择器 */
        ul li {
            border: 1px #f00 solid;
        }
        ul span{
            font-size: 30px;
        }
        li p{
            background: #0ff;
        }
        li div{
            background: #04be02;
        }
        /* 父子选择器 */
        ul>li{
            background: #ccc;
        }
        ul>li>span{
            color: #04be02;
        }
        /* 兄弟选择器 */
        .f~li{
            height: 50px;
        }
        /* 相邻兄弟选择器 只有相邻的下一个有效果 */
        .f+li {
            height: 100px;
            color: #ff0;
        }
        .f+.m{
            height: 100px;
            color: #ff0;
        }
    </style>

04伪类选择器

a的伪类

伪类，是css系统创建好的内部的类，用来对标签的某一个时机设置样式
link: 初始时候的状态
visited: 点击之后的状态
hover： 鼠标悬浮时候的状态
active: 鼠标按下不松手时候的状态

顺序是 l->v->h->a(先爱后恨)

如：

a:link{
            color: #04be02;
        }
        a:visited{
            color: #f0f;
        }
        a:hover{
            color: #ff0;
            font-size: 40px;
            font-weight: bold;
            background: #ccc;
            text-decoration: none;
        }
        a:active{
            color: #f60;
        }

ie8以后，任何标签都可以添加 :hover 伪类

可以根据hover 触发 元素本身，以及通过元素能找到的元素 的变化

05选择器的优先级

什么时候需要考虑选择器的优先级

不同的选择器，同时作用于同一个标签元素，并且他们具有相同的
css属性设置，对该css属性设置不同的值
选择器优先级的强弱顺序：             (权重)
1.!important                      100000
2.行间样式，在标签上添加 style属性   10000
3.id选择器                          1000
4.类名选择器，伪类选择器，属性选择器   100
5.元素(标签名)选择器，伪元素 选择器    10
6.通配符选择器                        1
7.系统默认提供的css属性                0

假设后面的数字是权重的值，那么在比较的时候，只需要把选择器的
值相加，然后比较大小既是权重的大小
    如果他们的值相同， 后来者居上

06盒子模型⭐

盒模型 ：在html 中每一个标签都具有一个盒模型

盒模型的组成部分：
Content(内容)，padding(内边距)，border(边框)，margin(外边距)

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

设置内边距

    padding-top:num;设置上边距
    padding-right:num;设置右边距
    padding-bottom:num;设置下边距
    padding-left:num;设置左边距
合写：
    padding:上 右 下 左;
    左=右 上!=下
    padding:上 右 下;
    左=右 上=下
    padding:上 右;
    左=右=上=下
    padding:上;

如：

/* 分开设置padding */
            padding-top: 20px;
            padding-left: 60px;

            /* 合写 */
            padding:20px 30px 20px 60px ;

            padding: 20px 30px 30px;

            padding: 20px 30px;

            padding: 20px;