1. 规范的 CSS 的盒子模型 IE 的盒子模型不同点
规范 css 盒子模型: 内容宽度不包含 padding 和 border
ie 盒子模型: 内容宽度 包含 padding 和 border
2. box-sizing 属性
用来管制浏览器盒子模型的解析形式,
border-box 示意应用 ie 传统的盒子模型 即是内容宽度包含 content padding border
content-box 示意应用规范 css 盒子模型 即是内容宽度不包含 padding 和 border
3. css 的选择器有哪些 哪些属性能够继承
id 选择器 类选择器 标签选择器 相邻选择器 子选择器 迭代选择器 通配符选择器 属性选择器 伪类选择器
font-size font-family color 能够继承
margin padding width height border 不能够继承
4. css 的优先法令如何计算
元素选择器 1
class 选择器 10
id 选择器 100
元素标签 1000
!important 申明的款式优先级最高
5. display 有哪些值？阐明他们的作用
none 暗藏元素
inline 内联元素(默认)
block 块级元素
table 表格显示
inline-block 行内块元素
6. position 的值
static 默认 依照失常文档流显示
fixed 固定定位 绝对于可视窗口定位
absolute 相对定位 绝对于最近一个不为 static 的父级元素定位
relative 不脱离文档流 绝对于本身定位
7. CSS3 有哪些新个性？
RGBA 和透明度
圆角
边框图片
盒子暗影 box-shadow
媒体查问 依据页面宽度提供两套 css 款式
8. 创立一个三角形的原理是什么
将盒子的 width height 都设为 0; 而后设置边框款式
.box {
width: 0px;
height: 0px;
background: transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
border-top: 0;
}
9. 常见兼容问题
(1). 不同浏览器默认的 margin 和 padding 不同
(2). 谷歌下会默认将 12px 字体一下的值变成 12px. 可通过退出 css
-webkit-text-size-adjust: none 解决
(3). ie6 双边距问题. 块标签 float 后, 又有横行的 margin 的状况下,ie6 显示的 margin 比设置的大 应用 display: inline-block 转化为行内元素
(4). 在火狐下只能通过 getAttribute() 获取设置的自定义属性
10. 为什么要初始化 CSS 款式
因为浏览器的兼容问题, 不同浏览器对有些标签的默认值是不同的, 如果不对 css 进行初始化, 会呈现一些轻微的差距
11. display:none 与 visibility：hidden 的区别
display: none; 元素暗藏 不占据页面上的地位
visibility：hidden 暗藏元素 在页面上依然占据对应的空间
12. 为什么会呈现浮动和什么时候须要革除浮动？革除浮动的形式
浮动带来的问题
(1). 父元素的高度无奈被撑开, 影响与父级的同级元素
(2). 与浮动元素的非浮动内联元素, 会紧跟其后显示
革除浮动的形式
蕴含浮动的父级元素 overflow: hidden
最初一个浮动元素后增加标签 .clear{clear:both;}
13. 设置元素浮动后，该元素的 display 值是多少
block
14. 怎么让 Chrome 反对小于 12px 的文字
font-size: 12px;
-webkit-transform:scale(0.8)
15. CSS Sprites
将一个页面波及到的所有图片都蕴含到一张大图中去，而后利用 CSS 的 background-image，background- repeat，background-position 的组合进行背景定位。利用 CSS Sprites 能很好地缩小网页的 http 申请，从而大大的进步页面的性能；CSS Sprites 能缩小图片的字节。