2023年7月28日发(作者：)

前端知识点⾯试题-CSS基础篇（1）⽂章⽬录1、说出标准的CSS的盒⼦模型是什么？与低版本IE的盒⼦模型有什么不同的？盒⼦模型就是 元素在⽹页中的实际占位，有两种：标准盒⼦模型和IE盒⼦模型标准(W3C)盒⼦模型：内容content+填充padding+边框border+边界margin宽⾼指的是 content 的宽⾼低版本IE盒⼦模型：内容（content+padding+border）+ 边界margin，宽⾼指的是 content+padding+border 部分的宽⾼2、CSS 如何设置这两种模型？box-sizing: content-box;box-sizing: border-box默认为content-boxcontext-box：W3C的标准盒⼦模型，设置元素的 height/width 属性指的是 content 部分的⾼/宽border-box：IE 传统盒⼦模型。设置元素的 height/width 属性指的是 content + border + padding 部分的⾼/宽3、对 BFC 规范(块级格式化上下⽂：block formatting context)的理解？（W3C CSS 2.1 规范中的⼀个概念,它是⼀个独⽴容器，决定了元素如何对其内容进⾏定位,以及与其他元素的关系和相互作⽤。）⼀个页⾯是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。不同类型的 Box，会参与不同的Formatting Context（决定如何渲染⽂档的容器），因此Box内的元素会以不同的⽅式渲染，也就是说BFC内部的元素和外部的元素不会互相影响。BFC规定了内部的 Block Box 如何布局。 定位⽅案：内部的 Box 会在垂直⽅向上⼀个接⼀个放置。Box 垂直⽅向的距离由margin 决定，属于同⼀个 BFC 的两个相邻 Box 的 margin 会发⽣重叠。每个元素的 margin box的左边，与包含块 border box 的左边相接触。BFC 的区域不会与 float box 重叠。BFC 是页⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素。计算 BFC 的⾼度时，浮动元素也会参与计算。满⾜下列条件之⼀就可触发 BFC根元素，即 htmlfloat 的值不为none（默认）overflow 的值不为visible（默认）display 的值为 inline-block、table-cell、table-captionposition的值为 absolute 或 fixed4、CSS margin上下重叠问题块元素在垂直⽅向上的margin会有重叠现象。 如果display都是block，有三种情况：外边距均为正数，竖直⽅向上会选择最⼤的外边距作为间隔⼀正⼀负，间距 = 正 - |负|两个负，间距 = 0 - 绝对值最⼤的那个设置display: inline-block的盒⼦不会有margin重叠，position: absolute的也不会出现。5、CSS选择器有哪些？哪些属性可以继承？CSS优先级算法如何计算？CSS选择符：1. id选择器（ # myid）2. 类选择器（.myclassname）3. 标签(元素)选择器（div, h1, p）4. 相邻选择器（h1 + p）5. ⼦选择器（ul > li）6. 后代选择器（li a）7. 通配符选择器（ * ）8. 属性选择器（a[rel = “external”]）9. 伪类选择器（a:hover, li:nth-child）10. 伪元素选择器、分组选择器。继承性：可继承的样式：font-size, font-family, color，ul，li，dl，dt，dd；不可继承的样式：border, padding, margin, width, height优先级（就近原则）：!important > [ id > class > tag ]!important ⽐内联优先级⾼优先级算法计算：优先级就近原则，同权重情况下样式定义最近者为准 !important>id >class>tagmportant⽐内联优先级⾼元素选择符的权值：元素标签（派⽣选择器）：1，class选择符：10，id选择符：100，内联样式权值最⼤，为1000!important声明的样式优先级最⾼，如果冲突再进⾏计算。如果优先级相同，则选择最后出现的样式。继承得到的样式的优先级最低。ID > 类 > 标签 > 相邻 > ⼦选择器 > 后代选择器 > * > 属性 > 伪类important > ⾏内样式 > ⽂件内部style > link引⼊的外部css⽂件同类选择器，层级越深优先级越⾼同⼀⽂件，同⼀层级的同类选择器，下⾯的样式会覆盖上⾯的6、CSS3新增伪类有那些?p:first-of-type 选择属于其⽗元素的⾸个元素的每个元素。 p:last-of-type 选择属于其⽗元素的最后元素的每个元素。p:only-of-type 选择属于其⽗元素唯⼀的元素的每个元素。 p:only-child 选择属于其⽗元素的唯⼀⼦元素的每个元素。p:nth-child(2) 选择属于其⽗元素的第⼆个⼦元素的每个元素。 :enabled :disabled 控制表单控件的禁⽤状态。:checked，单选框或复选框被选中。 :before在元素之前添加内容，也可以⽤来做清除浮动 :after在元素之后添加内容7、display各项值的含义8、关于居中⽔平居中div：margin: 0 auto;⽔平垂直居中⼀个浮动元素（position定位）当元素宽⾼不定

当元素宽⾼的固定垂直居中⼀个img（display : table-cell 或者 position定位）设置绝对定位的div⽔平垂直居中position: absolute;width: 200px;height: 100px;margin: auto;left: 0;right: 0;

top:0;bottom:0;border: 1px solid black;设置⽂本的垂直居中把line-height值设置为height⼀样⼤⼩的值可以实现单⾏⽂字的垂直居中还有更加优雅的居中⽅式就是⽤ flex布局，但需要注意其兼容性9、⽤纯CSS实现⼀个三⾓形width: 0;height: 0;border-top: 20px solid transparent;border-left: 20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid #ff0000;10、为什么要初始化 CSS 样式因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页⾯显⽰差异。当然，初始化样式会对SEO有⼀定的影响，但鱼和熊掌不可兼得，但⼒求影响最⼩的情况下初始化。11、display:none 与 visibility:hidden 的区别是什么？display : none 隐藏对应的元素，在⽂档布局中不再分配空间（回流+重绘）visibility:hideen 隐藏对应的元素，在⽂档布局中仍保留原来的空间（重绘）12、position 跟 display、overflow、float 这些特性相互叠加后会怎么样？display属性规定元素应该⽣成的框的类型；position属性规定元素的定位类型；float属性是⼀种布局⽅式，定义元素在哪个⽅向浮动。类似于优先级机制：position：absolute/fixed优先级最⾼，有他们在时，float不起作⽤，display值需要调整。float或者absolute定位的元素，只能是块元素或表格。13、为什么会出现浮动? 什么时候需要清除浮动？清除浮动有哪些⽅式？出现浮动的原因：浮动元素碰到包含它的边框或者浮动元素的边框停留。在CSS规范中，浮动定位不属于正常的页⾯流，⽽是独⽴定位的，所以⽂档流的块框表现得就像浮动框不存在⼀样。浮动元素会漂浮在⽂档流的块框上。关于css的定位机制：普通流，浮动，绝对定位（position：fixed是position：absolute的⼀个⼦类）。浮动的框可以左右移动，直到它的外边缘遇到包含框或者另⼀个浮动框的边缘，所以才说浮动定位不属于正常的页⾯流。⽂档中的普通流就会表现得和浮动框不存在⼀样。当浮动框⾼度超出包含框的时候，就会出现包含框不会⾃动伸缩⾼度类笔盒浮动元素。所以，只含有浮动元素的⽗容器在显⽰时不需要考虑⼦元素的位置，就造成显⽰⽗容器像空容器⼀样。浮动带来的问题：⽗元素的⾼度⽆法被撑开，影响与⽗元素同级的元素与浮动元素同级的⾮浮动元素（内联元素）会跟随其后若⾮第⼀个元素浮动，则该元素之前的元素也需要浮动，否则会影响页⾯显⽰的结构。清除浮动的⽅式：浮动的⽗元素添加overflow: hidden浮动的⽗元素添加伪类 ::after{clear: both}14、什么是CSS 预处理器 / 后处理器？预处理器例如：LESS、Sass、Stylus，⽤来预编译Sass或less，增强了css代码的复⽤性，还有层级、mixin、变量、循环、函数等，具有很⽅便的UI组件模块化开发能⼒，极⼤的提⾼⼯作效率。后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；⽬前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。CSS 预处理器为 CSS 增加⼀些编程的特性，⽆需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使⽤变量、简单的逻辑程序、函数（如右侧代码编辑器中就使⽤了变量$color）等等在编程语⾔中的⼀些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。其它 CSS 预处理器语⾔：Sass（SCSS）LESSStylusTurbineSwithch CSSCSS CacheerDT CSS15、CSS优化、提⾼性能的⽅法有哪些？避免过度约束避免后代选择符避免链式选择符使⽤紧凑的语法避免不必要的命名空间避免不必要的重复最好使⽤表⽰语义的名字。⼀个好的类名应该是描述他是什么⽽不是像什么避免！important，可以选择其他选择器尽可能的精简规则，你可以合并不同类⾥的重复规则修复解析错误避免使⽤多类选择符移除空的css规则正确使⽤display的属性：由于display的作⽤，某些样式组合会⽆效，徒增样式体积的同时也影响解析性能。display:inline后不应该再使⽤width、height、margin、padding以及float。display:inline-block后不应该再使⽤float。display:block后不应该再使⽤vertical-align。display:table-*后不应该再使⽤margin或者float。不滥⽤浮动：虽然浮动不可避免，但不可否认很多css bug是由于浮动⽽引起。不滥⽤web字体对于中⽂⽹站来说Web Fonts可能很陌⽣，国外却很流⾏。web fonts通常体积庞⼤，⽽且⼀些浏览器在下载web fonts时会阻塞页⾯渲染损伤性能。不声明过多的font-size：这是设计层⾯的问题，设计精良的页⾯不会有过多的font-size声明。不在选择符中使⽤ID标识符，主要考虑到样式重⽤性以及与页⾯的耦合性。不给h1~h6元素定义过多的样式全站统⼀定义⼀遍heading元素即可，若需额外定制样式，可使⽤其他选择符作为代替。不重复定义h1~h6元素值为0时不需要任何单位标准化各种浏览器前缀：通常将浏览器前缀置于前⾯，将标准样式属性置于最后-moz-border-radius: 5px;border-radius: 5px;使⽤CSS渐变等⾼级特性，需指定所有浏览器的前缀避免让选择符看起来像正则表达式CSS3添加了⼀些类似~=等复杂属性，也不是所有浏览器都⽀持，谨慎使⽤。遵守盒模型规则（Beware of broken box models）16、在⽹页中的应该使⽤奇数还是偶数的字体？为什么呢？使⽤偶数字体。偶数字号相对更容易和 web 设计的其他部分构成⽐例关系。Windows ⾃带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个⼤⼩的点阵，⽽ 13、15、17 px时⽤的是⼩⼀号的点。（即每个字占的空间⼤了 1 px，但点阵没变），于是略显稀疏。17、全屏滚动的原理是什么？⽤到了CSS的哪些属性？原理：有点类似于轮播，整体的元素⼀直排列下去，假设有5个需要展⽰的全屏页⾯，那么⾼度是500%，只是展⽰100%，剩下的可以通过transform进⾏y轴定位，也可以通过margin-top实现overflow：hidden；transition：all 1000ms ease；18、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？响应式⽹站设计(Responsive Web design)是⼀个⽹站能够兼容多个终端，⽽不是为每⼀个终端做⼀个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺⼨做处理。页⾯头部必须有meta声明的viewport。19、li 与 li 之间有看不见的空⽩间隔是什么原因引起的？有什么解决办法？⾏框的排列会受到中间空⽩（回车空格）等的影响，因为空格也属于字符,这些空⽩也会被应⽤样式，占据空间，所以会有间隔，把字符⼤⼩设为0，就没有空格了。20、如何实现Chrome中⽂本⼩于12px针对⾕歌浏览器加前缀进⾏适配html{　-webkit-text-size-adjust:none;}使⽤css3的transform属性font-size:12px;-webkit-transform:scale(0.8); // 0.8是缩放⽐例