css基础

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能减少图片的字节。