朋友你好，这里是小毅的前端日记， 分享代码日常 !
本文目标：面试题详解----css盒模型和选择器
卑微的大三前端仔持续输出前端知识，欢迎批评指正 !
愿你永远青春激昂，风华永驻 ！

这两天在看面试的东西，之前听过一个学长说，他曾经面试的时候，没有把盒模型和选择器讲清楚，然后就挂了，面试官说：“连css盒模型和选择器都不会就别来面试了”，所以我就学习的东西做了一下总结

文章目录

• 一、 前端面试题分享【第一期】
• • 1. 请说一下你对 css 盒模型的理解
  • 2. CSS 选择器有哪些，优先级呢
• 二、结尾

一、 前端面试题分享【第一期】

1. 请说一下你对 css 盒模型的理解

首先，认识我们的网页布局：网页元素基本上都是盒子box组成的
其次，一般来说，盒子模型有这些东西：边框border、 内容content(即实际设置的宽高) 、内边距padding 、外边距margin。但是盒模型又分为标准盒模型、IE盒模型（主要是css3新增的box-size）

这两种盒子模型最主要的区别就是 width 的包含范围，在标准的盒子模型中，width 指 content 部分的宽度，在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：

标准盒子模型的盒子宽度：左右 border+左右 padding+width

IE 盒子模型的盒子宽度：即一开始设置的width

• 标准盒子模型的盒子宽度：左右 border+左右 padding+width

• IE 盒子模型的盒子宽度：width 在 CSS3 中引入了 box-sizing 属性，box-sizing:content-box;表示标准的盒子模型， box-sizing:border-box 表示的是 IE 盒子模型

2. CSS 选择器有哪些，优先级呢

id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等 。

同一元素引用了多个样式时，排在后面的样式属性的优先级高； 样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器； 标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。

优先级顺序为：内联样式> 内部样式 > 外部样式 > 浏览器用户 自定义样式 > 浏览器默认样式

补充：CSS三大特性

1.层叠性：如果后代元素定义了 与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。

2.继承性：子标签会继承父标签的某些样式（主要是文字方面的，如文本颜色，字号 text- font- line- color），但不是所有

3.优先级：继承的样式的优先级 比较低，至少比标签选择器的优先级低； 带有!important 标记的样式属性的优先级最高； 样式表的来源不同时，

通配符和  继承 权重为0，0，0，0,  这个是最低的，不管父元素的权重多高，子元素得到的权重永远是0     标签选择器为  0，0，0，1, 类(伪类)选择器为     0，0，1，0 id选择器      0，1，0，0,  行内样式表为  1，0，0，0,  !important 无穷大.  如果是复合选择器，权重虽然会叠加，但永远不会有进位，例如0，0，0，10 的权重比0，0，1，0 要小

二、结尾

​ 今天的分享到这里就结束了，如果觉得有收获，左下角有个大拇指哦，关于本文有什么好滴建议也可以分享到评论区哦，博主才疏学浅，还请各位读者老爷们批评指正