目录

1. 介绍一下盒子模型

2. box-sizing属性 

3. CSS选择器的权重的概念 

4. 介绍一下BFC 

5. 介绍一下块级元素和内联元素的区别 

5.    常见兼容问题 

6.为什么要初始化css样式 

7. 如何清除浮动（方法，优缺点，清除方法的原理） 

8.如何水平垂直居中 

9．  两列布局 

10． 三列布局 

11.栅格布局如何实现 

12. css选择器有哪些？ 

13. Css哪些属性可以继承 

14. Css新增伪类有哪些 

15. px,em,rem区别 

16. position的属性值 

17. position:absolute与fixed的共同点和不同点 

18. display的属性值（常用） 

19.图片的alt和title属性有什么区别 

20.超链接在新窗口打开应该添加什么属性 

21.   display:none, visibility: hidden的区别 

22.   让一个元素隐藏，有哪些css属性可以做到 

23.   margin和padding的使用场景 

24.   link和@import区别 

25.css3新特性 

1.介绍一下盒子模型

CSS盒模型：网页设计中css技术所使用的一种思维模型。

CSS盒模型组成：外边距（margin），边框（border），内边距（paddimg），内容（content）

CSS盒模型分类：标准W3C盒子模型，IE盒子模型

区别：二者的区别在于height和width的计算。

标准W3C盒子模型：height=content  ， width=content   

 IE盒子模型：height=content+padding+border， width=content+padding+border

2.box-sizing属性

属性主要用来控制元素盒模型的解析模式。默认值是content-box。

content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高

border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

3.CSS选择器的权重的概念

权重是指某一因素相对于某件事物的重要程度

首先可以

从css代码存放位置看权重优先级：即 内嵌样式>内部样式表>外联样式表>用户设置>浏览器默认

从样式选择器看权重优先级：

即!important>内联样式>ID选择器>类，伪类和属性选择器>标签选择器

4.介绍一下BFC

在css渲染中，bfc是按照块级盒子布局的，容器里面的子元素不会影响到外部元素。

当float的值不是none，

position的值不是relative和static，

display的值不是table-cell，table-caption，inline-block中的任何一个，

overflow的值不为visiable时可触发bfc。

主要解决的问题：解决父元素高度塌陷，解决垂直方向上兄弟元素的margin重叠。

5. 介绍一下块级元素和内联元素的区别

块级元素：

总是在新的一行上开始

高度、行高以及内外边距都可以控制

宽度默认是它容器的100%，除非设置一个值

它可以容纳内联元素和其他块级元素

内联元素：

和其他元素都在一行

高度，宽度以及顶部和底部外边距都不可控制

宽度就是它的文字或图片的高度，不可改变

内联元素只能容纳文本或其他内联元素

常见的块级元素：divh1~h6,dl,ul,ol,p,table

常见的内联元素：a,span ,select,strong,textarea, img,input

替换元素：浏览器根据元素的标签和属性，来决定元素显示的具体内容，且替换元素一般都有内在尺寸input，img，select，textarea，

非替换元素：直接将内容告诉浏览器，并将其显示出来。

5. 常见兼容问题

（1）png24位的图片在ie6浏览器上出现背景

解决方案：做成PNG8

（2）浏览器默认的margin和padding不同

解决方案：全局margin：0；padding：0

（3）IE6双边距问题，如果设置浮动，又设置了左或右边距，margin值会加倍

解决方案：在float的标签样式控制中加入_display:inline，将其转换为行内元素

（4）chrome中文界面下会默认将小于12px的文本强制按照12px显示

解决方案：可通过加入css属性-webkit-text-size-adjust:none解决

（5）超链接访问过后hover样式不出现，被点击访问过的超链接样式不在具有hover和active了

解决方案：改变css属性的排列顺序即L-V-H-A

（6）上下margin重合

解决方案：同时采用margin-top或margin-bottom

（7）html5，css3的新增标签和属性，低版本ie不兼容

6.为什么要初始化css样式

因为不同浏览器的默认样式不同，没有统一的规定，但是要兼容各个浏览器，必须要初始化css样式，如果不初始化css样式，就会造成页面展示效果出现差异

当然，初始化样式会对SEO（搜索引擎优化）有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

7.如何清除浮动（方法，优缺点，清除方法的原理）

（1） 添加额外标签

通俗易懂，但是添加很多无意义的标签，后期维护难

（2）父元素设置overflow：hidden

实质触发BFC，溢出的内容会被隐藏

（3）父元素设置浮动

与父元素相邻的元素布局会收到影响

（4）父元素设置display：table

结构语义化正确，代码少，但是盒模型属性改变

（5）使用伪元素

.removefloat:before,.removefloat:after {

content:"";

display:table;

}

.removefloat:after { clear:both; }For IE 6/7 (trigger hasLayout)

 .removefloat { zoom:1; }

8. 如何水平垂直居中

水平居中：margin：0 auto；

水平垂直居中：

（1）子元素通过设置position：absolute；top：50%；left：50%；

transform: translate(-50%,-50%);或者减去高度和宽度的一半

（2）flex布局 display：flex；justify-content：center；align-items：center；

9．两列布局

（1）浮动float+margin-left /浮动float+bfc（overflow：hidden）

左侧定宽

.content{width: 100%;  height: 500px;  border: 1px solid #000; }

.left{  background:#fcc;   width: 200px;  float: left;   }

    .right{ background: #f66;  margin-left: 210px;}或者overflow：hidden

（2）绝对定位

左侧定宽，右侧设置left：左侧宽度，right：0；可自适应

.content{  position: relative;  width: 100%;  height: 500px;  border: 1px solid #000; }

    .left{ background:#fcc;  width: 200px;  position: absolute; }

    .right{ background: #f66; position: absolute; left: 210px; }

（3）flex布局（左/右侧定宽）

.content{  width: 100%;  height: 500px; border: 1px solid #000; display:flex; }

    .left{ background:#fcc;  width: 200px;  margin-right:10px; }

    .right{ background: #f66;  flex:1; }

10．三列布局

（1）绝对定位法-左右两侧绝对定位，中间margin指定左右外边距

三个div顺序可以随意改变，但是当浏览器缩小，中间部分会压缩

（2）自身浮动法-左右分别使用float，中间margin指定左右外边距

中间的div必须位于最后

（3）圣杯布局-两边定宽，中间自适应

.bd{ padding-left:150px; padding-right:190px; overflow: hidden; }

       .left{ position: relative; background: #E79F6D; width:150px; float:left; margin-left:-100%; left:-150px; }

        .main{  background: #D6D6D6;  width:100%; float:left; }

        .right{ position: relative; background: #77BBDD; width:190px; float:left; margin-left:-190px; right:-190px; }

（4）flex布局 父元素flex，左右两侧定宽，中间flex

11. 栅格布局如何实现

12. 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)

从样式选择器看权重优先级：

即!important>内联样式>ID选择器>类，伪类和属性选择器>标签选择器

13. Css哪些属性可以继承

font-size，font-family，color，text-indent（首行缩进）

14. Css新增伪类有哪些

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

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

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

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

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

:enabled :disabled 控制表单控件的禁用状态。

:checked        单选框或复选框被选中。

15. px,em,rem区别

相同点：rem，px和em都是长度单位；

异同点：px的值是固定的，指定是多少就是多少，计算比较容易。

rem，em的值不是固定的，并且em会继承父级元素的字体大小，rem会继承根元素的字体大小，如果将根元素直接设置为10px，则可以方便计算。

16. position的属性值

（1）absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。

（2）fixed 生成固定定位的元素，相对于浏览器窗口进行定位（老IE不支持）。

（3）relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

（4）static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。

（5）inherit 规定从父元素继承 position 属性的值。

17. position:absolute与fixed的共同点和不同点

A：共同点：

（1）改变行内元素的呈现方式，display被置为inline-block；

（2）让元素脱离普通流，不占据空间；

（3）默认会覆盖到非定位元素上

B不同点：

  absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。

当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

18. display的属性值（常用）

（1）block 块状元素

（2）inline 行内元素

（3）inline-block行内元素，但内容像块状元素一样显示

（4）list-item 块状元素，并添加样式列表标记（像ul一样，前面添加黑点）

19. 图片的alt和title属性有什么区别

title无论是文字链接还是图片上，鼠标放上去的时候，会弹出一段说明，这就是title

alt 则是当图片不存在或载入出错时，该文字则出现，代替该图片

20. 超链接在新窗口打开应该添加什么属性

target="_blank“     _self表示“相同窗口”。点击链接后，地址栏不变；_top表示整页窗口；   _parent表示父窗口。

21. display:none, visibility: hidden的区别

display:none，元素会变得不可见，并且不会再占用文档的空间。

visibility:hidden元素会变得不可见，依旧会占用文档的空间。

22. 让一个元素隐藏，有哪些css属性可以做到

1.display:none

2.visibility:hidden

3.opacity:0效果和visibility:hidden一样，但是可以被transition和animate。

23. margin和padding的使用场景

何时应当使用margin：

    （1）需要在border外侧添加空白时，

    （2）空白处不需要有背景（色）时，

    （3）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+20px的margin，将得到20px的空白（注意地方见第三点）。

    何时应当使用padding

    （1）需要在border内侧添加空白时（往往是文字与边框距离的设置），

    （2）空白处需要背景（色）时，

    （3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px+20px的padding，将得到35px的空白。

    margin使用时应该注意的地方

    margin在垂直方向上相邻的值相同时会发生叠加，水平方向上相邻的值会相加。margin取负值时，在垂直方向上，两个元素的边界仍然会重叠。但是，此时一个为正值，一个为负值，并不是取其中较大的值，而是用正边界减去负边界的绝对值，也就是说，把正的边界值和负的边界值相加。

24. link和@import区别

(1) link属于HTML标签，而@import是CSS提供的;

(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

   import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

25.css3 新特性

（1）圆角（border-radius），阴影（box-shadow）

（2）文字加特效（text-shadow），线性渐变（gradient），变换（transform）

旋转rotate   缩放 scale   定位 translate  倾斜 skew

（3）新增伪类：：selection

（4）媒体查询

当前html字符编码

浏览器兼容模式

设置视口