一. 实例演示相邻选择器与兄弟选择器,并分析异同
1、相邻选择器
语法:E+F。功能:选择紧位于匹配的E元素的后面的同级且匹配的一个F元素 。
应用场景:适用于选择某元素相邻的后符合条件的一个元素。
2、兄弟选择器
语法:E~F。功能:选择位于匹配的E元素的后面的同级且匹配的所有F元素 。
应用场景:适用于选择某元素相邻的后所有符合条件的元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> ul { margin: 0; padding-left: 0; border: 2px dashed black; width: 600px; } ul li { list-style-type: none; width: 50px; height: 50px; background-color: white; border: 1px solid; text-align: center; line-height: 50px; border-radius: 50%; /* 将块元素转为内联块元素 */ display: inline-block; } .brown-li { background-color: brown; } /* 相邻选择器 E+F:选择匹配的F元素,且紧位于匹配的E元素的后面的同级且匹配的F元素 */ .white-li+* { /* 选取class属性为white-li的下一个元素,为其设置阴影。*为匹配所有元素,如果有需要可以指定元素类型 */ box-shadow: 3px 3px 2px black; } /* 兄弟选择器 E~F:选择匹配的F元素,且位于匹配的E元素后的所有同级且匹配的F元素 */ .brown-li~* { /* 选取class属性为brown-li后的所有匹配的元素,将他们的背景色设置为green。 */ background-color: green; } </style> <title>Document</title> </head> <body> <ul> <li class="white-li">1</li> <li>2</li> <li>3</li> <li class="brown-li">4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例
二、实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
1、nth-child(n)选择器
语法:E F:nth-child(n)
功能:选择父元素E的第n个子元素F。其中n可以是整数(1,2,3)、关键字(even,odd)、可以是公式(2n+1),而且n值起始值为1,而不是0
2、nth-of-type(n)选择器
语法 E:nth-of-type(n)
功能:选择父元素内具有指定类型的第n个E元素*
总结:nth-child(n)选择器只关注父元素内子元素的索引号,适用于选取父元素的第n个元素。
nth-of-type(n)选择器 不仅关注父元素内子元素的索引号,还关注子元素的类型,适用于选取父元素的第n个某类型的元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> /* nth-child(n)选择器 语法 E F:nth-child(n) 功能:选择父元素E的第n个子元素F。其中n可以是整数(1,2,3)、关键字(even,odd)、 可以是公式(2n+1),而且n值起始值为1,而不是0.*/ #box1 :nth-child(3) { /* 设置box1中第3个元素的背景色为aqua */ background-color: aqua; } #box1 :nth-child(5) { /* 设置box1中第5个元素的背景色为aqua */ background-color: lightcoral; } /* nth-child(n)选择器 语法 E:nth-of-type(n) 功能:选择父元素内具有指定类型的第n个E元素*/ #box2 p:nth-of-type(2) { /* 设置box2中第2个p类型标签的背景色为gray */ background-color: gray; } /* 设置box2中第3个a类型标签的背景色为green */ #box2 a:nth-of-type(3) { background-color: green; } </style> <title>Document</title> </head> <body> <div id="box1"> <p>我是第1个box的第1个元素</p> <a href="">我是第1个box的第2个元素</a> <p>我是第1个box的第3个元素</p> <p>我是第1个box的第4个元素</p> <a href="">我是第1个box的第5个元素</a> <a href="">我是第1个box的第6个元素</a> </div> <div id="box2"> <p>我是第2个box的第1个p元素</p> <p>我是第2个box的第2个p元素</p> <p>我是第2个box的第3个p元素</p> <a href="">我是第2个box的第1个a元素</a> <a href="">我是第2个box的第2个a元素</a> <a href="">我是第2个box的第3个a元素</a> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
三. 实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
不设置padding属性时,padding值为0,元素的宽度与高度为content的尺寸,设置padding时,元素的总宽和高为content的尺寸加padding的值,导致盒模型撑大。想解决此问题,可以通过3种常见的方法:
1、改变尺寸:把content的宽和高分别减去padding×2;
2、宽度分离:在此盒模型外在加一个盒模型,高度和宽度设置为需要的尺寸,此时在内部盒模型添加padding值时,由于父元素尺寸没有改变,内部元素尺寸不变;
3、设置box-sizing值为border-box:将box-sizing值设置为border-box时,设置的元素尺寸包含padding部分,故添加padding属性时,只会压缩content的尺寸,元素尺寸不变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> /* 将box3放入box1使box3居中,此时在box1中直接添加padding,导致box1被撑大,四周都增加了50px */ .box1 { width: 200px; height: 200px; padding: 50px; border: 3px solid black; background-color: brown; } /* 如果不想让盒子撑大,可以选用改变盒子大小,宽度分离和box-sizing三种种方式 */ /* 1、改变盒子大小 */ /* 将box3放入box2使box3居中,为了不使box2像box1一样被撑大,设置box2的宽高为100px */ .box2 { width: 100px; height: 100px; padding: 50px; border: 3px solid black; background-color: chartreuse; } .box3 { width: 100px; height: 100px; padding: 0; margin: 0; border: 1px solid blue; background-color: yellow; } /* 2、宽度分离 */ /* 将box3放入box4使box3居中,在box4外面套一个box5,宽高设为200px, 当box4设置padding时,box5不会被改变,里面box4的整体大小也不会改变 */ .box5 { width: 200px; height: 200px; } .box4 { padding: 50px; border: 3px solid black; background-color: lightcoral; } /* 3、box-sizing */ /* 将box3放入box6使box3居中,将box6的box-sizing值设置为 border-box, 此时box6的宽高会包含padding部分,添加padding属性时,box6大小不会改变*/ .box6 { box-sizing: border-box; width: 200px; height: 200px; padding: 50px; border: 3px solid black; background-color: darkgray; } </style> <title>Document</title> </head> <body> <div class="box1"> <div class="box3"> </div> </div> <br> <div class="box2"> <div class="box3"> </div> </div> <br> <div class="box5"> <div class="box4"> <div class="box3"> </div> </div> </div> <br> <div class="box6"> <div class="box3"> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
四. 实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
同级塌陷:同级块元素为垂直排列,同级块元素设置margin值时,生效的为两个元素垂直margin最大值。用于设置连个同级元素的边距
嵌套传递:单独为子元素设置margin值时,父元素也会受到margin值得影响,如果想为子元素在父元素内设置边距,应设置父元素的padding值,当同时设置父元素padding和子元素margin时,边距为子元素margin+父元素padding。用于设置嵌套元素的边距
自动挤压:元素的margin=auto时,元素居中;margin-left=auto时元素右对齐,margin-right=auto时元素左对齐。需要元素左对齐、右对齐或居中时可以使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> /* 同级塌陷 当两个块级元素设置margin值时,元素垂直方向的margin间距为两个元素margin值得最大值 */ .box1 { width: 100px; height: 100px; margin-bottom: 30px; background-color: red; } .box2 { width: 100px; height: 100px; margin-top: 20px; margin-bottom: 20px; background-color: green; } .box3 { width: 100px; height: 100px; margin-top: 50px; background-color: blue; } /* 嵌套传递:单独为内嵌元素设置margin值时,margin值会影响父元素,想为内嵌元素设置边距,应为父元素设置padding 此时,边距为内元素margin值+父元素padding值*/ .box4 { width: 100px; height: 100px; background-color: pink; } .box5 { width: 60px; height: 60px; margin-top: 20px; background-color: gray; } .box4 { padding-top: 30px; } /* 自动挤压:当设置margin为auto时,元素将自动居中, 设置margin-left=auto时元素右对齐,设置margin-right=auto时元素左对齐 */ .box6 { width: 100px; height: 100px; margin: auto; background-color: rgb(179, 36, 36); } .box7 { width: 100px; height: 100px; margin-left: auto; background-color: rgb(49, 141, 79); } .box8 { width: 100px; height: 100px; margin-right: auto; background-color: rgb(22, 183, 223); } </style> <title>Document</title> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"> <div class="box5"></div> </div> <div class="box6"></div> <div class="box7"></div> <div class="box8"></div> </body> </html>
点击 "运行实例" 按钮查看在线实例