CSS 题库

1、标准盒子模型，怪异盒子模型
标准盒子模型：宽度 = 内容宽度(content) + border + padding + margin
怪异盒子模型：宽度 = 内容宽度(content + border + padding) + margin
2、box-sizing 属性
用于控制元素盒子模型的解析模式，默认为 content-box
content-box : W3C 的标准盒子模型，设置元素 height/wdith 属性指的是 content 部分的宽高。
border-box ： 怪异盒子模型。设置元素的height/width 属性指的是 border + padding + content 部分的宽高。
3、CSS 选择符 : id选择器，类选择器，标签选择器，相邻选择器(+)，子选择器(>)，后代选择器(li a)，通配符选择器(*)，属性选择器，伪类选择器(单冒号)，
4、元素居中
父级元素均为块级元素
行内元素居中
父级元素设置 text-align: center(行内元素左右居中)
行内元素本身设置 line-heigth 为 父级元素高度 实现上下居中
块级元素居中
5、CSS 的新特性
边框：border-radius, box-shadow, border-image
背景：background-image, background-size, background-origin, background-clip
渐变：linear-gradient(线性渐变), radial-gradient(径向渐变)
文本效果：text-shadow, box-shadow, text-overflow, word-wrap, word-break
字体：规则@font-face
转换：translate, rotate, scale, skew, matrix
过渡：transition
动画：规则@keyframes, 属性animation
弹性盒子：flex-box
多媒体查询：@media
6、CSS常见的兼容性问题
不同浏览器对标签的默认像素是不同，所以使用reset.css
chrome中文界面下默认字体不能小于12px，可通过CSS属性 transform: scale(0.8) 等比缩放
访问过的连接 hover失效，被点击过的连接 hover和active失效，可改变顺序解决 L-V-H-A(love hate
link, visited, hover, active)
visibility的属性值在不同浏览器中表现不同：Chrome中与hidden表象相同，firefox、opera、IE中与display:none表现相同
7、display:none与visibility: hidden的区别
相同点：元素隐藏不可见
区别：display:none从渲染树中删除，触发重排。visibility:hidden只是隐藏但仍占据空间，触发重绘。
8、position、float、display特性叠加的规则
display:none为最高级，其他均不生效。
否则 position为absolute/fixed 优先级最高，float不起作用，display需要调整
否则： float不为none，display需要调整
否则：采用display的值
9、BFC块级格式化上下文
触发条件：
html根元素
float不为none
overflow的值为auto，scroll，hidden
display为tabel-cell, table-caption,inline-block中的任意一个
position不为 relative和static
10、清除浮动
浮动带来的影响：
父元素高度坍塌
与浮动元素同级的非浮动元素会紧随其后
清除浮动实际不是清除浮动效果，而是清除浮动所带来的影响。
清除浮动的操作：
创建BFC
clear: both; // 只对块级元素有效。定义：元素的盒子的边不能与前面的浮动元素相邻。（只管前面，不管后面）
11、网页中尽量使用偶数的字体，更易与web的其他部分形成比例。
12、: 单冒号伪类，:: 双冒号 伪元素
13、让字体变细 -webkit-font-smoothing: antialiased;
14、li与li之间有看不见的空格
原因：行框的排列受到中间空格的影响
解决：将li写在一行、设置float、设置letter-space为负值
15、inline-block 会存在间隙
有空格时会存在，解决：删除空格
margin为正值时存在，解决：设margin为负值
使用font-size时存在，解决：font-size为0，设置letter-space, word-space
16、css Spites
讲一个页面中涉及到的所有图片都包含道一张大图中去，利用CSS的backgroud-image, background-position, background-repeat的组合进行定位。
利用CSS Sprites 能够减少网页的http请求，提高性能，减少图片字节，提高加载速度。
17、rem em px pt 的区别
rem 相对长度单位，根据 根元素html的font-size变化
em 相对长度单位，根据父级元素的font-size变化
px 像素，相对长度单位，依赖分辨率
pt 点，绝对长度单位
18、link 与 @import
属性：link为html标签，@import 为CSS加载规则
兼容性：link为html标签不存在兼容性，@import在CSS2以后才可使用
功能性：link可定义RSS，Rel等，@import只能加载CSS
动态：link可js引入，@import不可