简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > WEB前端学习作业-2019年9月3日20时
Blogger Information
Blog 7
fans 0
comment 0
visits 6292
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
WEB前端学习作业-2019年9月3日20时
huomou的博客
Original
489 people have browsed it

问题一：实例演示相邻选择器与兄弟选择器,并分析异同

  1. 相邻选择器实例：


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<style>
ul {
    margin: 0;
    padding-left: 0;
    border: 1px dashed red;
}


ul li {
    list-style-type: none;
    width: 40px;
    height: 40px;
    background-color: wheat;
    /*border: 1px solid black;*/

    text-align: center;
    line-height: 40px;

    border-radius: 50%;

    display: inline-block;

    box-shadow: 2px 2px 1px #888;
}

/*id选择器*/
#bg-blue {
    background-color: lightblue;
}
/*class选择器*/
.bg-green {
    background-color: lightgreen;
}

/*相邻选择器*/
#bg-blue + * {
    background-color: yellow;
}
	</style>
    <title>相邻选择器</title>
</head>
<body>
<ul>
    <li class="bg-green">1</li>
    <li id="bg-blue">2</li>
    <li class="bg-green">3</li>
    <li class="bg-green">4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
</body>
</html>

    运行实例 »

  2. 兄弟选择器实例：


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<style>
ul {
    margin: 0;
    padding-left: 0;
    border: 1px dashed red;
}


ul li {
    list-style-type: none;
    width: 40px;
    height: 40px;
    background-color: wheat;
    /*border: 1px solid black;*/

    text-align: center;
    line-height: 40px;

    border-radius: 50%;

    display: inline-block;

    box-shadow: 2px 2px 1px #888;
}

/*id选择器*/
#bg-blue {
    background-color: lightblue;
}
/*class选择器*/
.bg-green {
    background-color: lightgreen;
}

/*兄弟选择器*/
#bg-blue ~ * {
    background-color: yellow;
}
	</style>
    <title>兄弟选择器</title>
</head>
<body>
<ul>
    <li class="bg-green">1</li>
    <li id="bg-blue">2</li>
    <li class="bg-green">3</li>
    <li class="bg-green">4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
</body>
</html>

    运行实例 »

  3. 异同点：相邻选择器和兄弟选择器选中的都是往后的选择器，区别是相邻选择器选中的是之后一个选择器，而兄弟选择器选中的是往后的全部选择器。

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

  1. 实例：


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
	<style>

/*将每个div中的第三个子元素背景设置绿色*/
div :nth-child(3) {
    background-color: lightgreen;
}

/*将第三个p的背景设置黄色*/
p:nth-of-type(3) {
    background-color: yellow;
}
	
	</style>
</head>
<body>
<div>
    <p>海上生明月，</p>
    <li>天涯共此时。</li>
    <p>情人怨遥夜，</p>
    <p>竟夕起相思。</p>
</div>

<div>
    <li>灭烛怜光满，</li>
    <p>披衣觉露滋。</p>
    <li>不堪盈手赠，</li>
    <p>还寝梦佳期。</p>
</div>
</body>
</html>

    运行实例 »

  2. 异同点：

    如果关注点是位置: 用nth-child

    既关注位置, 又关注类型, 用 nth-of-type

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距padding的用法</title>
	<style>
.box1 {
    width: 400px;
    border: 1px solid black;
    background-color: lightgreen;
	margin-bottom:5px;
}

.box1 {
    padding: 50px;
    width: 298px;
}

/*宽度分离*/

.wrap {
    width: 400px;
}

.box2 {
    padding: 50px;
    background-color: lightblue;
    border: 1px solid black;
	margin-bottom:5px;
}

/*box-sizing*/
.box3 {
    width: 400px;
    box-sizing: border-box;
    padding: 50px;
    background-color: lightpink;
    border: 1px solid black;
}	
	</style>
</head>
<body>
<!--将图片显示在容器中间-->
<div class="box1">
    <img src="https://img.php.cn/upload/article/000/000/041/5d563f75d61e4358.jpg" alt="AI未来" width="300">
</div>

<!--宽度分离-->
<div class="wrap">
    <div class="box2">
        <img src="https://img.php.cn/upload/article/000/000/041/5d563f75d61e4358.jpg" alt="AI未来" width="300">
    </div>
</div>

<!--box-sizing-->
<div class="box3">
    <img src="https://img.php.cn/upload/article/000/000/041/5d563f75d61e4358.jpg" alt="AI未来" width="300">

</div>
</body>
</html>

运行实例 »

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

       1.1同级塌陷实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>maring同级塌陷</title>
	<style>
	.box1 {
	width:300px;
	height:300px;
	background:pink;
	margin-bottom:50px;
	}
	.box2 {
	width:300px;
	height:300px;
	background:green;
	margin-top:30px;
	}

	</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

运行实例 »

       1.2解决方案:margin同级塌陷问题产生于垂直方向，谁的值大以谁的为准，可以将上方的盒子的margin-bottom设置为最终需要的值，而下方margin-top的值不设置即可。

       2.1嵌套传递实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>maring嵌套传递</title>
	<style>
	.box1 {
	width:200px;
	height:200px;
	background:pink;
	}
	.box2 {
	width:100px;
	height:100px;
	background:green;
	margin-top:30px;
	}

	</style>
</head>
<body>
<div class="box1">
   <div class="box2"></div>
</div>
</body>
</html>

运行实例 »

       2.2解决方案：margin嵌套传递是指当父盒子中的子盒子设置margin-top时，会在父盒子上传递，解决方案就是不用子盒子的margin-top，直接在父盒子里使用padding-top即可。

       3.1自动挤压实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>maring自动挤压</title>
	<style>
    .box1 {
        width: 150px;
        height: 150px;
        background-color: lightblue;
    }

    /*上下各30px,左右自动挤压，居中显示*/
    .box1 {
        margin: 30px auto;
    }
	</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

运行实例 »

       3.2场景应用：可以让盒子在你需要的位置自动居中显示，非常常用。

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！