一、实例演示相邻选择器与兄弟选择器,并分析异同
1.1常用选择器
1.2相邻选择器
相邻用加号,只选中后面一个
1.3兄弟选择器
兄弟用波浪线,选中后面一片
二、实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
2.1伪类-顺序选择
--仅关注位置
first-child :第一个;last-child:倒数第一个;
nth-child(n):正数第n个;nth-last-child(n):倒数第n个;
2.2伪类-类型选择器
--即关注位置又关注类型 子标签:nth-of-type(n)
三、实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
padding会把盒子撑大;
方法一:重新调整盒子的width
方法二:盒子外再套个盒子,设置上层盒子的width
方法三:在盒子样式里设置box-sizing: border-box,不能用content-box
四、实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
4.1 margin同级塌陷
4.2嵌套传递
4.3自动挤压
当设置margin-left: auto;浏览器自动为左边留出空间,盒子会到最右侧;
当设置margin : auto; 盒子自动居中;
当margin-left和margin-right都设置为auto时,盒子也自动居中;