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/程度居中/

三角款式