zoukankan html css js c++ java

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 {
             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 {
             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 {
             200px;
            height: 200px;
            background-color: red
        }
        /*再确定第二状态*/
        .box:hover {
            background-color: yellowgreen;
            cursor: pointer;
        }
        .box:active {
            background-color: greenyellow
        }
    </style>

    <style type="text/css">
        section {
             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 {
             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 {
             200px;
            height: 200px;
            background-color: orange;
        }
        .inner {
             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);
             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- 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;
             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 {
             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 {
             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 {
             200px;
            height: 200px;
            background-color: pink;
            /*margin-top: 0px;*/
            border-top: 0px;
        }
        .s{
            height: 1px;
        }
        .sub {
            /*父子top取大值 => margin-top的坑(父级只与第一个子级联动)*/
             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>

查看全文

相关阅读:
129 01 Android 零基础入门 02 Java面向对象 06 Java单例模式 03 饿汉模式 VS 懒汉模式 02 懒汉式的代码实现
 128 01 Android 零基础入门 02 Java面向对象 06 Java单例模式 03 饿汉模式 VS 懒汉模式 01 饿汉式的代码实现
 127 01 Android 零基础入门 02 Java面向对象 06 Java单例模式 02 单例模式概述 01 单例模式的定义和作用
 126 01 Android 零基础入门 02 Java面向对象 06 Java单例模式 01 设计模式概述 01 设计模式简介
 125 01 Android 零基础入门 02 Java面向对象 05 Java继承（下）05 Java继承（下）总结 01 Java继承（下）知识点总结
 leetcode-----121. 买卖股票的最佳时机
 leetcode-----104. 二叉树的最大深度
 Json串的字段如果和类中字段不一致，如何映射、转换？
Mybatis-Plus的Service方法使用之泛型方法default ＜V＞ List＜V＞ listObjs(Function＜? super Object, V＞ mapper)
模糊查询

原文地址：https://www.cnblogs.com/jutao/p/10097396.html

赋值个数(值类型：长度 \| 百分比)	解释
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_盒模型显示区域

显示区域代码

一复习上节课内容

五盒模型