css测试总结
年前进行了html+css的测试，把一些有意思的题目分享和总结一下
我们先来看一下这几个题目：
- 题目一：总结一下css中常用的选择器
- 题目二：分析并说明href和src两种引用方式的区别
- 题目三：比较并说明IE盒子模型和W3C标准盒子模型的区别
- 题目四：简述你对BFC规范的理解，并说出几种开启BFC的方法
- 题目五：简述rem与em这两种单位的区别
这些题目虽然平时敲代码时用处不大，但对我们思考问题，突破瓶颈以及应对面试有很大帮助。
css中常用的选择器
-
标签选择器（元素选择器）
以标签名开头，选中所有拥有此标签名的元素 权重为1
header{
width:100px;
height:100px;
}
-
类选择器
以小数点+类名开头，选中所有拥有此类名的元素 权重为10
.container{
width:100px;
height:100px;
}
-
id选择器
以井号#+id名开头，选中所有拥有此id名的元素 权重为100
#banner{
width:100px;
height:100px;
}
-
通用选择器（通配选择器）
以通配符*开头，选中所用的元素 权重为0.5
*{
margin:0;
padding:0;
}
-
包含选择器
用来选中某父元素中的某个子元素，父元素和子元素之间用空格隔开，以父元素加空格加子元素开头 权重为元素权重相加
.container .box{
width:100px;
height:100px;
}
-
分组选择器
用来选中多个选择器对应的元素，元素之间用逗号隔开，以元素加逗号加元素开头
header,#banner,.container .box{
background-color:#ff0000;
}
-
直接子元素选择器
用来选中父元素下的与选择器对应的子元素，而不会选中与选择器同类名的孙子元素以及更深的后代，父元素与子元素之间用大于号>隔开，以父元素加大于号加子元素开头
.container>.box{
background-color:#ff0000;
}
-
属性选择器
根据元素中的属性或属性值来选取指定元素
- [attr]选取含有指定属性的元素
- [attr=“value”]选取含指定属性值的元素
- [attr^=“value”] 选取属性值以指定内容开头的元素
- [attr$=“value”] 选取属性值以指定内容结尾的元素
- [attr*=“value”] 选取属性值包含指定内容的所有元素
-
伪类选择器
在选择器末尾加上冒号：来使用伪类选择器。常用的分为三种
（1）表示鼠标状态
:hover 鼠标放到该元素上时产生的状态
:active 鼠标点击该元素时产生的状态
:visited 鼠标点击该元素后该元素的状态（2）序选择器
:nth-child(n) 选择父元素下第n个子元素
:first-child 选择父元素下第一个子元素
:last-child 选择父元素下最后一个子元素（3）种类选择器
:nth-of-type(n) 选择父元素下同类型的第n个子元素
:first-of-type 选择父元素下同类型的第一个子元素
:last-of-type 选择父元素下同类型的最后一个子元素补充：:not() 用来反选
例如 :not(:first-child()) 不选择 -
兄弟元素选择器
用来选中同级并与自己紧挨着的兄弟元素，元素之间用加号+隔开，以兄弟元素1加+加兄弟元素2开头
.container label+input{
display:block;
}
-
相邻选择器
用来选中所有指定的同级兄弟元素，元素之间用波浪线 ~ 隔开，以元素1加 ~ 加元素2开头
.container span~p{
color:#ff0000;
}
href和src两种引用方式的区别
（本问题回答摘自CSDN用户weixin_33725270的博客，大家如果想看更详细的总结可以移步去这里.）
-
请求资源类型不同
（1）href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。
（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片； -
作用结果不同
（1）href 用于在当前文档和引用资源之间确立联系；
（2）src 用于替换当前内容； -
浏览器解析方式不同
（1）若在文档中添加 ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。
（2）当浏览器解析到 ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。
IE盒子模型和W3C标准盒子模型的区别
两者的区别在于content的不同，IE盒模型计算宽高时包括content、border、padding，而W3C标准盒子模型计算宽高时只计算content部分。二者可以通过box-sizing属性值来进行转换。
一图流比较：
BFC规范
（本问题回答摘自简书用户加油_未来的博客，大家如果想看更详细的总结可以移步去这里.）
BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。
W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。
一、BFC 的概念
-
规范解释
块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。 -
通俗理解
BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。
如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。
浮动元素会创建 BFC，则浮动元素内部子元素主要受该浮动元素影响，所以两个浮动元素之间是互不影响的。
二、创建 BFC
根元素或包含根元素的元素
浮动元素 float ＝ left | right 或 inherit（≠ none）
绝对定位元素 position ＝ absolute 或 fixed
display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption
overflow ＝ hidden | auto 或 scroll (≠ visible)
三、BFC 的特性
BFC 是一个独立的容器，容器内子元素不会影响容器外的元素。反之亦如此。
盒子从顶端开始垂直地一个接一个地排列，盒子之间垂直的间距是由 margin 决定的。
在同一个 BFC 中，两个相邻的块级盒子的垂直外边距会发生重叠。
BFC 区域不会和 float box 发生重叠。
BFC 能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算了。
四、BFC的应用：
1.解决margin叠加问题
2.解决margin传递问题
3.解决浮动问题
4.解决覆盖问题
px、rem与em
这里顺便扩展一下，把px单位也算上，即比较px、rem、em三者的区别
（本问题回答摘自贴吧用户优就业张老师的帖子，大家如果想看更详细的总结可以移步去这里.）
px
特点:
- IE无法调整那些使用px作为单位的字体大小;
- 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
- Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
em
特点:
- em的值并不是固定的;
- em会继承父级元素的字体大小。
所以我们在写CSS的时候，需要注意两点：
- body选择器中声明Font-size=62.5%;
- 将你的原来的px数值除以10，然后换上em作为单位;
- 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
rem
特点:
rem是CSS3新增的一个相对单位(root em，根em)，这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。