博客列表 >常用选择器与布局原理0903

常用选择器与布局原理0903

ShunPro的博客
ShunPro的博客原创
2019年09月04日 18:11:59541浏览

一、实例演示相邻选择器与兄弟选择器,并分析异同
1.1常用选择器

作业01a.png

1.2相邻选择器

作业01b.png相邻用加号,只选中后面一个

1.3兄弟选择器

作业01c.png兄弟用波浪线,选中后面一片


二、实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
2.1伪类-顺序选择

--仅关注位置

first-child :第一个;last-child:倒数第一个;

nth-child(n):正数第n个;nth-last-child(n):倒数第n个;

作业02b.png

2.2伪类-类型选择器

--即关注位置又关注类型       子标签:nth-of-type(n)

作业02b.png

作业02c.png


三、实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing

  • padding会把盒子撑大;

    方法一:重新调整盒子的width

    方法二:盒子外再套个盒子,设置上层盒子的width

       方法三:在盒子样式里设置box-sizing: border-box,不能用content-box

四、实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景

4.1 margin同级塌陷

作业03a.png

4.2嵌套传递

作业03b.png

4.3自动挤压

  • 当设置margin-left: auto;浏览器自动为左边留出空间,盒子会到最右侧;

  • 当设置margin : auto;  盒子自动居中;

  • 当margin-left和margin-right都设置为auto时,盒子也自动居中;


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议