CSS之基础面试题

 

1.简要说一下CSS的元素分类

块级元素：div,p,h1,form,ul,li;

行内元素 : span,a,label,input,img,strong,em;

2.CSS隐藏元素的几种方法

*——Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;

*——Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;

*——Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;

*——Position:不会影响布局，能让元素保持可以操作;

*——Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

 

3、出几种IE6 BUG的解决方法

*——双边距BUG float引起的 ——使用display

*——3像素问题 使用float引起的 ——使用dislpay:inline -3px

*——超链接hover 点击后失效 ——使用正确的书写顺序 link visited hover active

*——Ie z-index问题 ——给父级添加position:relative

*——Png 透明 ——使用js代码改

*——Min-height 最小高度 ——！Important 解决’

*——select 在ie6下遮盖 ——使用iframe嵌套

*——为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的）——使用over:hidden,zoom:0.08 line-height:1px

 

 

4、页面导入样式时，使用link和@import有什么区别？

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

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

（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题

5、介绍一下CSS的盒子模型？

有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;

盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

6、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ 

id选择器（ # myid）

类选择器（.myclassname）

标签选择器（div, h1, p）

相邻选择器（h1 + p）

子选择器（ul > li）

后代选择器（li a）

通配符选择器（ * ）

属性选择器（a[rel = “external”]）

伪类选择器（a: hover, li: nth – child）

可继承的样式： font-size font-family color, UL LI DL DD DT;

不可继承的样式：border padding margin width height ;

优先级就近原则，同权重情况下样式定义最近者为准;

优先级：!important >  id > class > tag；important 比 内联优先级高

 

 

7、CSS3有哪些新特性？

CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），对文字加特效（text-shadow、），线性渐变（gradient）

旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

增加了更多的CSS选择器 多背景 rgba