这篇“CSS的经典面试题有哪些”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“CSS的经典面试题有哪些”文章吧。
标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本 IE 盒子模型：宽度=内容宽度（content+border+padding）+ margin
用来控制元素的盒子模型的解析模式，默认为 content-boxcontext-box：W3C 的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽 border-box：IE传统盒子模型。设置元素的 height/width 属性指的是 border + padding + content 部分的高/宽
CSS选择符：id 选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h2, p)、相邻选择器(h2 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > [ id > class > tag ]!important 比内联优先级高
元素选择符： 1class选择符： 10id选择符：100元素标签：1000 !important 声明的样式优先级最高，如果冲突再进行计算。如果优先级相同，则选择最后出现的样式。继承得到的样式的优先级最低。
p:first-of-type 选择属于其父元素的首个元素 p:last-of-type 选择属于其父元素的最后元素 p:only-of-type 选择属于其父元素唯一的元素 p:only-child 选择属于其父元素的唯一子元素 p:nth-child(2) 选择属于其父元素的第二个子元素 :enabled :disabled 表单控件的禁用状态。:checked 单选框或复选框被选中。
div：border: 1px solid red;margin: 0 auto;height: 50px;width: 80px;
浮动元素的上下左右居中：border: 1px solid red;float: left;position: absolute;width: 200px;height: 100px;left: 50%;top: 50%;margin: -50px 0 0 -100px;
绝对定位的左右居中：border: 1px solid black;position: absolute;width: 200px;height: 100px;margin: 0 auto;left: 0;right: 0;
inline（默认）–内联 none– 隐藏 block– 块显示 table –表格显示 list-item–项目列表 inline-block
static（默认）：按照正常文档流进行排列；relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；absolute(绝对定位)：参考距其最近一个不为 static 的父级元素通过 top, bottom, left, right 定位；fixed(固定定位)：所固定的参照对像是可视窗口。
RGBA 和透明度 background-image background-origin(content-box/padding-box/border-box) background-size background-repeatword-wrap（对长的不可分割单词换行）word-wrap：break-word 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）font-face 属性：定义自己的字体圆角（边框半径）：border-radius 属性用于创建圆角边框图片：border-image: url(border.png) 30 30 round 盒阴影：box-shadow: 10px 10px 5px #888888媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。试用场景：弹性布局适合于移动前端开发，在 Android 和 ios 上也完美支持。
首先，需要把元素的宽度、高度设为 0。然后设置边框样式。
width: 0;height: 0;border-top: 40px solid transparent;border-left: 40px solid transparent;border-right: 40px solid transparent;border-bottom: 40px solid #ff0000;
第一种真正的品字：三块高宽是确定的；上面那块用 margin: 0 auto;居中；下面两块用 float 或者 inline-block 不换行；用 margin 调整位置使他们居中。第二种全屏的品字布局:上面的 div 设置成 100%，下面的 div 分别宽 50%，然后使用 float 或者 inline 使其不换行。
不同浏览器的标签默认的 margin 和 padding 不一样。*{margin:0;padding:0;}IE6 双边距 bug：块属性标签 float 后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大。hack：display:inline; 将其转化为行内属性。渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将 IE8 和 IE7、IE6 分离开来，这样 IE8 已经独立识别。
{background-color:#f1ee18;/所有识别/.background-color:#00deff\9; /IE6、7、8识别/+background-color:#a200ff;/IE6、7识别/_background-color:#1e0bd1;/IE6识别/}设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用 getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：
若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；否则,则由这个祖先元素的 padding box 构成。如果都找不到，则为 initial containing block。
补充：
static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）absolute: 向上找最近的定位为 absolute/relative的元素fixed: 它的 containing block 一律为根元素(html/body)
当一个元素的 visibility 属性被设置成 collapse 值后，对于一般的元素，它的表现跟 hidden 是一样的。
chrome中，使用 collapse 值和使用 hidden 没有区别。firefox，opera和IE，使用 collapse 值和使用 display：none 没有什么区别。
display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
display 属性规定元素应该生成的框的类型；position 属性规定元素的定位类型；float 属性是一种布局方式，定义元素在哪个方向浮动。类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float 不起作用，display 值需要调整。float 或者absolute 定位的元素，只能是块元素或表格。
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 或 fixed
浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。浮动带来的问题：
父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素（内联元素）会跟随其后若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。清除浮动的方式：
父级 div 定义 height 最后一个浮动元素后加空div标签 并添加样式clear:both。包含浮动元素的父标签添加样式 overflow 为 hidden 或 auto。父级 div 定义 zoom
在重合元素外包裹一层容器，并触发该容器生成一个BFC。例子：
.aside { margin-bottom: 100px; width: 100px; height: 150px; background: #f66; } .main { margin-top: 100px; height: 200px; background: #fcc; } .text{ /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/ overflow: hidden; //此时已经触发了BFC属性。 }
自动变成 display:block
通过媒体查询可以为不同大小和尺寸的媒体定义不同的 css，适应相应的设备的显示。
页面加载自上而下 当然是先加载样式。写在 body 标签后由于浏览器以逐行方式对 HTML 文档进行解析，当解析到写在尾部的样式表（外联或写在 style 标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在 windows 的 IE 下可能会出现FOUC 现象（即样式失效导致的页面闪烁问题）
避免过度约束避免后代选择符避免链式选择符使用紧凑的语法避免不必要的命名空间避免不必要的重复最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么避免！important，可以选择其他选择器尽可能的精简规则，你可以合并不同类里的重复规则
CSS 选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。
使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。
何时使用 margin：
需要在 border 外侧添加空白空白处不需要背景色上下相连的两个盒子之间的空白，需要相互抵消时。何时使用 padding：
需要在 border 内侧添加空白空白处需要背景颜色上下相连的两个盒子的空白，希望为两者之和。兼容性的问题：在IE5 IE6中，为float的盒子指定 margin 时，左侧的 margin 可能会变成两倍的宽度。通过改变 padding 或者指定盒子的 display：inline 解决。
当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过 transform 进行 y 轴定位，也可以通过 margin-top 实现 overflow：hidden；transition：all 1000ms ease；
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有 meta 声明的 viewport。
视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。
CSS3 实现优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器 jQuery 实现通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。优点：能兼容到各个版本的，效果可控性好缺点：开发起来对制作者要求高插件实现方式例如：parallax-scrolling，兼容性十分好
单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于 dom 之中，只存在在页面之中。:before 和 :after 这两个伪元素，是在 CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着 Web 的进化，在 CSS3 的规范里，伪元素的语法被修改成使用双冒号，成为 ::before ::after
行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS 中起高度作用的是 height 和 line-height，没有定义 height 属性，最终其表现作用一定是 line-height。单行文本垂直居中：把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中，其实也可以把 height 删除。多行文本垂直居中：需要设置display属性为 inline-block。
p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例
-webkit-font-smoothin g在 window 系统下没有起作用，但是在 IOS 设备上起作用 -webkit-font-smoothing：antialiased 是最佳的，灰度平滑。
37、 CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
参数是 scroll 时候，必会出现滚动条。参数是 auto 时候，子元素内容大于父元素时出现滚动条。参数是 visible 时候，溢出的内容出现在父元素之外。参数是 hidden 时候，溢出隐藏。
多数显示器默认频率是 60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。解决方法：
可以将代码全部写在一排浮动 li 中 float：left 在 ul 中用 font-size：0（谷歌不支持）；可以使用 letter-space：-3px
有空格时候会有间隙 解决：移除空格 margin 正值的时候 解决：margin 使用负值使用 font-size 时候 解决：font-size:0、letter-spacing、word-spacing
以上就是关于“CSS的经典面试题有哪些”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
