经过今天晚上的学习,增加了对css 控制页面元素的理解。现将学习到的知识增加如下:
一、相邻选择器与兄弟选择器
1、相邻选择器,就是当前元素紧挨的后面的一个元素,实例如下:
下面是8小框,我们选择第四个元素,改变的他的相邻元素样式
实例
<html> <head> <style type="text/css"> ul{ margin:0; padding-left:0; } ul li{ list-style:none; width:50px; height:50px; background:green; text-align:center; line-height:50px; border-radius:10%; display:inline-block; color:white; } .a +*{ background:red; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li class='a'>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2、兄弟选择器 作用于当前元素的后的所有同级元素
我们还是 8个方框,还是那第4个元素丛示范,案例如下:
实例
<html> <head> <style type="text/css"> ul{ margin:0; padding-left:0; } ul li{ list-style:none; width:50px; height:50px; background:green; text-align:center; line-height:50px; border-radius:10%; display:inline-block; color:white; } .a ~*{ background:red; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li class='a'>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
【总结】
通过以上两案例可以看到,相邻选择器是解决当前选择元素后面紧挨的一个元素,是单个来的。而兄弟选择其实是当前元素后的所有同级元素,是多个。
二、nth-child() 和 :nth-of-type()选择器
1、nth-child :它与位置有关,一定记住位置!
先看案例:
实例
<html> <head> <style type="text/css"> ul{ margin:0; padding-left:0; } ul>li{ list-style:none; width:50px; height:50px; background:green; text-align:center; line-height:50px; border-radius:10%; display:inline-block; color:white; box-shadow:2px 8px 1px #000; } /*伪类 子元素选择器*/ div :nth-child(3){ color:red; } </style> </head> <body> <div> <p>朱老师</p> <li>赵桂福</li> <p>php中文网</p> </div> <div> <p>朱老师</p> <li>赵桂福</li> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2、:nth-of-type()选择器 : 它不仅与位置有关,还与类型有关
看下面的案例
实例
<html> <head> <style type="text/css"> ul{ margin:0; padding-left:0; } ul>li{ list-style:none; width:50px; height:50px; background:green; text-align:center; line-height:50px; border-radius:10%; display:inline-block; color:white; box-shadow:2px 8px 1px #000; } /*伪类 子元素选择器*/ div p:nth-of-type(2){ color:red; } </style> </head> <body> <div> <p>朱老师</p> <li>赵桂福</li> <p>php中文网</p> </div> <div> <p>朱老师</p> <li>赵桂福</li> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
【总结】
nth-child() : 关注的是位置,例如 第一个,第二个....
nth-of-type(): 既关注位置又关注类型,类型就是您要修改的是p 标签,还是li 标签,第几个。考虑下 类型的感受。
三、padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
对于盒模型来说,增加padding 后会对盒模型产生破坏,无法实现预期效果。比如,居中的问题。
下面,我通过 box-sizing 来处理,padding对于盒子大小的影响
实例如下:
实例
<html> <head> <style type="text/css"> #kuang { width: 300px; height: 300px; background: red; text-align: center; line-height: 300px; } .ts { box-sizing: border-box; width: 500px; padding: 100px; border: 1px solid red; } </style> </head> <body> <div class="ts"> <div id="kuang">我是中间内容</div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四、margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
1、同级塌陷 适用于 垂直元素布局
实例
<html> <head> <style type="text/css"> #b1{ width:200px; height:200px; background:red; } #b2{ width:200px; height:200px; background:blue; } #b1{ margin-bottom:30px; } #b2{ margin-top:110px;} </style> </head> <body> <div id='b1'></div> <div id='b2'></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2、嵌套传递
实例
<html> <head> <style type="text/css"> #b1{ width:500px; height:300px; background:red; } #b2{ width:200px; height:200px; background:blue; } #b2{margin-top:60px;} </style> </head> <body> <div id='b1'><div id='b2'></div></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
【解决方案】
实例
<html> <head> <style type="text/css"> #b1{ width:500px; height:300px; background:red; } #b2{ width:200px; height:200px; background:blue; } #b1{padding-top:30px;height:250px;} </style> </head> <body> <div id='b1'><div id='b2'></div></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3、自动挤压 元素的居中设计
实例
<html> <head> <style type="text/css"> .box{ width:300px; height:300px; border:1px solid red; background:green; } .box{ margin:0 auto; } </style> </head> <body> <div class='box'></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
【左边 margin-left:auto】
实例
<html> <head> <style type="text/css"> .box{ width:300px; height:300px; border:1px solid red; background:green; } .box{ margin-left:auto; } </style> </head> <body> <div class='box'></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
感谢php中文网,感谢老师的辛苦付出!