共计 5332 个字符，预计需要花费 14 分钟才能阅读完成。
px rem em 区别
一.px
1. 绝对长度单位。绝对于显示器屏幕分辨率而言。
2. 存在浏览器不兼容问题。
二.em
1. 绝对长度单位。绝对于以后对象内文本字体尺寸。
2.em 值并不是固定的，em 会继承父级元素的大小.
3. 如果父级设置 font-size:20px. 那么 1em=20px. 2em=40px；如果父级设置 font-size 为 30px. 1em=30px. 2em=60px.
4. 存在容易造成字体设置凌乱问题。
三.rem
1. 绝对长度单位。绝对于根节点 html 字体大小来计算。任意浏览器默认字体高都是 16px.
2. 如果 html 根节点设置字体 font-size 为 100px. 则 1em=100px. 2em=200px. 跟父级字体无关。
3. 浏览器兼容性比拟好。
display:none 和 visibility:hidden 的区别？
display:none 暗藏对应的元素，在文档布局中不再给它调配空间，它各边的元素会合拢，
就当他从来不存在。
visibility:hidden 暗藏对应的元素，然而在文档布局中仍保留原来的空间。
CSS 中 link 和 @import 的区别是？
(1) link 属于 HTML 标签，而 @import 是 CSS 提供的;
(2) 页面被加载的时，link 会同时被加载，而 @import 援用的 CSS 会等到页面被加载完再加载;
(3) import 只在 IE5 以上能力辨认，而 link 是 HTML 标签，无兼容问题;
(4) link 形式的款式的权重 高于 @import 的权重.
介绍一下 box-sizing 属性和盒模型？
盒模型：content + border + padding +margin
盒模型分为：根本模型（w3c 规范盒模型）+IE 模型（根本模型 width=content IE 模型 width=content+border+padding）
如何辨别根本模型还是 IE 模型
Css3 新增的属性 Box-sizing 有两个值 content-box（根本模型）和 border-box（IE 模型）
获取盒模型对应的宽高：dom.style.width/height
box-sizing 属性次要用来管制元素的盒模型的解析模式。默认值是 content-box。
content-box：让元素维持 W3C 的规范盒模型。元素的宽度 / 高度由 border + padding + content 的宽度 / 高度决定，设置 width/height 属性指的是 content 局部的宽 / 高
border-box：让元素维持 IE 传统盒模型（IE6 以下版本和 IE6~7 的怪异模式）。设置 width/height 属性指的是 border + padding + content
规范浏览器下，依照 W3C 标准对盒模型解析，一旦批改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不从新计算元素的盒子尺寸，从而影响整个页面的布局。
CSS 选择符有哪些？哪些属性能够继承？优先级算法如何计算？CSS3 新增伪类有那些？
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, text-indent;
不可继承的款式：border padding margin width height ;
优先级为: !important > id > class > tag（important 比 内联优先级高, 但内联比 id 要高）
CSS3 新增伪类举例：
p:first-of-type 抉择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 抉择属于其父元素的最初 <p> 元素的每个 <p> 元素。
p:only-of-type 抉择属于其父元素惟一的 <p> 元素的每个 <p> 元素。
p:only-child 抉择属于其父元素的惟一子元素的每个 <p> 元素。
p:nth-child(2) 抉择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled :disabled 管制表单控件的禁用状态。
:checked 单选框或复选框被选中。
position 的值，relative 和 absolute 别离是绝对于谁进行定位的？
absolute
生成相对定位的元素，绝对于最近一级的 定位不是 static 的父元素来进行定位。fixed（老 IE 不反对）
生成相对定位的元素，绝对于浏览器窗口进行定位。relative
生成绝对定位的元素，绝对于其在一般流中的地位进行定位。static 默认值。没有定位，元素呈现在失常的流中
CSS3 有哪些新个性？
官网教程：https://www.runoob.com/css3/c…
CSS3 实现圆角（border-radius），暗影（box-shadow），
对文字加特效（text-shadow、），线性突变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转, 缩放, 定位, 歪斜
减少了更多的 CSS 选择器 多背景 rgba
在 CSS3 中惟一引入的伪元素是::selection.
媒体查问，多栏布局
border-image
对 BFC 标准的了解？
BFC 是块级格式化上下文，他是页面中绝对独立的一块渲染区域，他决定了外部的子元素如何进行摆放和定位，以及区域外部元素和区域内部元素之间的互相关系。
特点：
1.bfc 能够蕴含浮动元素
2.bfc 所确定的区域不会与内部浮动元素产生重叠
3. 位于同一 bfc 下的相邻块级子元素在垂直方向上产生 margin 重叠
如何创立 bfc :float 值不为 none,overflow 值为 auto,display 值为 inline-block,position 值为 flex 或 absolute
常见兼容性问题？
- png24 位的图片在 iE6 浏览器上呈现背景，解决方案是做成 PNG8. 也能够援用一段脚本解决.
- 浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的 *{margin:0;padding:0;}来对立。
- IE6 双边距 bug: 块属性标签 float 后，又有横行的 margin 状况下，在 ie6 显示 margin 比设置的大。
-
浮动 ie 产生的双倍间隔（IE6 双边距问题：在 IE6 下，如果对元素设置了浮动，同时又设置了 margin-left 或 margin-right，margin 值会加倍。）#box{float:left; width:10px; margin:0 0 0 100px;}
这种状况之下 IE 会产生 20px 的间隔，解决方案是在 float 的标签款式管制中退出 ——_display:inline; 将其转化为行内属性。(_这个符号只有 ie6 会辨认)
-
渐进辨认的形式，从总体中逐步排除部分。
首先，奇妙的应用“\9”这一标记，将 IE 游览器从所有状况中分离出来。
接着，再次应用“+”将 IE8 和 IE7、IE6 拆散开来，这样 IE8 曾经独立辨认。css
.bb{ background-color:#f1ee18;/* 所有辨认 */ .background-color:#00deff\9; /*IE6、7、8 辨认 */ +background-color:#a200ff;/*IE6、7 辨认 */ _background-color:#1e0bd1;/*IE6 辨认 */ } - IE 下, 能够应用获取惯例属性的办法来获取自定义属性,
也能够应用 getAttribute()获取自定义属性;
Firefox 下, 只能应用 getAttribute()获取自定义属性.
解决办法: 对立通过 getAttribute()获取自定义属性. - IE 下,event 对象有 x,y 属性, 然而没有 pageX,pageY 属性;
Firefox 下,event 对象有 pageX,pageY 属性, 然而没有 x,y 属性. - 解决办法：（条件正文）毛病是在 IE 浏览器下可能会减少额定的 HTTP 申请数。
- Chrome 中文界面下默认会将小于 12px 的文本强制依照 12px 显示,
可通过退出 CSS 属性 -webkit-text-size-adjust: none; 解决. - 超链接拜访过后 hover 款式就不呈现了 被点击拜访过的超链接款式不在具备 hover 和 active 了解决办法是扭转 CSS 属性的排列程序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {} - 怪异模式问题：漏写 DTD 申明，Firefox 依然会依照规范模式来解析网页，但在 IE 中会触发怪异模式。为防止怪异模式给咱们带来不必要的麻烦，最好养成书写 DTD 申明的好习惯。当初能够应用 html5 举荐的写法：
<doctype html> - 高低 margin 重合问题
ie 和 ff 都存在，相邻的两个 div 的 margin-left 和 margin-right 不会重合，然而 margin-top 和 margin-bottom 却会产生重合。
解决办法，养成良好的代码编写习惯，同时采纳 margin-top 或者同时采纳 margin-bottom。 - ie6 对 png 图片格式反对不好(援用一段脚本解决)
革除浮动有哪些办法？
浮动元素脱离文档流，不占据空间。浮动元素碰到蕴含它的边框或者浮动元素的边框停留。
1. 应用空标签革除浮动。
这种办法是在所有浮动标签前面增加一个空标签 定义 css clear:both. 弊病就是减少了无意义标签。
2. 应用 overflow。
给蕴含浮动元素的父标签增加 css 属性 overflow:auto; zoom:1; zoom:1 用于兼容 IE6。
3. 应用 after 伪对象革除浮动。
该办法只实用于非 IE 浏览器。具体写法可参照以下示例。应用中需注意以下几点。一、该办法中必须为须要革除浮动元素的伪对象中设置 height:0，否则该元素会比理论高出若干像素；
.clearfix:after;{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}实现两栏布局的形式？（假如左侧宽 200，右侧自适应 -）
1. 应用浮动：左侧盒子应用浮动 float: left; 右侧盒子应用 margin-left：200px
2. 应用定位：absolute+margin
3. 应用 flex：大盒子 flex 右盒子 flex 设成 1
4. 应用浮动+BFC：左盒子应用 float：left 右盒子设置 overflow: hidden(float+BFC)
实现三列布局的形式？(假如高度已知，请写出三栏布局，其中左右宽度各为 300px，两头自适应)
<div class=”box1″>
<div class=”left1″></div>
<div class=”right1″></div>
<div class=”center1″></div>
</div>
1. 利用浮动：左右盒子 float left 和 right center 设置 margin-left：300px 和 margin-right：300px
2. 利用相对定位：左右盒子设置相对定位 absolute left：0 right：0 top：0，center 设置 margin-left：300px 和 margin-ringht：300px
3. 利用弹性布局 felx：大盒子 box1 设置 display：felx，center 盒子设置 felx：1
4. 利用 display:table 布局：大盒子设置 display:table，left 和 right 盒子设置 display:table-cell
垂直程度居中？
1. 程度居中：给 div 设置一个宽度，而后增加 margin:0 auto 属性
2. 把元素变成定位元素 position:absolute;
设置元素的定位地位，间隔上、下、左、右都为 0
left:0;
right:0;
top:0;
bottom:0;
margin：auto；
* 兼容性较好，毛病: 不反对 IE7 以下的浏览器
3. 把元素变成定位元素 position:absolute;
设置元素的定位地位，间隔上、左都为 50%
left:50%;
top:50%;
设置元素的左外边距、上外边距为宽高的负 1 /2
margin-left:-100px;
margin-top:-200px;
}
* 兼容性好; 毛病: 必须晓得元素的宽高
4. 把元素变成定位元素 position:absolute+transform;
设置元素的定位地位，间隔上、左都为 50%
left:50%;
top:50%;
设置元素的绝对于本身的偏移度为负 50%(也就是元素本身尺寸的一半)
transform:translate(-50%,-50%);
* 这是 css3 里的款式; 毛病: 兼容性不好，只反对 IE9+ 的浏览器
5. 利用 flex 布局
父盒子设置 display:flex;
align-items:center;/垂直居中/
justify-content:contenr/程度居中/
三角款式