相邻选择器与兄弟选择器异同
<!doctype html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <link rel="stylesheet" href="Untitled-2.css"> </head> <body> <ul> <li>1</li> <li id="bg-blue">2</li> <li>3</li> <li id="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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
对应上面的HTML的CSS
相邻选择器跟兄弟选择器同样是选中临近的元素
不同之处在于相邻选择器只是选中临近的后面一个元素
而兄弟选择器是选中临近的所有同级元素
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;
}
#bg-blue + * {
background-color:yellow;
}
/*相邻选择器*/
#bg-green ~ * {
background-color:red;
}
/*兄弟选择器*/运行实例 »
点击 "运行实例" 按钮查看在线实例
nth-child() 和 :nth-of-type()选择器的异同
同样是指定选择，不同的是nth-child()是按指定顺序选择，而nth-of-type()是按指定类型选择
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;
}
ul :nth-child(6) {
background-color: coral;
}
ul li:nth-of-type(5) {
background-color: darkgreen;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
Padding对盒子的影响及解决方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style3.css"> <title>调皮的内边距padding</title> </head> <body> <!--将图片显示在容器中间--> <div class="box1"> <img src="static/images/girl.jpg" alt="小姐姐" width="200"> </div> <!--宽度分离--> <div class="wrap"> <div class="box2"> <img src="static/images/girl.jpg" alt="小姐姐" width="200"> </div> </div> <!--box-sizing--> <div class="box3"> <img src="static/images/girl.jpg" alt="小姐姐" width="200"> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
Padding对盒子的影响及解决方案：
padding会撑开盒子的大小
解决方法1：padding边距设置后，后面追加一个宽度设置回图片的宽度
方法2：宽度分离：通过增加一个中间层实现宽度分离，以下代码box2为中间层
方法3：box-sizing：包含padding边距的总宽
.box1 {
width: 300px;
border: 1px solid black;
background-color: lightgreen;
}
.box1 {
padding: 50px;
width: 200px;
}
/*宽度分离*/
.wrap {
width: 300px;
}
.box2 {
padding: 50px;
background-color: lightblue;
border: 1px solid black;
}
/*box-sizing*/
.box3 {
width: 300px;
box-sizing: border-box;
padding: 50px;
background-color: pink;
border: 1px solid black;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
同级塌陷
<!doctype html> <html> <head> <meta charset="utf-8"> <title>外边距marubg</title> <link rel="stylesheet" href="Untitled-2.css"> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
同级塌陷
第二个盒子box2的上外边距40px陷入到了第一个盒子box1的下外边距50px里面了，所有两个的相距只有50px
谁大以谁为准，需垂直方向，两个盒子同级排列
.box1{
width:100px;
height:100px;
background:lightblue;
}
.box2{
width:100px;
height:100px;
background:lightcoral;
}
.box1{
margin-bottom:50px;
}
.box2{
margin-top:40px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
嵌套传递
<!doctype html> <html> <head> <meta charset="utf-8"> <title>外边距marubg</title> <link rel="stylesheet" href="Untitled-2.css"> </head> <body> <div class="box3"> <div class="box4"></div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
嵌套传递
两个块级元素他们成嵌套关系的时候，子元素的margin会传递到父级元素
解决方法：设置父级元素的上内边距
.box3{
box-sizing:border-box
width:100px;
height:100px;
background:lightblue;
}
.box4{
width:100px;
height:100px;
background:lightcoral;
}
.box3{
padding-top:50px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
自动挤压
<!doctype html> <html> <head> <meta charset="utf-8"> <title>外边距marubg</title> <link rel="stylesheet" href="Untitled-2.css"> </head> <body> <div class="box5"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
自动挤压
当盒子的外边距上上右边下左设置为auto的时候，自动挤压，挤压到中间
.box5{
width:150px;
height:150px;
background:lightblue;
}
.box5{
margin:auto;
}运行实例 »
点击 "运行实例" 按钮查看在线实例