前端知识点面试题-CSS基础篇

1、前端知识点试题-CSS基础篇（1）章录1、说出标准的CSS的盒模型是什么？与低版本IE的盒模型有什么不同的？盒模型就是 元素在页中的实际占位，有两种：标准盒模型和IE盒模型盒模型就是 元素在页中的实际占位，有两种：标准盒模型和IE盒模型标准(W3C)盒模型：内容content+填充padding+边框border+边界margin 宽指的是 content 的宽低版本IE盒模型：内容（content+padding+border）+ 边界margin， 宽指的是 content+padding+border 部分的宽2、CSS 如何设置这两种模型？box-sizing: content-box

2、; box-sizing: border-box默认为content-boxbox-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 规范中

3、的个概念,它是个独容器，决定了元素如何对其内容进定位,以及与其他元素的关系和相互作。）个页是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。不同类型的 Box，会参与不同的Formatting Context（决定如何渲染档的容器），因此Box内的元素会以不同的式渲染，也就是说BFC内部的元素和外部的元素不会互相影响。BFC规定了内部的 Block Box 如何布局。 定位案：内部的 Box 会在垂直向上个接个放置。BFC规定了内部的 Block Box 如何布局。 定位案：内部的 Box 会在垂直向上个接个放置。Box 垂直向的距离由margin 决

4、定，属于同个 BFC 的两个相邻 Box 的 margin 会发重叠。每个元素的 margin box的左边，与包含块 border box 的左边相接触。BFC 的区域不会与 float box 重叠。BFC 是页上的个隔离的独容器，容器的元素不会影响到外的元素。计算 BFC 的度时，浮动元素也会参与计算。满下列条件之就可触发 BFC根元素，即 htmlfloat 的 值 不 为 none（ 默 认 ） overflow 的值不为visible（默认）display 的值为 inline-block、table-cell、table-caption position的值为 absolute

5、或 fixed4、CSS margin上下重叠问题块元素在垂直向上的margin会有重叠现象。 如果display都是block，有三种情况：块元素在垂直向上的margin会有重叠现象。 如果display都是block，有三种情况：外边距均为正数，竖直向上会选择最的外边距作为间隔正负，间距 = 正 - |负|两个负，间距 = 0 - 绝对值最的那个设置display: inline-block的盒不会有margin重叠，position: absolute的也不会出现。5、CSS选择器有哪些？哪些属性可以继承？CSS优先级算法如何计算？CSS选择符：id选择器（ # CSS选择符：id选择器

6、（ # myid）类选择器（.myclassname）标签(元素)选择器（div, h1, p）相邻选择器（h1 + p）选择器（ulli）后代选择器（li a）通配符选择器（ * ）属性选择器（arel = “external”）伪类选择器（a:hover, li:nth-child）伪元素选择器、分组选择器。继承性：可继承的样式：font-size, font-family, color，ul，li，dl，dt，dd； 不可继承的样式：border, padding, margin, width, height优先级（就近原则）：!important id class tag !impor

7、tant 内联优先级优先级算法计算：优先级就近原则，同权重情况下样式定义最近者为准 !importantid classtagmportant内联优先级元素选择符的权值：元素标签（派选择器）：1，class选择符：10，id选择符：100，内联样式权值最，为1000!important声明的样式优先级最，如果冲突再进计算。如果优先级相同，则选择最后出现的样式。继承得到的样式的优先级最低。ID 类 标签 相邻 选择器 后代选择器 * 属性 伪类important 内样式 件内部style link引的外部css件同类选择器，层级越深优先级越同件，同层级的同类选择器，下的样式会覆盖上的6、CSS3

8、新增伪类有那些?p:first-of-type 选择属于其元素的个元素的每个元素。 p:last-of-type 选择属于其元素的最后元素的每个元素。p:only-of-type 选择属于其元素唯的元素的每个元素。 p:only-child 选择属于其元素的唯元素的每个元素。p:nth-child(2) 选择属于其元素的第个元素的每个元素。 :enabled :disabled 控制表单控件的禁状态。p:first-of-type 选择属于其元素的个元素的每个元素。 p:last-of-type 选择属于其元素的最后元素的每个元素。p:only-of-type 选择属于其元素唯的元素的每个元素

9、。 p:only-child 选择属于其元素的唯元素的每个元素。p:nth-child(2) 选择属于其元素的第个元素的每个元素。 :enabled :disabled 控制表单控件的禁状态。:checked，单选框或复选框被选中。 :before在元素之前添加内容，也可以来做清除浮动 :after在元素之后添加内容7、display各项值的含义8、关于居中平居中div： 平居中div： margin: 0 auto;居中.wrapwidth:300px; height:300px; position:relative; background-color:#ccc;spanfloat:left

10、; position:absolute; top:50%;left:50%;transform:translate(-50%,-50%);当元素宽的固定居中.wrapwidth:300px; height:300px; position:relative; background-color:#ccc;spanfloat:left; position:absolute; backgroond-color:red; width:150px; height:50px;top:50%; left:50%;margin:-25px 0px 0px -75px;垂直居中个img（display : tab

11、le-cell 或者 position定位）.wrap display: table-cell; width: 300px;height: 300px;border: 1px solid #cccccc; text-align: center;vertical-align: middle;img width: 150px; height: 150px;设置绝对定位的div平垂直居中position: absolute; width: 200px; height: 100px; margin: auto;position: absolute; width: 200px; height: 100p

12、x; margin: auto;left: 0;right: 0; top:0; bottom:0;border: 1px solid black;设置本的垂直居中把line-height值设置为height样的值可以实现单字的垂直居中还有更加优雅的居中式就是 flex布局，但需要注意其兼容性还有更加优雅的居中式就是 flex布局，但需要注意其兼容性9、纯CSS实现个三形width: 0;width: 0;height: 0;border-top: 20px solid transparent; border-left: 20px solid transparent; border-right

13、: 20px solid transparent; border-bottom: 20px solid #ff0000;10、为什么要初始化 CSS 样式因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页显差异。 当然，初始化样式会对SEO有定的影响，但鱼和熊掌不可兼得，但求影响最的情况下初始化。11、display:none 与 visibility:hidden 的区别是什么？display : none 隐藏对应的元素，在档布局中不再分配空间（回流+重绘） visibility:hideen 隐藏对应的元素，在档布局中仍保留原来的空间

14、（重绘）display : none 隐藏对应的元素，在档布局中不再分配空间（回流+重绘） visibility:hideen 隐藏对应的元素，在档布局中仍保留原来的空间（重绘）12、position 跟 display、overflow、float 这些特性相互叠加后会怎么样？display属性规定元素应该成的框的类型； position属性规定元素的定位类型； display属性规定元素应该成的框的类型； position属性规定元素的定位类型； ，float不起作，display值需要调整。float或者absolute 定位的元素，只能是块元素或表格。13、为什么会出现浮动? 什么时候

15、需要清除浮动？清除浮动有哪些式？出现浮动的原因：浮动元素碰到包含它的边框或者浮动元素的边框停留。关于css的定位机制：普通流，浮动，绝对定位（position：fixed是position：absolute的个类）。当浮动框度超出包含框的时候，就会出现包含框不会动伸缩度类笔盒浮动元素。所以，只含有浮动元素的容器在显时不需要考虑元素的位置，就造成显容器像空容器样。浮动带来的问题：元素的度法被撑开，影响与元素同级的元素 浮动带来的问题：元素的度法被撑开，影响与元素同级的元素 （内联元素）会跟随其后若第个元素浮动，则该元素之前的元素也需要浮动，否则会影响页显的结构。清除浮动的式：浮动的元素添加 ov

16、erflow: hidden浮动的元素添加伪类 :afterclear: both14、什么是CSS 预处理器 / 后处理器？less，增强了css代码的复性，还有层级、mixin、变量、循环、函数等，具有很便 的UI组件模块化开发能，极的提作效率。规范处理CSS，让其更有效；前最常做的是给CSS属性添加浏览器私有前缀， 实现跨浏览器兼容性的问题。CSS 预处理器为 CSS 增加些编程的特性，需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使变量、简单的逻辑程序、函数（如右侧代码编辑器中就使了变量$color）等等在编程语中的些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳

17、，更易于代码的维护等诸多好处。CSSLESSStylus Turbine Swithch CSS CSS Cacheer DT CSS15、CSS优化、提性能的法有哪些？避免过度约束 避免不必要的命名空间避免不必要的重复最好使表语义的名字。个好的类名应该是描述他是什么不是像什么避免！important，可以选择其他选择器尽可能的精简规则，你可以合并不同类的重复规则修复解析错误避免使多类选择符移除空的css规则正确使display的属性：由于display的作，某些样式组合会效，徒增样式体积的同时也影响解析性能。display:inline后不应该再使width、height、margin、pa

18、dding以及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标识符，主要考虑到样式重

19、性以及与页的耦合性。不给h1h6元素定义过多的样式全站统定义遍heading元素即可，若需额外定制样式，可使其他选择符作为代替。不重复定义h1h6元素值为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、全屏滚动的原理是什么？到了C