常用选择器与布局原理0903

一、实例演示相邻选择器与兄弟选择器,并分析异同
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时，盒子也自动居中；