1.盒子模型

标准盒模型下盒子的大小 = content + border + padding + margin

怪异盒模型下盒子的大小=width（content + border + padding） + margin

2.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 text-align text-shadow line-height

不可继承的样式:

border padding margin width height

3.样式优先级

!important > 内联 > id > class > tag

4.css3新增伪类

p:last-child 选择所有p元素的最后一个子元素
p:first-child 选择所有p元素的第一个子元素
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元素。
:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

5.css3新特性

1.边框

border-radius 圆角 box-shadowm 阴影 border-image 图片

2.背景

background-image 图片 background-size 大小 background-origin 定位区域 background-clip 绘制区域

3.渐变

background-image: linear-gradient(#e66465, #9198e5);

4.文本

text-shadow 阴影 text-overflow 溢出 word-break 非中日韩文本的换行 word-wrap

5.旋转 transform: rotate(30deg);

6.过渡 transition

7.动画 @keyframes animation

8. 弹性盒子 display:flex;

9.媒体查询 @media screen and (max-width: 480px)

6.浏览器兼容

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
浏览器默认的margin和padding不同。解决方案是{margin:0;padding:0;}
IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。设置浮动float
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
标签最低高度设置min-height不兼容设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

7.display:none 与 visibility:hidden 的区别是什么

display : none 隐藏对应的元素，在文档布局中不再分配空间（回流+重绘）

visibility:hideen 隐藏对应的元素，在文档布局中仍保留原来的空间（重绘）

8.使元素消失的方法

visibility:hidden、display:none、z-index=-1、opacity：0

9.CSS引入的方式

使用元素链接到外部的样式文件
在元素中使用"style"元素来指定
使用CSS "@import"标记来导入样式表单
在内部的元素中使用"style"属性来定义样式

10.link和@import的区别

link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS
@import只有在IE5以上的才能识别，而link标签无此问题
link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载
link的样式权重高于@import的样式权重

11.页面布局的方式

双飞翼、多栏、弹性、流式、瀑布流、响应式布局

12.rem 布局的优缺点

优点：在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，使得在设备上的展现都统一起来了。而且现在浏览器基本都已经支持rem了，兼容性也非常的好。

缺点：（1）在奇葩的dpr设备上表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱。

（2）使用iframe引用也会出现问题。

（3）rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚，还是为了看的更多的问题。

13.让Chrome支持小于12px 的文字

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

14.清除浮动

父级添加overflow: hidden
clear:both;
clearFix:after{display: block; height:0;clear:both;visibility: hidden;content:""}
在浮动的父元素后添加一个div

15.水平居中

块级元素: margin:0 auto
行内元素: text-align:center
绝对定位和移动: absolute + transform
绝对定位和负边距: absolute + margin
flex布局: flex + justify-content:center

16.垂直居中

子元素为单行文本: line-height:height
absolute + transform
flex + align-items:center
table: display:table-cell; vertical-align: middle
利用position和top和负margin

17.水平垂直居中

已知元素宽高:绝对定位+margin:auto
已知元素宽高: 绝对定位+负margin
absolute+transform {position:absolute; left:50%; /* 定位父级的50% */ top:50%; transform: translate(-50%,-50%); }
flex + justify-content + align-items

18. CSS优化、提高性能的方法

内容和样式分离，易于管理和维护
减少页面体积
css文件可以被缓存、重用，维护成本降低
不使用@import
避免使用复杂的选择器，层级越少越好
精简页面的样式文件，去掉不用的样式
利用CSS继承减少代码量
避免！important，可以选择其他选择器

19.隐藏video功能按钮

video默认全屏按钮
video::-webkit-media-controls-fullscreen-button{ display: none !important; }

video默认aduio音量按钮
video::-webkit-media-controls-mute-button { display: none !important;}

video默认setting按钮
video::-internal-media-controls-overflow-button{ display: none !important;}

腾讯云点播禁用firefox全屏、设置按钮
.trump-button[sub-component="fullscreen_btn"],.trump-button[now="fullscreen"]{ display:none!important;} .trump-button[sub-component="setting"]{ display:none !important;}

禁用video的controls（要慎重！不要轻易隐藏掉，会导致点击视频不能播放）
video::-webkit-media-controls { display:none !important; }

20.文本超出隐藏

一行
overflow: hidden; text-overflow:ellipsis; white-space: nowrap;

多行
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;

21.隐藏滚动条

.box::-webkit-scrollbar{ display: none; }

CSS常见面试题