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

首页 > 博客列表 > 2019.09.03作业 CSS选择器、盒模型

博主信息

博文 14

粉丝 1

访问量 14500

专题推荐

更多>

实例

<!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>

运行实例 »

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

批改状态：合格

老师批语：写得真不赖

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

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

2019-08-30 11:58:33