css经典面试题
- 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
- box-sizing属性？
- 请列举一下你所知道的css 隐藏元素的方法？
- CSS 常见的伪类和伪元素有哪些，他们的区别？
- CSS选择器有哪些？哪些属性可以继承？CSS优先级算法如何计算？
- 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？如何居中一个img（position定位）
- display 有哪些值？说明他们的作用?
- position 的值？
- CSS3有哪些新特性？
- 用纯CSS创建一个三角形的原理是什么？
- 为什么要初始化 CSS 样式
- position 跟 display、overflow、float 这些特性相互叠加后会怎么样？
- 为什么会出现浮动? 什么时候需要清除浮动？清除浮动有哪些方式？
- 设置元素浮动后，该元素的 display 值是多少？
- 移动端的布局用过媒体查询吗？
- 什么是CSS 预处理器 / 后处理器？大家为什么要使用他们？
- CSS优化、提高性能的方法有哪些？
- 在网页中的应该使用奇数还是偶数的字体？为什么呢？
- margin 和 padding 分别适合什么场景使用？
- 元素竖向的百分比设定是相对于容器的高度吗？
- 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
- 怎么让Chrome支持小于12px 的文字？
- 让页面里的字体变清晰，变细用CSS怎么做？
- 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
- CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
- 有哪项方式可以对一个 DOM 设置它的CSS样式？
- CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？
- 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？
- px、em、rem的区别
- 前端页面有哪三层构成，分别是什么?
- CSS引入的方式有哪些？使用Link和@import有什么区别？
- 介绍一下你对浏览器内核的理解
- 如何水平并且垂直居中一张背景图
- 强制换行的css是什么？
css面试题解析
介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
盒子模型就是 元素在网页中的实际占位，有两种：标准盒子模型和IE盒子模型
- 标准(W3C)盒子模型：内容content+填充padding+边框border+边界margin
宽高指的是 content 的宽高- 低版本IE盒子模型：内容（content+padding+border）+ 边界margin，
宽高指的是 content+padding+border 部分的宽高
问题的拓展：
CSS 如何设置这两种模型？
box-sizing : content-box box-sizing : border-box
JS 如何设置获取盒模型对应的宽和高？
dom.style.width/height;//设置获取的是内联样式dom.currentStyle.width/height;//只有IE支持window.getComputedStyle(dom).width/height;//兼容性好dom.getBoundingClientRect().width/height;//适用场所：计算一个元素的绝对位置
box-sizing属性？
用来控制元素的盒子模型的解析模式，默认为content-box
- context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽
- border-box：IE 传统盒子模型。设置元素的 height/width 属性指的是 content + border + padding 部分的高/宽
请列举一下你所知道的css 隐藏元素的方法？
- display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
- visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
CSS 常见的伪类和伪元素有哪些，他们的区别？
- 伪元素主要是用来创建一些不存在原有dom结构树种的元素
- 伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式
- 伪元素的操作对象是新生成的dom元素，而不是原来dom结构里就存在的；而伪类恰好相反，伪类的操作对象是原来的dom结构里就存在的元素。
伪元素与伪类的根本区别在于：操作的对象元素是否存在于原来的dom结构里- 常见的伪类：
:link 应用于未被访问过的链接
:visited 应用于被访问过的链接
:hover 应用于鼠标悬停到的元素
:first-child 选择某元素第一个子元素
:last-child 选择最后一个。。。。。
:disabled 表单元素禁用
:enabled 匹配没有被禁用的元素- 常见的伪元素：
::first-letter 选择元素文本的第一个字
::first-line 选择元素文本的第一行
::before 在元素内容的最前面添加新内容。
::after 在元素内容的最后面添加新内容。
CSS选择器有哪些？哪些属性可以继承？CSS优先级算法如何计算？
- CSS选择符：
- id选择器（ # myid）
- 类选择器（.myclassname）
- 标签(元素)选择器（div, h1, p）
- 相邻选择器（h1 + p）
- 子选择器（ul > li）
- 后代选择器（li a）
- 通配符选择器（ * ）
- 属性选择器（a[rel = "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 ]
!important 比内联优先级高
- 优先级算法计算
优先级就近原则，同权重情况下样式定义最近者为准
!important>id >class>tag
important比内联优先级高
元素选择符的权值：元素标签（派生选择器）：1，class选择符：10，id选择符：100，内联样式权值最大，为1000
!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。
如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？如何居中一个img（position定位）
- 水平居中div：
border: 1px solid red;
margin: 0 auto;
height: 50px;
width: 80px;
- 水平垂直居中一个浮动元素（position定位）
第一种：未知元素宽高
<div class="outer">
<span>我想居中显示</span>
</div>
<style>
.outer{
width:300px;
height:300px;
position:relative;
background-color:#ccc;
}
span{
float:left;
position:absolute;
backgroond-color:red;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>
第二种：已知元素宽高的
<div class="outer">
<span>我想居中显示</span>
</div>
<style>
.outer{
width:300px;
height:300px;
position:relative;
background-color:#ccc;
}
span{
float:left;
position:absolute;
backgroond-color:red;
width:150px;
height:50px;
top:50%;
left:50%;
margin:-25px 0px 0px -75px;
}
</style>
- 绝对定位的div水平垂直居中：
border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: auto;
left: 0;
right: 0;
top:0;
bottom:0;
- 如何垂直居中一个img（display : table-cell 或者 position定位）
<div class="outer">
<img src="nz.jpg" alt="">
</div>
<style>
.outer{
width: 300px;
height: 300px;
border: 1px solid #cccccc;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img{
width: 150px;
height: 150px;
}
</style>
display 有哪些值？说明他们的作用?
- inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
- block 此元素将显示为块级元素，此元素前后会带有换行符。
- none 此元素不会被显示（隐藏）。
- inline-block 行内块元素。（CSS2.1 新增的值）
- list-item 此元素会作为列表显示。
- table 此元素会作为块级表格来显示（类似table），表格前后带有换行符
position 的值？
- absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。- fixed
生成固定定位的元素，相对于浏览器窗口进行定位。（老IE不支持）
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。- relative
生成相对定位的元素，相对于其正常位置进行定位，不脱离文档流。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。- static
默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）。- inherit: 规定应该从父元素继承 position 属性的值。
CSS3有哪些新特性？
- 新增各种 CSS 选择器 :not(p) 选择每个非p的元素； p:empty 选择每个没有任何子级的p元素（包括文本节点）
- border-radius //用于设置圆角
- 背景 background-clip（规定背景图的绘制区域），background-origin，background-size
- 线性渐变 （Linear Gradients） 向下/向上/向左/向右/对角方向
- 文本效果 阴影text-shadow，textwrap，word-break，word-wrap；
- 2D 转换 transform:scale(0.85,0.90) | translate(0px,-30px) | skew(-9deg,0deg) |rotate()
- 3D转换 perspective()；transform是向元素应用 2D 或者 3D 转换；
- 过渡 transition
- 动画
- 多列布局 （multi-column layout）
- 盒模型
- flex 布局
- 多媒体查询 定义两套css，当浏览器的尺寸变化时会采用不同的属性
用纯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;
为什么要初始化 CSS 样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
position 跟 display、overflow、float 这些特性相互叠加后会怎么样？
- display 属性规定元素应该生成的框的类型；
- position属性规定元素的定位类型；
- float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。
为什么会出现浮动? 什么时候需要清除浮动？清除浮动有哪些方式？
- 出现浮动的原因：
浮动元素碰到包含它的边框或者浮动元素的边框停留。在CSS规范中，浮动定位不属于正常的页面流，而是独立定位的，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。- 关于css的定位机制：普通流，浮动，绝对定位（position：fixed是position：absolute的一个子类）。浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘，所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以，只含有浮动元素的父容器在显示时不需要考虑子元素的位置，就造成显示父容器像空容器一样。
- 浮动带来的问题：
父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。- 清除浮动的方式：
1.父级div定义height
2.最后一个浮动元素后加空 div 标签 并添加样式 clear:both。（理论上能清除任何标签，增加无意义的标签）
3.包含浮动元素的父标签添加样式 overflow 为 hidden 或 auto。
设置元素浮动后，该元素的 display 值是多少？
自动变成display:block
移动端的布局用过媒体查询吗？
通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。
- <head>里边
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">
- CSS :
@media only screen and (max-device-width:480px) {
/css样式/}
什么是CSS 预处理器 / 后处理器？大家为什么要使用他们？
预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
其它 CSS 预处理器语言：
- Sass（SCSS）
- LESS
- Stylus
- Turbine
- Swithch CSS
- CSS Cacheer
- DT CSS
为什么要使用它们？
- 结构清晰，便于扩展。
- 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
- 可以轻松实现多重继承。
- 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。
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时不需要任何单位
标准化各种浏览器前缀：通常将浏览器前缀置于前面，将标准样式属性置于最后，类似：
.foo{
-moz-border-radius: 5px;
border-radius: 5px;
}
- 使用CSS渐变等高级特性，需指定所有浏览器的前缀
- 避免让选择符看起来像正则表达式
- CSS3添加了一些类似~=等复杂属性，也不是所有浏览器都支持，需谨慎使用。
- 遵守盒模型规则（Beware of broken box models）
在网页中的应该使用奇数还是偶数的字体？为什么呢？
使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。
margin 和 padding 分别适合什么场景使用？
◆何时应当使用margin
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。◆何时应当时用padding
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。◆浏览器兼容性问题
在IE5.x、IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决。
元素竖向的百分比设定是相对于容器的高度吗？
当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
- 响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
- 基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
- 页面头部必须有meta声明的viewport。
<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>
怎么让Chrome支持小于12px 的文字？
p{
font-size:10px;
-webkit-transform:scale(0.8);//0.8是缩放比例
}
让页面里的字体变清晰，变细用CSS怎么做？
-webkit-font-smoothing 在 window 系统下没有起作用，但是在 IOS 设备上起作用
-webkit-font-smoothing：antialiased 是最佳的，灰度平滑。
有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0
CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
- 参数是 scroll 时候，必会出现滚动条。
- 参数是 auto 时候，子元素内容大于父元素时出现滚动条。
- 参数是 visible 时候，溢出的内容出现在父元素之外。
- 参数是 hidden 时候，溢出隐藏。
有哪项方式可以对一个 DOM 设置它的CSS样式？
外部样式表，引入一个外部css文件
内部样式表，将css代码放在 <head> 标签内部
内联样式，将css样式直接定义在 HTML 元素内部
CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？
最基本的：设置 display 属性为 none，或者设置 visibility 属性为 hidden
技巧性：设置宽高为 0，设置透明度为 0，设置 z-index 位置在 -1000
行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？
块级元素( block )特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示；
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制；内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的）。
px、em、rem的区别
px 像素 固定单位 它的大小是固定的
em 相对单位 em的值并不是固定的 em会继承父元素的字体大小 会根据父
元素字体大小的变化而变化 一般1em等于16px
rem 他的值也是不固定的 他会根据根元素的大小而变化
前端页面有哪三层构成，分别是什么?
结构层 Html 表示层 CSS 行为层 js
CSS引入的方式有哪些？使用Link和@import有什么区别？
内联，内嵌，外链，导入
- link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义RSS，定义 rel 连接属性等作用，无兼容性，支持使用javascript改变样式；而@import是CSS提供的，只能用于加载CSS，不支持使用 javascript 改变样式；
- 页面被加载的时，link 会被同时加载，而@import 引用的CSS会等到页面加载完再加载；
- import是CSS2.1 提出的，CSS2.1以下浏览器不支持，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。
介绍一下你对浏览器内核的理解
主要分成两部分：渲染引擎（layout engineer或Rendering Engine）和 JS 引擎。
- 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户以及其他它所需要编辑、显示网络的应用程序都需要内核。
- JS引擎则：解析和执行JavaScript 来实现网页的动态效果；
最开始渲染引擎和 JS 并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只渲染引擎。
如何水平并且垂直居中一张背景图
设置 background-position:center;
强制换行的css是什么？
Word-break:break-all;
持续更新中......
