Correction status:qualified
Teacher's comments:案例写是比较 丑, 但是实用, 简单, 一目了然, 符合我的风格
1、相邻选择器与兄弟选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> /* 相邻选择器 就是选择与当前选择器相邻的下一个选择器 */ .c1 + * { color:red; } /* 兄弟选择器 当前选择器后面的所有选择器(不包括当前选择器) */ .c1 ~ *{ color: blue; } </style> <body> <ul-> <li>苹果</li> <li id="c2">桔子</li> <li class="c1">芒果</li> <li>西瓜</li> <li>面包</li> <li>哈密瓜</li> <li>草莓</li> </ul-> </body> </html>
点击 "运行实例" 按钮查看在线实例
2、nth-child和nth-of-type
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> /* nth-child:选择父元素下面等于第几个的子元素,下方就是选择ul里面等于第4的元素,无论什么类型的标签 */ /* 关注点:是子元素所属的位置 */ ul :nth-child(4) { color: blue; } /* nth-of-type:选择父元素下面等于第几个的子元素,下方就是选择ul里面等于第4的li */ /* 关注点:1、是子元素所属的位置 2、同时子元素的类型也要一样*/ ul li:nth-of-type(4) { color: red; } </style> <body> <ul> <p>水果</p> <li>苹果</li> <li>桔子</li> <li>芒果</li> <li>西瓜</li> <li>面包</li> <li>哈密瓜</li> <li>草莓</li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例
3、padding对盒子的影响
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> .big{ width: 400px; height:400px; border: 1px solid red; } .hezi{ width: 200px; height: 200px; border: 1px solid blue; padding: 20px; box-sizing: border-box; } </style> <body> <div class="big"> <div class="hezi"> 小盒子 </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
4、margin中的同级塌陷, 嵌套传递与自动挤压
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> /*同级坍塌:就是2个盒子原色的margin会以大的为准,相当于重叠了小的数值部分*/ .div1{ width: 300px; height:300px; margin-bottom: 50px; background: red; } .div2{ width: 300px; height: 300px; margin-top: 30px; background: blue; } /* 嵌套传递 就是子元素的margin会导致父元素增加,这就是margin导致的,可以修改子元素用padding代替 */ .div3{ width: 300px; height:300px; background: red; } .div4{ width: 200px; height:200px; margin-top: 50px; background: #999; } /* 自动挤压 : 可以自动挤压左边或右边 */ /* 通常用于盒子居中对齐 */ .div5{ border: 1px solid #006400; width: 600px; height: 300px; margin: 0 auto; } </style> <body> <div class="div1">我是盒子1</div> <div class="div2">我是盒子2</div> <div class="div3"> <div class="div4"> 盒子4 </div> </div> <div class="div5"> 我这个盒子居中对齐 </div> </body> </html>
点击 "运行实例" 按钮查看在线实例