!important声明的样式优先级最高，如果有冲突就会估计。 如果优先级相同，则选择最后出现的样式。 继承样式的优先级最低。
5. CSS3中有哪些新的伪类？
p:first-of-type 选择属于其父元素的第一个元素
p:last-of-type 选择属于其父元素的最后一个元素
p:only-of-type 选择作为其父元素的唯一元素的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled:disabled 表单控件的禁用状态。
:checked 单选按钮或复选框被选中。
6.如何让div居中？ 如何使浮动元素居中？ 如何让绝对定位的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;
还有一种利用flexbox越来越高贵的居中方式，稍后我会整理一下。
7、展示的价值是什么？ 解释一下它们的作用？
内联（默认）——内联
无——隐藏
块——块显示
table--表格显示
列表项——项目列表
内联块
8.职位的价值？
static（默认）：按照正常文档流程排列；
relative（相对定位）：不脱离文档流，通过上、下、左、右定位来参考自身的静态位置；
Absolute（绝对定位）：引用距离它最近的一个非静态父元素，通过上、下、左、右定位；
fixed（固定定位）：固定参考对象是可见窗口。
9.CSS3有哪些新特性？
RGBA 和透明度 background-imagebackground-origin(content-box/padding-box/border-box) background-sizebackground-repeatword-wrap （对长的不可分割的短语进行换行） word-wrap: 断词 text Shadow: text-shadow : 5px5px5px #FF0000； （水平阴影、垂直阴影、模糊距离、阴影颜色） font-face 属性：定义自己的字体圆角（边框直径）：border-radius 属性用于创建圆角边框 图片： border-image: url(border. png）3030圆形框阴影：box-shadow：10px10px5px#888888媒体查询：定义两套css，当浏览器规范发生变化时将使用不同的属性
10.请解释一下CSS3 flexbox（弹性盒子布局模型）以及适用场景？
此布局模型的目的是提供一种越来越有效的方法来布局、对齐和分配容器中的项目空间。 传统的布局形式中，块布局是从上到下沿垂直方向排列块； 而内联布局则将块沿水平方向排列。 Flexbox 布局没有这种内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合联通后端开发，在Android和ios上也完美支持。
11.纯CSS创建三角形的原理是什么？
首先需要将元素的长度和高度设置为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;
12、如何设计全屏字符布局？
第一个真实角色：
三个块的高度和宽度确定； 内部块以 margin:0auto 居中； 下面的两个块没有用 float 或 inline-block 包裹； 使用边距调整位置以使它们居中。
第二个全屏字符布局：
里面的div设置为100%，下面的div分别为50%宽，然后使用float或者inline使其不换行。
13. 常见的兼容性问题？
不同浏览器中选项卡的默认边距和内边距是不同的。 *{margin:0;padding:0;}IE6双边边距bug：当块属性标签浮动且有水平边距时，IE6中显示的边距大于设置。 黑客：显示：内联； 将其转换为内联属性。 一种逐步识别的形式，逐渐将部分从整体中排除。 首先，巧妙地使用“9”标记将 IE 与所有情况区分开来。 然后，再次使用“+”将IE8与IE7、IE6分开，这样IE8就已经被独立识别了。 {background-color:#f1ee18;/*所有标识*/.background-color:#00deff9;/*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 属性的顺序：LVHA(lovehate):a:link{}a:visited{}a:hover{}a:active{}
14. 为什么要初始化CSS样式
由于浏览器兼容性问题，不同浏览器对某些标签的默认值是不同的。 如果CSS没有初始化，不同浏览器之间的页面显示往往会存在差异。
15、绝对包含块估计法和普通流有什么区别？
无论属于哪种类型，首先要找到其祖先元素中最近位置值不为静态的元素，然后判断：
如果该元素是内联元素，则containingblock是可以包含该元素生成的第一个和最后一个inlinebox的paddingbox（除了margin和border之外的区域）的最小正方形； 否则，它由该祖先元素的 paddingbox 组成。
如果找不到，则为初始包含块。
补充：
static（默认）/relative：简单来说，就是其父元素的内容框（即去掉padding的部分）absolute：找到定位为absolute/relative的最近的元素。 固定：它的包含块始终是根元素（html/body）
16.CSS中的visibility属性有collapse属性值吗？ 不同浏览器之间有什么区别？
当元素的可见性属性设置为折叠值时，其行为与普通元素的隐藏行为相同。
在chrome中，使用collapse值和使用hidden没有区别。 firefox、opera和IE，使用collapse值和使用display:none没有区别。
17.display:none 和visibility:hidden 有什么区别？
display: none 不显示对应元素，不再在文档布局中分配空间（回流+重绘）
visibility:hidden 隐藏对应的元素，并且仍然保留文档布局中的原始空间（重绘）
18. 当position、display、overflow、float这些特性相互叠加时会发生什么？
display 属性指定元素应生成的框的类型； position属性指定元素的定位类型； float 属性是一种布局形式，定义元素浮动的方向。
类似于优先级机制：position:absolute/fixed 优先级最高。 当它们存在时，浮动不起作用，并且需要调整显示值。 float或absolute定位的元素只能是块元素或表格。
19. BFC规范的理解（块级低级上下文：blockformattingcontext）？
BFC指定如何布局内部BlockBox。
定位方案：
内部盒子将在垂直方向上一个接一个地放置。 Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会重叠。 每个元素的 marginbox 的左侧，接触包含块的 borderbox 的一侧。 BFC的区域不会与floatbox重叠。 BFC是页面上一个隔离独立的容器，容器上的子元素不会影响外部元素。 在估计BFC的高度时，浮动元素也会参与估计。
满足以下条件之一即可触发BFC
根元素，即htmlfloat的值不为none（默认）overflow的值不可见（默认）display的值为inline-block、table-cell、table-captionposition为absolute或fixed
20、为什么会出现浮动，什么时候需要消除？ 消除浮动表格？
浮动元素遇到其封闭边框或浮动元素的边框徘徊。 由于浮动元素不在文档流中，因此文档流的块框的行为就像浮动框不存在一样。 浮动元素悬停在文档流中的块框上。
浮动问题：
父元素的高度难以扩展，影响到与父元素同级的元素。 与浮动元素处于同一级别的非浮动元素（内联元素）将跟随。 如果不是第一个浮动的元素，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
删除浮动的表单：
父div定义了最后一个浮动元素的高度后，添加一个空的div标签并添加样式clear:both。 为包含浮动元素的父标签添加样式溢出到隐藏或自动。 父div定义缩放
21.上下边距重叠问题
在重合元素外面包裹一层容器溢出css，并触发容器生成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属性。 }
22、设置元素浮动后，元素的显示值是多少？
手动制作显示：块
23.您曾经使用过媒体查询来进行移动端的布局吗？
通过媒体查询可以为不同尺寸和规格的媒体定义不同的css，以适应相应设备的显示。
CSS 内部：@mediaonlyscreenand(max-device-width:480px){/css style/}
24.你使用CSS预处理器吗？
少点粗俗
25、优化CSS、提高性能的方法有哪些？
防止过度约束，防止后代选择器，防止链式选择器，使用紧凑语法，防止不必要的命名空间，并防止不必要的重复。 最好使用语义表达的名称。 一个好的类名应该描述它是什么而不是它看起来像什么！ 重要的是，您可以选择其他选择器来尽可能简化规则，您可以合并不同类中的重复规则
26.浏览器如何解析CSS选择器？
CSS 选择器是从右到左解析的。 如果从左到右的匹配发现不符合规则，就需要回溯，这会损失很多性能。 如果是从右向左匹配，则先找到所有最右边的节点，对于每个节点，向下查找其父节点，直到找到根元素或满足条件的匹配规则，则本次分支的遍历结束。
两种匹配规则的性能相差很大，因为从右到左匹配在第一步就筛选出了大量不合格的最右边节点（叶子节点），而从左到右匹配规则的性能全部浪费在失败的查找上。
CSS分析完成后，需要将分析的结果与DOMTree的内容一起进行分析，构建RenderTree，最后用它来进行绘制。 在构建 RenderTree 时（WebKit 中的“Attachment”过程），浏览器必须根据 CSS 分析结果（StyleRules）确定为 DOMTree 中的每个元素生成哪种类型的 RenderTree。
27. 在网页中应该使用优质字体还是奇数字体？ 为什么？
使用偶数字体。 偶数相对更容易与网页设计的其他部分形成比例关系。 Windows自带的点阵黑体（中一黑体）从Vista开始只提供12、14、16px三种点阵尺寸，而13、15、17px则使用更小的点阵。 （即每个单词占用的空间大了1px，但点阵没有变化），所以稍微稀疏。
28、margin和padding适合什么场景？
何时使用边距：
需要在边框两侧添加空格。 上下背景颜色相连的两个袋子之间的空白不需要，需要相互抵消。
何时使用填充：
需要在边框外添加一个空白，并且要求上下背景颜色相连的两个包的空白，希望是两者之和。
兼容性问题：在IE5IE6中，为浮动包指定边距时，左边距的长度可能会加倍。 通过更改 padding 或指定 display: inline 的包来解决。
29、元素的垂直比例设置是相对于容器的高度吗？
通过比例设置元素的长度时，是相对于父容器的长度来估计的，并且，对于一些表示垂直距离的属性，如padding-top、padding-bottom、margin-top、margin-bottom溢出css，等等，在缩放它们时，它们也是基于父容器的长度，而不是高度。
30、全屏滚动的原理是什么？ 使用了 CSS 的哪些属性？
原理：有点类似轮播，整体元素还是排列的。 假设有5个全屏页面需要显示，所以高度为500%，只显示100%，其余的可以通过transform定位在y轴上，或者通过margin-top实现overflow:hidden ; 过渡：全部1000msease；
31.什么是响应式设计？ 响应式设计的基本原则是什么？ 如何兼容低版本IE？
响应式网页设计（Responsive Web design）是一个可以兼容多种终端的网站，而不是为每个终端制作特定的版本。
基本原理是通过媒体查询来衡量不同设备屏幕规格进行处理。
页颈必须具有由元声明的视口。
32.视差滚动的效果如何？
视差滚动通过在网页向上滚动时控制背景以比前景慢的速度滚动来创建令人惊叹的 3D 效果。
CSS3实现的优点：开发时间短，性能和开发效率较好，缺点是不兼容低版本浏览器。 jQuery实现控制不同层的滚动速度，预估每层的时间，控制滚动效果。优点：兼容各种版本，疗效好，可控性好缺点：开发后对生产者要求高插件化实现方式如：视差滚动，兼容性很好
33. ::before 和 :after 中的双引号和单引号有什么区别？解释一下这两个伪元素的作用
单引号 (:) 用于 CSS3 伪类，双引号 (::) 用于 CSS3 伪元素。 ::before 是一个伪元素，定义在元素主体的内容之前，并且存在子元素。 它不存在于dom中，只存在于页面中。
:before 和 :after 这两个伪元素是 CSS2.1 中新增的。 本来，伪元素的前缀使用单引号句型，但随着Web的发展，在CSS3规范中，伪元素的句型改为使用双引号，变成::before::后
34.如何理解line-height？
列宽是指一行文本的高度，特别是两行文本的基线之间的距离。 在 CSS 中，高度和行高发挥着作用。 height属性没有定义，最终表现一定是line-height。
单行文本垂直居中：将line-height的值设置为与height相同大小可以实现单行文本垂直居中，虽然height也可以删除。
多行文本垂直居中：display属性需要设置为inline-block。
35.如何让Chrome支持大于12px的文本？
p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例
36.如何用CSS使页面上的字体更清晰、更细？
-webkit-font-smoothing 在window系统下不起作用，在IOS设备上起作用 -webkit-font-smoothing：抗锯齿最好，平滑灰度。
37. 位置如何处理：固定； 安卓下无效？
38.如果需要自动写动漫，您认为最小时间间隔是多长，为什么？
大多数显示器的默认频率为60Hz，即每秒刷新60次，因此理论最小间隔为1/60*1000ms=16.7ms。
39、li和li之间看不见空白的原因是什么？ 解决办法有哪些？
行框的排列会受到中间空白（回车空格）等的影响，因为空白也是一个字符，这个空白也会用来占据空间，所以就会出现间隙，如果字符大小设置为0，就不会出现空白。
解决方案：
可以将所有代码写在一行浮动的li float: left中使用font-size: 0 in ul（微软不支持）； 您可以使用字母空格：-3px
40、display:inline-block什么时候会显示间隙？
当有空格时，就会有间隙。 解决办法：去掉空格。 当margin为正数时，解决方案：使用margin为负值。 使用font-size，解决方案：font-size:0、letter-spacing、word-spacing
41.有一个高度自适应的div，上面有两个div，一个高度为100px，希望另一个填满剩余高度
内部div使用position:relative; 高度要求的自适应div使用position:absolute;top:100px;bottom:0;left:0
42.解释png、jpg和gif的图像格式以及何时使用它们。 你学过webp吗？
PNG是便携式网络图形（PortableNetworkGraphics）的一种无损数据压缩位图文件格式。 优点是：压缩比高、色调好。 大多数地方都可以使用。 JPG是一种用于照片的失真压缩方法。 它是一种破坏性压缩方法。 它在颜色和颜色平滑变化方面做得很好。 在 www 上，用于存储和传输照片的格式。 gif 是一种位图文件格式，可以以 8 位颜色再现真实色调图像。 可以达到动画的效果。 webp格式是微软于2010年推出的图片格式，压缩率仅为jpg的2/3，尺寸比png小45%。 缺点是压缩时间较长，兼容性不好。 目前，微软和Opera都支持它。
43、写在body后面和body前面的style标签有什么区别？
从上到下的页面加载实际上首先加载样式。
将其写在body标签之后，因为浏览器是逐行解析HTML文档的。 当写在最后的样式表（outline或者写在style标签中）解析完毕后，浏览器会停止之前的渲染，等待加载解析样式表后重新渲染，IE下可能会出现FOUC现象Windows上（即样式无效导致的页面闪烁问题）
44.CSS属性overflow属性定义了如何处理溢出元素内容区域的内容？
当参数为scroll时，会出现滚动条。
当参数为auto时，当子元素的内容小于父元素时，就会出现滚动条。
当参数可见时，溢出内容出现在父元素之外。
当参数隐藏时，溢出也被隐藏。
45. 解释 CSSSprite
将一个页面涉及到的所有图片包含到一张大图片中，然后使用CSS的background-image、background-repeat、background-position组合进行背景定位。 借助CSSPrites，可以减少网页的http请求，从而大大提高页面的性能； CSSPrites 可以减少图像的字节数。
写在最后
获取最新最全IT技能，免费发放各类编程资料
发表评论