CSS面试题总结

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

• 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
• 区 别： IE的content部分把 border 和 padding计算了进去;

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）
• 可继承的样式： font-size font-family color font-style text-indent
• 不可继承的样式：border padding margin width height ;

CSS优先级

• 优先级就近原则，同权重情况下样式定义最近者为准;
• 载入样式以最后载入的定位为准;

优先级为:
同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
!important > id > class > tag
important 比 内联优先级高

CSS3新增伪类有哪些

p:first-of-type 选择属于其父元素的首个

元素的每个

元素。
p:last-of-type 选择属于其父元素的最后

元素的每个

元素。
p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。
p:only-child 选择属于其父元素的唯一子元素的每个

元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
:after 在元素内部最前添加内容
:before 在元素内部最后添加内容

css实现垂直水平居中

• 绝对定位+margin实现,优点：兼容性好。缺点：需要提前知道元素的尺寸
• 绝对定位+transform。优点：无论元素尺寸是多少，都是水平垂直居中的。缺点：兼容性问题
• 绝对定位+margin：auto。注意：绝对定位+上下左右都是0
• flex弹性布局。注意：父元素要有明确的宽和高，如果父元素的body，高度为100%，那么html和body要同时设置高度为100%
• 相对定位+margin:auto+margin-top或transform：translateY(-50%)

css水平、垂直居中的写法

• 水平居中：
  行内元素：text-align：center；
  块级元素：margin：0 auto；
  position：absolute+left：50%+transform：translateX（-50%）
  display：flex+justify-content：center
• 垂直居中：
  设置line-height等于height
  position：absolute+top：50%+transform：translateY（-50%）
  display：flex+align-items：center
  display:table+display:table-cell+vertical-algin:middle

什么是css Hack？

一般来说是针对不同的浏览器写不同的css,就是css Hack。
通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。

行内元素有哪些？块级元素有哪些？空元素有哪些？行内元素和块级元素的区别？

• 行内元素：a,b,span,img,select,input,button,textarea,strong,i
• 块级元素：p,h123456,div,ui,ol,li,dl,dd,dt,blockquote(引用)
• 空元素：br,hr,input,img,link
• 行内元素不可以设置宽高，不独占一行
• 块级元素可以设置宽高，独占一行

1rem、1em、1vh、1px各自代表的含义

• rem:全部长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他单位元素的长度单位 就为rem
• em:子元素字体大小的em是相对于父元素字体大小，子元素的width/height/padding/margin用em的话是相对于该元素的font-size
• vm/vh:全称是Viewport Width和Viewport Height，视图的宽度和高度，相当于屏幕宽度和高度的1%。不过，处理宽度的时候%单位更合适，处理高度的话vh单位更好。
• px:像素（Pixel）。相对于单位长度。像素px是相对于显示器屏幕分辨率而言的。

画一条0.5px的直线

height：1px;
transform:scale(0.5);

画一个三角形

width:0;
height:0;
border-width:100px;
border-style:soild;
border-color:transparent #333 transparent transparents;
transform:rotate(90deg);

< img > 的title和alt有什么区别？

• title是鼠标滑动到元素上显示。
• alt是的特有属性，是图片内容的描述，图片无法加载时显示。可提高图片可访问性，搜索引擎会重点分析。

语义化的理解

• 用正确的标签做正确的事
• HTML语义化就是让页面的内容结构化，便于浏览器、搜索引擎解析
• 在没有样式CSS的情况下，也以一种文档格式显示，并且是容易阅读的
• 搜索引擎的爬虫依赖标记来确认上下文和各个关键词的权重，便于SEO
• 使阅读源码的人对网站更容易将网站分块，便于阅读维护理解

HTML5有哪些新特性？移除了哪些元素？

• 新特性：主要是关于图像、位置、存储、多任务等功能的增加
  1.绘画 canvas
  2.用于媒介回放的audio和video
  3.本地离线存储localStorage长期存储数据，浏览器关闭后数据不会丢失。
  4.sessionstorage的数据在浏览器关闭后自动删除
  5.语义化更好的标签，header、footer、section、nav、article
  6.表单控件，date、time、email、url、search、calendar
  7.新的技术，webworker、websocket
• 移除的元素：
  纯表现的元素：big、center、s、font、basefont、tt
  对可用性产生负面影响的元素：frame、frameset、noframes
• 支持HTML新标签：
  IE6/IE7/IE8支持通过document.creatElement方法产生的标签
  可以通过这一特性让浏览器支持HTML5新标签
  浏览器支持新标签后，还需要添加标签默认的样式

link和@import的区别？Doctype作用？严格模式与混杂模式如何区分？它们有什么意义？

• 1.页面被加载时，link会被同时加载，而@import被加载时，link会被同时加载，而@import引用的CSS会在页面加载完成后加载
  2.import只在IE5以上才能识别，而link是XML标签，没有兼容问题
  3.link方式的样式的权重，高于@import的权重

• <!DECTYPE>声明位于文档的最前面，处于标签之前。告诉浏览器的解析器，用什么文档类型规范来解析文档。

• 严格模式的排版和JS解析是以该浏览器支持的最高标准运行。
  在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防站点无法工作。

HTML5 为什么只需要写<!DECTYPE HTML>？

HTML5不基于SQML，因此不需要对DTD进行引用，但需要DECTYPE来规范浏览器的行为。

CSS sprite是什么，有什么优缺点？

• 概念：将多个小图片拼接到一个图片中，通过background-position和元素尺寸调节需要显示的背景图案。
• 优点：1.减少http请求数，极大提高网页加载速度。
  2.增加图片信息重复度，提高压缩比，减少图片大小
  3.更换风格方便，只需在一张或几张图片上修改颜色样式即可实现
• 缺点：1.图片合并麻烦
  2.维护麻烦，修改一个图片可能需要从新布局整个图片，样式

display：none与visibility：hidden的区别？

• display：none会让元素完全从渲染树中消失，渲染的时候不占据任何空间；
  visibility：hidden不会让元素从渲染树中消失，渲染时元素继续占据空间，只是内容不可见。
• display：none时非继承属性，子孙节点消失由于元素从渲染树消失造成，修改子孙节点属性无法显示。
  visibility：hidden时继承属性，子孙节点消失由于继承了hidden，通过设置visibility：visible可以让子孙节点显示
• 修改常规流程中元素的display通常会造成文档重新排版，修改visibility属性只会造成本元素的重绘。
• 读屏器不会读取display：none元素内容，会读取visibility：hidden元素内容。

link和@import的区别

• link是HTML方式，@import是CSS方式
• link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
• 浏览器对于link支持早于@import，可以使用@import对老式浏览器隐藏样式
• @import必须在样式规则之前，可以在CSS文件中引用其他文件
• 总体来树，link优于@import

什么是FOUC？如何避免？

• Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再重新显示文档，造成页面闪烁
• 解决：把样式表放到文档的head

如何创建块级格式化上下文（block formatting context）？BFC有什么用？

• 创建规则：
  根元素
  浮动元素（float不是none）
  绝对定位元素（position的值为absoulte或fixed）
  display的值为inline、table-cell、table-caption、flex、inline-flex之一的元素
  overflow不是visible的元素
• 作用：
  可以包含浮动元素
  不被浮动元素覆盖
  阻止父子元素的margin折叠

css3有哪些新特性？

• 增加各种css选择器
  属性以什么开头的 a[target^=“a”]{}
  属性以什么结尾的 a[target$=“a”]{}
  属性值包含什么 a[targer*=“icon”]{}
• 新增伪类选择器
  选择第n个元素 div:nth-child(n){}
  改变奇数项的样式 div:nth-child(2n+1){}
  改变偶数项的样式 div:nth-child(2n){}
  选择每个被选中的元素 input:checked{}
• 圆角 border-radius
• 多列布局
  column-count：分列的个数
  column-gap：列之间的间隔
  column-width：列的宽度
  column-rule：列之间的分割线
• 阴影/文字特效 box-shadow(text-shadow):阴影在X轴的偏移(可负) 在Y轴的偏移 阴影模糊程度 颜色 内阴影(inset);
• 线性渐变 background：linear-gradient(20deg 颜色 颜色)
• 旋转 transform:rotate(60deg)
  缩放 transform:scalc(0.5)
  倾斜 transform:skew(30deg)

display有哪些值？

• block 像块级元素一样显示
• none 缺省值，此元素不会被显示
• inline-block 像行内元素一样显示，但其内容会像块级元素一样显示
• table 此元素作为块级表格显示
• inherit 继承父元素display的值
• list-item 像块级元素显示，并添加样式列表标记

position的值

• absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位
• fixed 生成绝对定位的元素，相对于浏览器窗口进行定位
• relative 生成相对定位的元素，相对于其正常位置进行定位
• static 默认值，没有定位，元素出现在正常的流中
• inherit 规定从父元素继承position的值

display：inline-block 什么时候不会显示空隙？

• 移除空格
• 使用margin负值
• 使用font-size：0
• letter-spacing
• word-spacing

在网页中的使用应该使用奇数还是偶数的字体？为什么？

偶数字号相对更容易和web设计的其他部分构成比例关系

::before和:after中双冒号和单冒号有什么区别？解释一下这两个伪元素的作用？

单冒号用于CSS3伪类。双冒号用于CSS3伪元素。
作用：::before用于创建一个伪元素
用于区分伪类和伪元素
（新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。）

请解释一下为什么需要清除浮动？清除浮动的方式

• 清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
• 解决：
  1.在最后一个浮动元素后面添加空元素，并且clear：both；
  2.父元素：overflow：auto（hidden对SEO不友好）
  3.父元素：:after
  4.父元素定义height

CSS优化、提高性能的方法有哪些？

• 提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性;
• 关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）；
• 如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）；
• 使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；

margin重叠

• 外边距重叠是指两个垂直相邻的块级元素，当上下两个边距相遇时，起外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。
• 解决：
  1.兄弟间重叠时
  底部元素变为行内盒子(display: inline-block);
  底部元素设置flot
  底部元素的position的值为absolute/fixed
  2.父元素与子元素重叠
  父元素加入(overflow: hidden);
  父元素添加透明边框(border:1px solid transparent);
  子元素变为行内盒子(display: inline-block);
  子元素加入浮动属性或定位