相邻选择器和兄弟选择器
html代码
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>选择器</title> </head> <body> <ul> <li id="blue">1</li> <li class="green">2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <div> <p>php.cn</p> <li>中文网</li> <p>laravel</p> </div> <div> <p>西门</p> <li>东方</li> </div> </body> </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;
}
/*相邻选择器*/
/*#blue + * {
background-color: yellow;
}
兄弟选择器
#blue ~ * {
background-color: yellow;
}*/运行实例 »
点击 "运行实例" 按钮查看在线实例
nth-child()和:nth-of-type()选择器
css文件
实例
/*伪类：子元素选择器*/
ul :first-child {
background-color: coral;
}
ul :last-child {
background-color: coral;
}
ul :nth-child(6) {
background-color: coral;
}
/*倒数*/
ul :nth-last-child(3) {
background-color: coral;
}
/*伪类：类型选择器*/
ul li:first-of-type {
background-color: darkorange;
color: white;
}
ul li:last-of-type {
background-color: darkgreen;
color: white;
}
ul li:nth-of-type(3) {
background-color: darkblue;
color: white;
}
/*关注点是位置，使用nth-child*/
/*关注点是类型和位置，使用nth-of-type(冒号前需要添加类型)*/运行实例 »
点击 "运行实例" 按钮查看在线实例
padding对盒子的影响和解决方案
html代码
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>调皮的内边距</title> <link rel="stylesheet" href="css/style3.css"> </head> <body> <!-- 将图片显示在容器中间 --> <div class="box1"> <img src="image/1.jpg" alt="picture1" width="300" height="300"> </div> <div class="wrap"> <div class="box2"> <img src="image/1.jpg" alt="picture2" width="300" height="300"> </div> </div> <div class="box3"> <img src="image/1.jpg" alt="picture3" width="300" height="300"> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css代码
实例
.box1 {
width: 400px;
border: 1px solid black;
background-color: lightgreen;
padding: 50px;
width: 300px;
}
.wrap {
width: 400px;
}
.box2 {
padding: 50px;
background-color: lightblue;
border: 1px solid black;
}
.box3 {
width: 400px;
box-sizing: border-box;
padding: 50px;
background-color: pink;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
margin的同级塌陷、嵌套传递、自动挤压
html代码
实例
运行实例 »<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>捉摸不定的外边距</title> <link rel="stylesheet" href="css/style4.css"> </head> <body> <!-- 同级塌陷 --> <div class="box1"></div> <div class="box2"></div> <!-- 嵌套传递 --><hr> <!-- 子元素的margin向父元素传递 --> <div class="box3"> <div class="box4"></div> </div> <!-- 解决嵌套传递 --> <!-- 将修改子元素的外边距改为修改父元素的内边距--> <!-- 因为会将父元素撑开，所以需要调整父元素的宽高或者设置父元素box-sizing:border-box; --> <!-- 自动挤压 --><hr> <div class="box5"></div> </body> </html>点击 "运行实例" 按钮查看在线实例
css代码
实例
.box1 { width: 100px; height: 100px; background-color: lightblue; margin-bottom: 30px; } .box2 { width: 100px; height: 100px; background-color: lightcoral; margin-top: 30px; } .box3 { width: 200px; height: 200px; background-color: lightblue; padding-top: 50px; height: 150px; } .box4 { width: 100px; height: 100px; background-color: lightcoral; /*margin-top: 50px;*/ } .box5 { width: 150px; height: 150px; background-color: lightcoral; margin: auto; /*margin-left: auto;*/ /*margin-right: auto;*/ }
运行实例 »点击 "运行实例" 按钮查看在线实例
总结
1、选择器：标签选择器(属性选择器)、id选择器、类(class)选择器、相邻选择器(+)、兄弟选择器(~)、子元素选择器(nth-child)、类型选择器(nth-of-type)
属性选择器：通过给标签选择器指定属性来选择指定的元素
群组选择器：同时给不同选择器选择的元素赋予相同的属性
子元素选择器：选择同一父类下的所有子类(标签)中的位置
类型选择器：选择同一父类下，同一类型(相同标签)的元素中的位置
2、padding内边距
内边距会将盒子撑大，需要调整盒子的宽高或者设置盒子的box-sizing: border-box;以盒子边框为界
3、margin外边距
同级塌陷：两个margin重叠，只会显示大的
嵌套传递：子元素的margin会传递到父元素上显示效果
解决方法：将修改子元素的外边距改为修改父元素的内边距
因为会将父元素撑开，所以需要调整父元素的宽高或者设置父元素box-sizing:border-box;
自动挤压：当设置margin为auto是，margin会尽可能占用可占用的位置