2023年03月 其他-Web前端基础面试题（CSS_42道）
文章目录
- 前言
- 一、 CSS/CSS3/移动端适配
-
- 1、css盒子模型，box-sizing属性的理解
- 2、引入css的方式有几种，分别是什么 ？
- 3、px、em、rem的区别？
- 4、怪异盒模型box-sizing？弹性盒模型|盒布局?
- 5、:before 和 ::before 区别?
- 6、display的block、inline和inline-block的区别？
- 7、隐藏元素的方法有哪些？
- 8、图片间隙问题如何解决
- 9、项目中你是如何做图片优化的？
- 10、简述rem布局原理
- 11、解释下浮动和它的工作原理？清除浮动有哪些方式？
- 12、什么是 BFC？
- 13、对 CSS 的新属性有了解过的吗？
- 14、讲一讲 CSS 的权重和优先级？
- 15、介绍 Flex 布局，flex 是什么属性的缩写？
- 16、说一说你知道的position属性，都有啥特点？
- 17、在网页中的应该使用奇数还是偶数的字体？为什么呢？
- 18、margin和padding分别适合什么场景使用？
- 19、CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
- 20、对line-height是如何理解的？
- 21、元素竖向的百分比设定是相对于容器的高度吗？
- 22、transition和animation的区别是什么？
- 23、rgba()和opacity的透明效果有什么不同？
- 24、css sprite是什么,有什么优缺点？
- 25、display,float,position的关系？
- 26、css中link与@import的区别？
- 27、CSS3新特性有哪些？
- 28、display:none;与visibility:hidden的区别是什么？
- 29、画一条0.5px的直线？
- 30、html元素的id跟class什么区别
- 31、什么是响应式设计，响应式设计的基本原理是什么
- 32、什么是外边距重叠？重叠的结果是什么？
- 33、CSS属性content有什么作用？有什么应用？
- 34、CSS优先级如何排序？
- 35、nth-of-type和nth-child的区别
- 36、有什么方式可以对一个DOM设置它的CSS？
- 37、CSS中，自适应的单位都有哪些？
- 38、为什么css放在顶部而js写在后面？
- 39、z-index属性在什么情况下会失效
- 40、Flex 布局父级容器属性和子级项目属性有哪些？
- 41、flex 布局中 align-content 与 align-items 有何区别？
- 42、 '+' 与 '~' 选择器有什么不同？
前言
CSS 是层叠样式表（Cascading Style Sheets）的简写，它是一种用于定义网页和网页应用程序外观的标准格式语言。
一、 CSS/CSS3/移动端适配
1、css盒子模型，box-sizing属性的理解
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border）元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域。
CSS盒模型：标准模型 + IE模型
- 标准模型
div宽度 = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度会变化 box-sizing:content-box; /*设置标准盒子*/
- 怪异模型|IE模型
div宽度（定死） = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度不会变化 box-sizing:border-box; /*IE模型*/
box-sizing是一个CSS3属性，与盒子模型有着密切联系。即决定元素的宽高如何计算，box-sizing有三个属性：
content-box使得元素的宽高即为内容区的宽高(默认模式)
border-box: 计算方式content + padding + border= 本身元素大小，即缩小了content大小
inherit指定box-sizing属性的值，应该从父元素继承
2、引入css的方式有几种，分别是什么 ？
（1）内嵌式
通过来书写CSS代码。 只能应用于当前网页，不能被其它网页共享。 注意：