2018.12.6群组选择器,优先级,伪类选择器,盒模型(显示区域,布局)

一复习上节课内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>复习预习</title>
</head>
<body>
    <!-- 1.w3c架构 -->
    <!-- 结构层 > 布局层 > 内容层 -->

    <!-- 2.css三种引入 -->
    <!-- 行间式: 简单直接 -->
    <!-- 内联式: 可读性最强 -->
    <!-- 外联式: 高效开发 -->
    <!-- 没有优先级,逻辑下方的样式起作用(行间式一定是逻辑最下方) -->

    <!-- 3.三个基本选择器 -->
    <!-- 优先级: id选择器(#) > 类选择器(.) > 标签选择器(标签名) > 通配选择器(*) -->
    <!-- 多类名 class="d1 d2 d3"   .d1.d2.d3 -->

    <!-- 4.长度单位 px cm mm em vw in |  颜色: rgb() rgba() #FFFFFF -->
    
    <!-- 5.文本样式 -->
    <style type="text/css">
        div {
            font: 900 30px/100px '微软雅黑', '备用字体';        
            font-size: 50px;

            text-align: center;#居中对齐
            text-decoration: none;#去掉下划线
            text-indent: 2em;#向右靠缩进2个字符
            letter-spacing: 3px;#字母之间的间隔距离
            word-spacing: 100px;#单词之间的间距比如hello world
        }
    </style>
    <div>hello world</div>

    <!-- 6.display: -->
    <style type="text/css">
        abc {
            width: 200px;
            height: 200px;
            background-color: pink
        }
        abc {
            /*display: inline;

            /*display: block;*/

            display: inline-block;
        }
    </style>
    <!-- 自定义标签display默认值为inline -->
    <!-- inline:不支持宽高, 宽高由文本内容撑开, 只能嵌套inline标签, 同行显示 -->
    <!-- block:支持所有css样式, 默认有宽高(自定义后取自定义值), 能嵌套所有标签, 异行显示,abc如果没有设置宽高就找父集的宽高,比如abc没设置现在就找父集body的宽高,如果body没有再找上级 -->
    <!-- inline-block:支持所有css样式, 默认宽高内容撑开(也可以自定义), 不建议嵌套任意标签, 同行显示 -->
    <!-- 注:具有inline显示方式的标签, 当一行显示不下,会自动换行,lnline换不换行和父集的宽度有关系
    如果父集的宽度固定死了就算是inline模式也不会换行,比如现在abc宽度是200(6个abc)父集的宽度只要大于abc的总和
    1300px固定好了就不会换行 -->
    <abc>123</abc>
    <abc>456</abc>
    <abc>123</abc>
    <abc>456</abc>
    <abc>123</abc>
    <abc>456</abc>
    <style type="text/css">
        body {
            width: 1300px;
        }
    </style>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

组合选择器(群组,子代,后代,相邻,兄弟交集选择器)


1、群组选择器

    div, span, .red, #div {
        color: red;
    }

- 一次性控制多个选择器
- 选择器之间以,隔开，每一个选择器位均可以为任意合法选择器或选择器组合

2、子代(后代)选择器

    子代选择器用>连接
    body > div {
        color: red;
    }
    后代选择器用空格连接
    .sup .sub {
        color: red;
    }

- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系

3、相邻(兄弟)选择器

    相邻选择器用+连接
    .d1 + .d2 {
        color: red;
    }
    兄弟选择器用~连接
    .d1 ~ .d3 {
        color: red;
    }

- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系

4、交集选择器

    <div class="d" id="dd"></div>
    div.d#dd {
        color: red;
    }
    
    <div class="d1 d2 d3"></div>
    .d1.d2.d3 {
        color: red;
    }

四、组合选择器优先级

- 组合选择器优先级与权值相关，权值为权重和
- 权重对应关系

     选择器         权重  
      通配          1  
      标签         10  
     类、属性        100 
      id        1000 
  !important    10000

- 选择器权值比较，只关心权重和，不更新选择器位置
- 不同级别的选择器间不具备可比性：1个类选择器优先级高于n个标签选择器的任意组合
五、属性选择器

- [attr]：匹配拥有attr属性的标签
- [attr=val]：匹配拥有attr属性，属性值为val的标签
- [attr^=val]：匹配拥有attr属性，属性值以val开头的标签
- [attr$=val]：匹配拥有attr属性，属性值以val结尾的标签
- [attr*=val]：匹配拥有attr属性，属性值包含val的标签

选择器代码(群组,子代,后代,相邻,兄弟交集选择器)


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style type="text/css">
        /*群组选择器: 同时可以控制多个选择器*/
        /*#dd, div, #a {

        }*/
        /*.d { 起相同类名
            color: red;
        }*/
        /*语法: 逗号分隔,控着多个*/
        .d1, .d2, .d3 {
            color: orange
        }

        /*子代(后代)选择器: 根据父子结构控着目标子标签*/
        /*明确选择器书写顺序: 目标inner, 再确定修饰词(哪个父亲,多少个父亲,对于inner来说sub父亲,
        呢sub可以用子代选择器来控制inner,但是inner有很多的父集,只要是inner的父集都可以通过后代选择器
        来控制inner)*/
        /*优先级都一样谁再下方谁就起作用*/
        /*语法: 子代 >连接 */
        .sub > .inner {
            color: tan
        }
        /*语法: 后代 空格连接*/
        .sup .inner {
            color: cyan
        }
        .sup .sub > .inner {
            color: red
        }

        /*相邻(兄弟)选择器: 根据兄弟结构控制下方兄弟标签*/
        /*明确目标 => 添加修饰词*/
        /*语法: 相邻 +连结*/
        .ele2 + .ele3 {
            color: blue
        }
        /*语法: 兄弟 ~连接*/
        .ele1 ~ .ele3 {
            color: yellow
        }


        /*交集选择器: 一个标签有多种选择器修饰,通过多种修饰找到一个目标标签*/
        section#s.ss {
            color: green
        }

        /*注: 每一个选择器位均可以为三个基础选择器中任意一个*/
    </style>
</head>
<body>
    <!-- <div class="d1" id="dd"></div> -->
    <!-- .d${$$$}*3 -->
    <div class="d d1">001</div>
    <div class="d d2">002</div>
    <div class="d d3">003</div>
    
    <!-- .sup>.sub>.inner -->
    <div class="sup">
        <div class="sub">
            <div class="inner">inner</div>
        </div>
    </div>

    <!-- .ele${e$}*3 -->
    <div class="ele1">e1</div>
    <div class="ele2">e2</div>
    <div class="ele3">e3</div>

    <!-- (section.ss#s{块区域}+section.ss{块区域}+.ss{块区域}) -->
    <section class="ss" id="s">块区域</section>
    <section class="ss">块区域</section>
    <div class="ss">块区域</div>

</body>
</html>

属性选择器(代码)


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .d2 {
            color: red;
        }
        /*属性选择器权重 == class选择器权重*/
        /*有属性class的所有标签*/
        [class] {
            color: orange;
        }

        /*有属性class且值为d2的所有标签(值不影响权重)*/
        [class="d2"] {
            color: pink;
        }
        
        /*是div且class='d2',增加了权重*/
        div[class='d2'] {
            color: blue;
        }
        
        /*属性以什么开头: ^= */
        /*属性以什么结尾: $= */
        /*属性模糊匹配: *= */
        [class ^= 'he'] {
            color: yellow;
        }
        [class $= 'ld'] {
            color: tan;
        }
        [class *= 'ow'] {
            color: cyan;
        }
        [class][dd] {
            color: brown;
        }

    </style>
</head>
<body>
    <!-- div.d1>.d2 -->
    <div class="d1">00000
        <div class="d2">12345</div>
        <!-- dd与do为自定义属性 -->
        <div class="helloworld" dd do="do something">helloworld</div>
    </div>
</body>
</html>

三.复杂选择器优先级(代码)


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*两个类名的选择器 > 一个类名的选择器, 与位置无关*/
        .d4 .d5 {
            font-size: 40px;
        }

        .d5 {
            font-size: 20px;
        }
        /*了解: 属性选择器*/
        [aa*="b"] {
            font-size: 30px;
        }
        
        /*每个选择器位也可以替换为一个组合选择器*/
        body > .d1 .d3 .d5 {
            font-size: 50px;
        }
        /*.d1 div .d3 .d5 优先级等于 body > .d1 .d3 .d5, 谁在下谁起作用*/
        .d1 div .d3 .d5 {
            font-size: 100px;
        }

        #div {
            font-size: 200px;
        }
    </style>
</head>
<body>
    <!-- 优先级取决于 权重, 其实就是比较个数 -->
    <!-- 1.不同的修饰符(后代/兄弟/交集...)均不影响权重 -->
    <!-- 2.选择器的位置也不会影响权重 -->
    <!-- 3.权重只和个数有关 -->
    <!-- 4.id的权重无限大于class无限大于标签 -->
    <!-- 5.属性选择器的权重与类一样 -->
    <!--/*不同目录结构下*/
    /*1.根据选择器权值进行比较*/
    /*2.权值为标签权重之和*/
    /*3.权重: *:1 div:10 class:100 id:1000 !important:10000 */
    /*4.权值比较时,关心的是值大小,不关心位置与具体选择器名*/
    /*5.id永远比class大,class永远比标签大####*/
    /*注:控制的是同一目标,才具有可比性,而且比较的类别是要一样才有比较的价值就上面而言都是id才有比较数量的价值.如果id和class比较,不管多少class都比id的权重小*/-->
    <!-- 复习: 优先级来源(操作的是同一标签同一属性) -->
    <div class="d1">
        <div class="d2">
            <div class="d3">
                <div class="d4">
                    <div class="d5" aa="aba" id='div'>12345</div>
                    <div class="d5" aa="AAb">67890</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

四伪类选择器

!一般称为位置选择器如果都是div或者其他都是一个类名时候可以用这个选择器

1、a标签四大伪类

:link：未访问状态
:hover：悬浮状态
:active：活跃状态
:visited：已访问状态

2、内容伪类

:before：内容之前
:after：内容之后


:before, :after {
    content: "ctn";
}

3、索引伪类

:nth-child(n)：位置优先，再匹配类型
:nth-of-type(n)：类型优先，再匹配位置

v_hint：值可以为位置数，也可以为2n、3n...，代表2的倍数，3的倍数，且位置数从1开始

4、取反伪类

:not(selector)：对selector进行取反第啊#not(:nth-child(2))

伪类选择器代码


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
        /*a标签的四大伪类*/
        /*操作的是a,伪类是修饰词,不影响优先级*/
        /*链接的初始状态(未被访问过)*/
        /*如果link前面没加修饰词就是*通配选择器全部更改,前面可以写标签名,类,id...*/
        a:link {
            color: green
        }
        /*链接被鼠标悬浮用了hover后color的颜色就是鼠标放上去后字体会变成的颜色*/
        a:hover {
            color: yellow;
            /*鼠标样式鼠标有很多的样式等待wait(圈圈)等样式pointer是手的样式*/
            cursor: pointer;
        }
        /*链接处于激活状态(鼠标按下),鼠标按下去会变成的颜色*/
        a:active {
            color: red;
        }
        /*链接已被访问过,被访问过后变成的颜色*/
        a:visited {
            color: #ccc
        }
        
        /*设置初始状态*/
        .box {
            width: 200px;
            height: 200px;
            background-color: red
        }
        /*再确定第二状态*/
        .box:hover {
            background-color: yellowgreen;
            cursor: pointer;
        }
        .box:active {
            background-color: greenyellow
        }
    </style>

    <style type="text/css">
        section {
            width: 100px;
            height: 100px;
            background-color: orange
        }

        /*一般称为位置选择器如果都是div或者其他都是一个类名时候可以用这个选择器
        同一结构下的第几个: 先确定位置再匹配类型,
         body里的a,div也是同一结构.所以下面的section位置为3,4,5*/
        section:nth-child(3), section:nth-child(5) {
            background-color: green
        }

        /*同一结构下的某选择器的第几个: 先确定类型再匹配位置*/
        section:nth-of-type(1), section:nth-of-type(3) {
            background-color: cyan
        }
        
        /*取反如果类去反直接写.ss没有冒号*/
        section:not(:nth-of-type(2)) {
            background-color: black
        }
    </style>
</head>
<body>
    <!-- 该同一结构: a div section*3 div -->
    <a href="https://www.baidu.com">前往你的家</a>
    <!-- 普通标签均可以使用 :hover :active :cursor: pointer;-->
    <div class="box"></div>

    <section></section>
    <section class="ss"></section>
    <section></section>

    <div>
        <!-- 该同一结构: a i b -->
        <a href="">123</a>
        <i></i>
        <b></b>
    </div>

</body>
</html>

五盒模型

一、盒模型概念

广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签
侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）
盒模型组成：margin + border + padding + content

v_hint：content = width x height

二、盒模型成员介绍

1、content

通过设置width与height来规定content
块级标签可以设置自身宽高，默认宽为父级宽(width=auto)、高为0，高度可以由内容决定
内联标签不可以设置自身宽高，默认宽高均为0，宽高一定由内容决定

2、border

border(边框)由border-width(宽度)、border-color(颜色)、border-style(风格)三部分组成
border成员：border-left、border-right、border-top、border-bottom
border-width成员：border-left-width、border-right-width、border-top-width、border-bottom-width
border-color成员：border-left-color、border-right-color、border-top-color、border-bottom-color
border-style成员：border-left-style、border-right-style、border-top-style、border-bottom-style

风格	解释
solid	实线
dashed	虚线
dotted	点状线
double	双实线
groove	槽状线
ridge	脊线
inset	内嵌效果线
outset	外凸效果线

v_hint：border满足整体设置语法，eg：border: 1px solid red;

3、padding

padding成员：padding-left、padding-right、padding-top、padding-bottom
padding整体设置

值得个数	方位
1	上下左右
2	上下 \| 左右
3	上 \| 左右 \| 下
4	上 \| 右 \| 下 \| 左

4、margin

margin成员：margin-left、margin-right、margin-top、margin-bottom
margin整体设置

赋值个数	方位
1	上下左右
2	上下 \| 左右
3	上 \| 左右 \| 下
4	上 \| 右 \| 下 \| 左

三、边界圆角

border-radius

border-radius成员

成员	解释
border-top-left-radius	左上方位
border-top-right-radius	右上方位
border-bottom-left-radius	左下方位
border-bottom-right-radius	右下方位

单方位设置

赋值个数(值类型：长度 \| 百分比)	解释
1	横纵
2	横 \| 纵

按角整体设置

赋值个数(值类型：长度 \| 百分比)	解释
1	左上右上左下右下
2	左上右下 \| 右上左下
3	左上 \| 右上左下 \| 右下
4	左上 \| 右上 \| 右下 \| 左下

分向整体设置

格式	解释
1 / 1	横向 \| 纵向

四、其他相关属性

max|min-width|height
overflow

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

display

值	描述
inline	内联
block	块级
inline-block	内联块

盒模型基本介绍代码


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style type="text/css">
        /*content=width x height, 颜色由背景色填充, 参与盒子显示*/
        .box {
            width: 100px;
            height: 100px;
            background-color: orange
        }
        /*padding, 颜色由背景色填充, 参与盒子显示(决定盒子的大小)*/
        .box {
            padding: 50px;
        }
        /*border, 颜色由自身规定, 参与盒子显示(决定线的类型)
        三个参数第一个是线条的大小,第二个是线的类型比如(虚线,实线),第三个是线的颜色*/
        .box {
            /*transparent 透明*/
            border: 10px solid black;
        }
        /*margin, 没有颜色, 不参与盒子显示, 决定盒子布局(位置信息)*/
        .box {
            margin: 200px;
        }
        /*如果改成inline页面里面的值都在,但是值都不起作用.margin左右的值还起作用,上下的值不起作用
        另外inline默认也是不支持高度和宽度的,border,padding还起作用*/
        /*  .box{
            display: inline;
        }*/
    </style>
</head>
<body>
    <!-- 什么是盒模型: 通配选择器可以控制的页面标签都是盒模型(一般我们操作的是块级标签) -->
    <!-- 为什么要学盒模型: 页面书写的标签初始状态级别都不能满足显示要求,需要再次修改,修改的就是盒模型的各个属性 -->
    <!-- 盒模型组成部分: margin(外边距) + boder(边框) + padding(内边距) + content(内容) -->
    <!-- 注意点: 1.四部分均具有自身独立区域 2.content=width x height,是子标签或子内容的显示区域  -->
    <!-- margin + border + padding + content(width x height)
    都具有自身区域
    margin参与布局,不参与盒子显示,其他都参与盒子显示
    border颜色自身定义,padding和content颜色有背景色填充 -->    
    <div class="box">123</div>
</body>
</html>

五.1_盒模型显示区域

显示区域代码


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒模型显示区域</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .inner {
            width: 50px;
            height: 50px;
            background-color: red;
        }
        
        /*padding*/
        /*1.第一个方位为上, 顺时针确定赋值顺序 => 上右下左*/
        /*2.少于四个值, 赋值依旧遵循规则1, 无值方位找对边*/
        /*3.一个值时, 控制上下左右*/
        .box {
            /*padding: 10px 20px 30px 40px;*/
            /*padding: 10px 20px;*/
            
            /*将子内容往内挤*/
            padding-top: 75px; 
            padding-left: 75px;
            /*还有保证自身显示区域不变 => 手动缩小content*/
            /*calc()做css运算, 需要带上单位*/
            /*inner本身大小是50,盒子还剩150,上下左右各剩75.然后padding向下移动75向右移动75,然后图形的面积被padding增加了,
            然后再减自己本身的右边和下面的75px,这样和增加的padding面积加载一起又变成了200px.inner也居中显示了*/
            height: calc(200px - 75px);
            width: calc(200px - 75px);

        }
        /*box控制位置, inner控制内容*/
        /*盒子宽高50.然后文本内容行高设置50再选择居中*/
        /*inner里面的文本内容居中只要行高和inner盒子大小一样就可以再inner盒子里面居中,
        但是inner盒子要再.box里面居中要用上面padding方法来进行移动*/
        .inner {
            text-align: center;
            line-height: 50px;
        }

        /*border: 颜色 宽度 样式 (顺序随意)*/
        .box {
            /*solid dashed*/
            border-style: inset;
            border-color: blue;
            border-width: 50px;

            /*整体赋值*/
            border: 30px solid #af3;

            /*有些标签默认有边框,如何清除边框,
            清楚上面设置的border样式变成none*/
            /*border: 0;*/
            border: none;
        }
        .jh {
            /*border是由上下左右合成各占一个三角形面积*/
            /*利用盒模型形成三角形*/
            /*将其他边颜色设置为透明色(transparent)*/
            border-top: 50px solid red;
            /*border-right: 50px solid orange;*/
            /*border-bottom: 50px solid pink;*/
            border-left: 50px solid blue;
            width: 0;
            height: 0;
        }
    </style>
</head>
<body>
    <!-- content + padding + border -->
    <div class="box">
        <div class="inner">1</div>
    </div>

    <div class="jh"></div>
</body>
</html>

五.2 盒模型布局


/*只有margin-left|top用于完成自身布局*/
完成自身布局: margin-left | margin-top
下移|右移: top取正值|left取正值
上移|左移: top取负值|left取负值
/*margin-right|bottom影响兄弟布局*/
作为兄弟,上盒子的垂直布局会影响下盒子垂直方位, 上盒子的结束位置为下盒子的开始位置
/*bottom会影响之下的兄弟, 往下挤*/
/*margin-bottom: 30px;*/#-30px可以挤进去
/*right会影响右方的兄弟, 往右挤*/
/*margin-right: 30px;*/
/*上下兄弟的距离取大值(一个bottom向下一个top向上) => margin-top的坑*
/左右2个盒子各3opx的话相隔就是60px
/*父子top取大值 => margin-top的坑(父级只与第一个子级联动)*/可以设置一个隔开来


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒模型布局</title>
    <style type="text/css">
        /*body默认有margin:8px, 做项目时一定会清除*/
        /*清除系统默认(不喜欢的)样式,该操作称之为 reset 操作*/
        body {
            margin: 0;
        }
        /*a标签的reset操作,大部分文件a标签颜色都是黑色*/
        a {
            color: black;
            text-decoration: none;
        }
        /*h1标签的reset操作*/
        h1 {
            margin: 0;
        }

        /*block盒子, 宽度自适应父级, 高度由子级撑开*/
        .box {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        .b1 {
            /*margin: 50px;*/
            margin-top: 50px;
            margin-left: 50px;
        }
        /*只有margin-left|top用于完成自身布局*/
        .b2 {
            /*水平居中: 在所在父级水平居中*/
            /*###把盒子用display:inlin或inline-block
            才会首text控制,text-align:center才可以控制*/
            /*auto自适应剩余空白区域*/
            /*margin-left: auto;*/
            /*margin-right: auto;*/

            /*实现居右50px*/
            margin-left: auto;
            margin-right: 50px;

            /*b2上移与b1并排*/
            /*margin-top: -100px;*/

        }
        
    </style>
    <style type="text/css">
        .up, .down {
            width: 100px;
            height: 100px;
            background-color: red;
            /*display: inline-block;*/
        }
        /*margin-right|bottom影响兄弟布局*/
        .up {
            /*bottom会影响之下的兄弟, 往下挤*/
            /*margin-bottom: 30px;*/
            /*right会影响右方的兄弟, 往右挤*/
            /*margin-right: 30px;*/

            margin-bottom: 30px;
        }
        .down {
            /*上下兄弟的距离取大值 => margin-top的坑*/
            margin-top: 30px;
        }
    </style>
    <style type="text/css">
        .sup {
            width: 200px;
            height: 200px;
            background-color: pink;
            /*margin-top: 0px;*/
            border-top: 0px;
        }
        .s{
            height: 1px;
        }
        .sub {
            /*父子top取大值 => margin-top的坑(父级只与第一个子级联动)*/
            width: 100px;
            height: 100px;
            background-color: brown;
            margin-top: 50px;*
        }
        /*拆散父子(第一个子)
        /*1.设置父级的border-top即可*/
        /*2.或者设置父级的padding-top即可*/
    </style>
</head>
<body>
    <!-- <a href="">123</a> -->
    <!-- <h1>123</h1> -->
    <div class="box b1"></div>
    <div class="box b2"></div>

    
    <div class="up"></div>
    <div class="down"></div>

    <div class="sup">
        <div class="s"></div>
        <div class="sub"></div>
    </div>
</body>
</html>

posted @ 2018-12-10 16:51 涛仔·· 阅读(558) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

赋值个数(值类型：长度 \| 百分比)	解释
1	左上右上左下右下
2	左上右下 \| 右上左下
3	左上 \| 右上左下 \| 右下
4	左上 \| 右上 \| 右下 \| 左下

涛仔··

2018.12.6群组选择器,优先级,伪类选择器,盒模型(显示区域,布局)

一 复习上节课内容

组合选择器(群组,子代,后代,相邻,兄弟交集选择器)

选择器代码(群组,子代,后代,相邻,兄弟交集选择器)

属性选择器(代码)

三.复杂选择器优先级(代码)

四伪类选择器

!一般称为位置选择器如果都是div或者其他都是一个类名时候可以用这个选择器

1、a标签四大伪类

2、内容伪类

3、索引伪类

v_hint：值可以为位置数，也可以为2n、3n...，代表2的倍数，3的倍数，且位置数从1开始

4、取反伪类

伪类选择器代码

五 盒模型

一、盒模型概念

v_hint：content = width x height

二、盒模型成员介绍

1、content

2、border

v_hint：border满足整体设置语法，eg：border: 1px solid red;

3、padding

4、margin

三、边界圆角

border-radius

四、其他相关属性

盒模型基本介绍代码

五.1_盒模型显示区域

显示区域代码

公告

一复习上节课内容

五盒模型