2019.09.03作业 CSS选择器、盒模型 - 作业

Home > List of blog posts > 2019.09.03作业 CSS选择器、盒模型

Blogger Information

Blog 14

fans 1

comment 0

visits 11712

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        ul {
            margin: 0;
            padding-left: 0;
            border: 2px dashed black;
            width: 600px;
        }
        
        ul li {
            list-style-type: none;
            width: 50px;
            height: 50px;
            background-color: white;
            border: 1px solid;
            text-align: center;
            line-height: 50px;
            border-radius: 50%;
            /* 将块元素转为内联块元素 */
            display: inline-block;
        }
        
        .brown-li {
            background-color: brown;
        }
        /* 相邻选择器 E+F：选择匹配的F元素，且紧位于匹配的E元素的后面的同级且匹配的F元素 */
        
        .white-li+* {
            /* 选取class属性为white-li的下一个元素，为其设置阴影。*为匹配所有元素，如果有需要可以指定元素类型  */
            box-shadow: 3px 3px 2px black;
        }
        /* 兄弟选择器 E~F：选择匹配的F元素，且位于匹配的E元素后的所有同级且匹配的F元素 */
        
        .brown-li~* {
            /* 选取class属性为brown-li后的所有匹配的元素，将他们的背景色设置为green。 */
            background-color: green;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <ul>
        <li class="white-li">1</li>
        <li>2</li>
        <li>3</li>
        <li class="brown-li">4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

二、实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同

1、nth-child(n)选择器

语法：E F:nth-child(n)

功能：选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0

2、nth-of-type(n)选择器

语法 E:nth-of-type(n)

功能:选择父元素内具有指定类型的第n个E元素*

总结：nth-child(n)选择器只关注父元素内子元素的索引号，适用于选取父元素的第n个元素。

nth-of-type(n)选择器不仅关注父元素内子元素的索引号，还关注子元素的类型，适用于选取父元素的第n个某类型的元素。

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        /* nth-child(n)选择器 语法 E F:nth-child(n) 
        功能:选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、
        可以是公式（2n+1）,而且n值起始值为1，而不是0.*/
        
        #box1 :nth-child(3) {
            /* 设置box1中第3个元素的背景色为aqua */
            background-color: aqua;
        }
        
        #box1 :nth-child(5) {
            /* 设置box1中第5个元素的背景色为aqua */
            background-color: lightcoral;
        }
        /* nth-child(n)选择器 语法 E:nth-of-type(n)
        功能:选择父元素内具有指定类型的第n个E元素*/
        
        #box2 p:nth-of-type(2) {
            /* 设置box2中第2个p类型标签的背景色为gray */
            background-color: gray;
        }
        /* 设置box2中第3个a类型标签的背景色为green */
        
        #box2 a:nth-of-type(3) {
            background-color: green;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div id="box1">
        <p>我是第1个box的第1个元素</p>
        <a href="">我是第1个box的第2个元素</a>
        <p>我是第1个box的第3个元素</p>
        <p>我是第1个box的第4个元素</p>
        <a href="">我是第1个box的第5个元素</a>
        <a href="">我是第1个box的第6个元素</a>
    </div>
    <div id="box2">
        <p>我是第2个box的第1个p元素</p>
        <p>我是第2个box的第2个p元素</p>
        <p>我是第2个box的第3个p元素</p>
        <a href="">我是第2个box的第1个a元素</a>
        <a href="">我是第2个box的第2个a元素</a>
        <a href="">我是第2个box的第3个a元素</a>
    </div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

三. 实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing

不设置padding属性时，padding值为0，元素的宽度与高度为content的尺寸，设置padding时，元素的总宽和高为content的尺寸加padding的值，导致盒模型撑大。想解决此问题，可以通过3种常见的方法：

1、改变尺寸：把content的宽和高分别减去padding×2；

2、宽度分离：在此盒模型外在加一个盒模型，高度和宽度设置为需要的尺寸，此时在内部盒模型添加padding值时，由于父元素尺寸没有改变，内部元素尺寸不变；

3、设置box-sizing值为border-box：将box-sizing值设置为border-box时，设置的元素尺寸包含padding部分，故添加padding属性时，只会压缩content的尺寸，元素尺寸不变

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        /* 将box3放入box1使box3居中，此时在box1中直接添加padding，导致box1被撑大，四周都增加了50px */
        
        .box1 {
            width: 200px;
            height: 200px;
            padding: 50px;
            border: 3px solid black;
            background-color: brown;
        }
        /* 如果不想让盒子撑大，可以选用改变盒子大小，宽度分离和box-sizing三种种方式 */
        /* 1、改变盒子大小 */
        /* 将box3放入box2使box3居中，为了不使box2像box1一样被撑大，设置box2的宽高为100px */
        
        .box2 {
            width: 100px;
            height: 100px;
            padding: 50px;
            border: 3px solid black;
            background-color: chartreuse;
        }
        
        .box3 {
            width: 100px;
            height: 100px;
            padding: 0;
            margin: 0;
            border: 1px solid blue;
            background-color: yellow;
        }
        /* 2、宽度分离 */
        /* 将box3放入box4使box3居中，在box4外面套一个box5，宽高设为200px，
        当box4设置padding时，box5不会被改变，里面box4的整体大小也不会改变 */
        
        .box5 {
            width: 200px;
            height: 200px;
        }
        
        .box4 {
            padding: 50px;
            border: 3px solid black;
            background-color: lightcoral;
        }
        /* 3、box-sizing */
        /* 将box3放入box6使box3居中，将box6的box-sizing值设置为 border-box,
        此时box6的宽高会包含padding部分，添加padding属性时，box6大小不会改变*/
        
        .box6 {
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            padding: 50px;
            border: 3px solid black;
            background-color: darkgray;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div class="box1">
        <div class="box3">

        </div>
    </div>
    <br>
    <div class="box2">
        <div class="box3">

        </div>
    </div>
    <br>
    <div class="box5">
        <div class="box4">
            <div class="box3">

            </div>
        </div>
    </div>
    <br>
    <div class="box6">
        <div class="box3">

        </div>
    </div>

</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

四. 实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景

同级塌陷：同级块元素为垂直排列，同级块元素设置margin值时，生效的为两个元素垂直margin最大值。用于设置连个同级元素的边距

嵌套传递：单独为子元素设置margin值时，父元素也会受到margin值得影响，如果想为子元素在父元素内设置边距，应设置父元素的padding值，当同时设置父元素padding和子元素margin时，边距为子元素margin+父元素padding。用于设置嵌套元素的边距

自动挤压：元素的margin=auto时，元素居中；margin-left=auto时元素右对齐，margin-right=auto时元素左对齐。需要元素左对齐、右对齐或居中时可以使用。

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        /* 同级塌陷 当两个块级元素设置margin值时，元素垂直方向的margin间距为两个元素margin值得最大值 */
        
        .box1 {
            width: 100px;
            height: 100px;
            margin-bottom: 30px;
            background-color: red;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            margin-top: 20px;
            margin-bottom: 20px;
            background-color: green;
        }
        
        .box3 {
            width: 100px;
            height: 100px;
            margin-top: 50px;
            background-color: blue;
        }
        /* 嵌套传递:单独为内嵌元素设置margin值时，margin值会影响父元素，想为内嵌元素设置边距，应为父元素设置padding 
        此时，边距为内元素margin值+父元素padding值*/
        
        .box4 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        .box5 {
            width: 60px;
            height: 60px;
            margin-top: 20px;
            background-color: gray;
        }
        
        .box4 {
            padding-top: 30px;
        }
        /* 自动挤压：当设置margin为auto时，元素将自动居中，
        设置margin-left=auto时元素右对齐，设置margin-right=auto时元素左对齐 */
        
        .box6 {
            width: 100px;
            height: 100px;
            margin: auto;
            background-color: rgb(179, 36, 36);
        }
        
        .box7 {
            width: 100px;
            height: 100px;
            margin-left: auto;
            background-color: rgb(49, 141, 79);
        }
        
        .box8 {
            width: 100px;
            height: 100px;
            margin-right: auto;
            background-color: rgb(22, 183, 223);
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4">
        <div class="box5"></div>
    </div>
    <div class="box6"></div>
    <div class="box7"></div>
    <div class="box8"></div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：qualified

Teacher's comments：写得真不赖

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

2019.8.29作业 PhPstudy安装、启动及本地主机配置

2019-08-30 11:58:33