选择器，padding，margin概念2019年9月3日20时 - php中文网学习

Home > List of blog posts > 选择器，padding，margin概念2019年9月3日20时

Blogger Information

Blog 13

fans 0

comment 0

visits 9987

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<link rel="stylesheet" type="text/css" href="div.css">
	<style type="text/css">
		


ul{
	margin: 0;
	padding-left: 0;
	/* border: 1px dashed red; */
}

ul li{
	list-style: 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;
}

/* 类选择器 */
.bg-green{
	background-color: lightgreen;
}
/* 属性选择器 */
li[id="bg-blue"] {
	border: 2px solid red;
}
/* 群组选择器 */
#bg-blue, .bg-green {
	border: 2px solid blue;
}

/* 相邻选择器 */
#bg-blue + * {
	background-color: yellow;
}


	</style>
</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>

运行实例 »

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

兄弟选择器的相邻选择器相似，

#bg-blue ~ * {

background-color: yellow;

}

将+换成~，表示将这个ID名后边所有的元素都活着这个样式。

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<link rel="stylesheet" type="text/css" href="div.css">
	<style type="text/css">
		


ul{
	margin: 0;
	padding-left: 0;
	/* border: 1px dashed red; */
}

ul li{
	list-style: 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;
}

/* 类选择器 */
.bg-green{
	background-color: lightgreen;
}
/* 属性选择器 */
li[id="bg-blue"] {
	border: 2px solid red;
}
/* 群组选择器 */
#bg-blue, .bg-green {
	border: 2px solid blue;
}

/* 相邻选择器 */
#bg-blue + * {
	background-color: yellow;
}
/* 兄弟选择器 */
#bg-blue ~ * {
	background-color: yellow;
}
















	</style>
</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.实例演示nth-child()和:nth-of-type()选择器，并分析异同:

子选择器里nth-child() 获取的是()中第几个位置的元素，它只关注元素的位置

而nth-of-type()即关注元素的位置，也关注元素的类型。同样()里填写元素的位置，

元素位置单位从1开始，而不是从0.

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<link rel="stylesheet" type="text/css" href="div.css">
	<style type="text/css">
		


ul{
	margin: 0;
	padding-left: 0;
	/* border: 1px dashed red; */
}

ul li{
	list-style: 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;
}

/* 类选择器 */
.bg-green{
	background-color: lightgreen;
}
/* 属性选择器 */
li[id="bg-blue"] {
	border: 2px solid red;
}
/* 群组选择器 */
#bg-blue, .bg-green {
	border: 2px solid blue;
}

/* 相邻选择器 */
#bg-blue + * {
	background-color: -yellow;
}
#bg-blue ~ * {
	background-color: -yellow;
}

/* 伪类选择器 */
/* 第一个元素背景颜色设置为珊瑚色 */
ul :first-child {
	background-color: coral;
}
/* 最后一个元素背景颜色设置为珊瑚色 */
ul :last-child {
	background-color: coral;
}
/* 第6个元素背景颜色设置为珊瑚色 */
ul :nth-child(6) {
	background-color: coral;
}

/* 从后往前数第3个元素背景颜色设置为珊瑚色 */
ul :nth-last-child(3) {
	background-color: coral;
}
/* 最后一个类型以及位置元素背景颜色设置为珊瑚色 */
ul li:last-of-type {
	background-color: coral;
	color: white;
}
/* 第七个类型以及位置元素背景颜色设置为珊瑚色 */
ul li:nth-of-type(7){
	background-color: coral;
	color: white;
}


	</style>
</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>

运行实例 »

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

ul li:nth-of-type(7){

background-color: coral;

color: white;

}

如果前面使用了li 这种格式的文件类型，后边必须跟着type类型的样式格式！

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

下面的代码用的是box-sizing方式实现居中，以后都使用这种方式，首先设置图片的宽度，然后将盒子的大小按照图片的属性设置，盒子的宽度-padding值正好是图片的宽度。

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>内边距</title>
	<link rel="stylesheet" type="text/css" href="div.css">
	<style type="text/css">
	
.box1 {
	box-sizing: border-box;
	padding: 50px;
	background-color: pink;
	border: 1px solid black;
	width: 300px;
}

	</style>
</head>
<body>

<!-- 图片在中间显示 -->
<div class="box1">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567756551880&di=716e66d677ca8d10613c6a6196c23f17&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20140409%2FImg397934455.jpg" 
	alt="宝马" 
	width="200">
</div>

	

</body>
</html>

运行实例 »

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

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

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>外边距</title>
	<link rel="stylesheet" type="text/css" href="div.css">
	<style type="text/css">
	
.box1 {
	width: 100px;
	height: 100px;
	background-color: lightblue;
}

.box2 {
	width: 100px;
	height: 100px;
	background-color: lightcoral;
}

.box1 {
	margin-bottom: 30px;
}

.box2 {
	margin-top: 30px;
}



	</style>
</head>
<body>

<div class="box1"></div>
<div class="box2"></div>
	

</body>
</html>

运行实例 »

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

以上代码表示的是同级塌陷，在两个div之间有个30px的距离，而两个div的css都设置了之间的距离是30px，不过，

在实际中只实现了一个，同级塌陷只取较大值的属性，如果其中一个值(box2 margin-top 设置了50xp）则两个div之间的

距离就是50px，而这种情况，只出现在上下层级关系中。

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>外边距</title>
	<link rel="stylesheet" type="text/css" href="div.css">
	<style type="text/css">
	
.box1 {
	width: 200px;
	height: 200px;
	background-color: lightblue;
}

.box2 {
	width: 100px;
	height: 100px;
	background-color: lightcoral;
}

.box2 {
	margin-top: 50px;
}


	</style>
</head>
<body>

<div class="box1">
	<div class="box2"></div>
</div>

	

</body>
</html>

运行实例 »

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

以上代码演示的是嵌套传递，当父元素向下设置一个距离50像素时，子元素继承了父元素一起向下移动50px。

也是CSS中的特性，子元素继承父元素的css样式。

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>外边距</title>
	<link rel="stylesheet" type="text/css" href="div.css">
	<style type="text/css">
.box1 {
	width: 150px;
	height: 150px;
	background-color: lightcoral;
}
.box1 {
	margin-left:  auto;

}



	</style>
</head>
<body>

<div class="box1">

</div>

	

</body>
</html>

运行实例 »

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

当margin-left:设置成auto时，默认系统认为左侧能有多大给多大，所以，div元素会靠左右边

当margin-right设置成auto时，系统会认为右侧能有多大给多大，所以，div元素会靠左边

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>外边距</title>
	<link rel="stylesheet" type="text/css" href="div.css">
	<style type="text/css">
.box1 {
	width: 150px;
	height: 150px;
	background-color: lightcoral;
}
.box1 {
	margin-right:   auto;

}



	</style>
</head>
<body>

<div class="box1">

</div>

	

</body>
</html>

运行实例 »

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

当margin直接设置成auto时，div元素会居中对齐，系统认为，这个元素左右两侧都给最大值，所以会居中。

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>外边距</title>
	<link rel="stylesheet" type="text/css" href="div.css">
	<style type="text/css">
.box1 {
	width: 150px;
	height: 150px;
	background-color: lightcoral;
}
.box1 {
	margin:   auto;

}



	</style>
</head>
<body>

<div class="box1">

</div>

	

</body>
</html>

运行实例 »

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

如果需要垂直方向设置一个高度，margin:30px auto，div元素就能距离窗口上边距30px，并且居中对齐了。

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

phpstudy与vscode的安装与配置--2019年8月29日20时

2019-08-30 11:25:59