css面试题

css面试题 1、说一下哪些是块元素？哪些是行元素？哪些是行块元素？ 块元素：自己独占一行，并且可以设置宽高（8） div:划分区域的标签 table：表格 form：表单 h1-h6:标题标签 p：段落标签 ul li:无序列表 ol li:有序列表 dl dt/dd:自定义列表

行块元素：在同一行显示，并且可以设置宽高（4）
    img:图片标签
    input：输入框
    select：下拉列表
    textarea：多行文本框

行元素：在同一行显示，并且不可以设置宽高（9）
    a：超链接标签
    span:文本修饰符标签
    strong或者b：字体加粗
    em或者i：字体倾斜
    ins或者u：文字下划线
    del或者s：删除线
    sub:下标
    sup：上标
    label：文字说明

2、src和href的区别？ href是超文本引用，表示文件的录入地址，在link，a标签上使用 src表示文件的来源地址，在img，script上使用

3、css三种形式 行内式 内嵌式 链入式

4、常用的选择器有哪些？（10个） 标签 id 类名

通配符

后代
子代

交集
并集

序
下一个兄弟

5、说一下css优先级 三种引入形式的优先级：行内 > 内嵌 > 链入 不同种选择器下：id > 类名 > 标签 > 其他 同种选择器下：如果css属性重复，下面的替换上面的，优先级高的替换优先级低的，层级高的替换层级低的

6、id与class区别 id惟一，名称不能重复，id为js服务 class不唯一，名称可以重复，允许一个标签存在多个类名

7、css那些属性可以被继承？ 字体颜色 font-xxx line-xxx text-xxx

8、盒模型的组成 外边距margin、边框border、内边距padding、内容的宽高

9、清除浮动的方法 给父级直接设置高度 隔墙法 overflow:hidden; 伪类清除法 .clearfix:after{ //内容为空 content: ""; //转成块元素 display: block; //清除左右浮动 clear: both; }

10、行块元素Bug（底部空格问题） div不设高度，在里面放置一张img,div会自动撑开。 若img宽度为100%，行块、行元素的高度 会与外面div的高度 有2-4像素的误差，怎么解决？

解决：
    1、转成块元素
        display:block
    2、修改行、行块元素的对齐基准，垂直居中
        vertical-align:middle;

11、两个宽度是50%，边框为1的div，怎么并排显示？

解决：
    将外边框改为内边框
    box-sizing: border-box;

    怪异盒模型：border-box;
    标准盒模型：content-box;

    标准盒模型下盒子的宽度 = width + 左右padding + 左右border 
    怪异盒模型下盒子的宽度 = width

12、垂直水平居中 方式一： 必须设置宽高 绝对定位，四个属性为0，margin:auto; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin:auto;

方式二：
    必须设置宽高
    绝对定位，left、top 50%,margin left、top负一半宽高 
        position: absolute;
        /* 水平居中 */
        left: 50%;
        margin-left: -100px;

        /* 垂直居中 */
        top: 50%;
        margin-top: -120px;

方式三：
        /* 
            较优，因为只写百分比即可
            必须设置宽高
            绝对定位，left、top 50%,translate x、y负50% 
        */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);

13、css3新特性

特殊选择器：属性选择器、表单选择器、结构性伪类、相邻兄弟选择器、伪元素
特殊效果：渐变、圆角border-radius、文字阴影text-shadow/盒阴影box-shadow、滤镜filter
特殊动效：过渡transition、变换transform（倾斜skew、平移translate、缩放scale、旋转rotate）、动画animation、3D

14、画三角 //宽度为0 width: 0;

//设边框
border: 50px solid red;

//三个边框颜色为透明
border-color: transparent transparent transparent blue;

15、css你是怎么处理浏览器的兼容性问题？

1、书写样式时加上浏览器内核的前缀
2、降级处理（换一种low的写法）
3、用js逻辑处理

-moz- 火狐
-webkit- 谷歌
-o- opera
-ms- IE

16、什么是页面的回流，什么是页面的重绘？ 回流(页面布局变化)：当前元素改变了自身的宽高、布局、显示隐藏，或者内容结构发生了变化，需要重新构建 重绘(元素外观变化)：是一个元素的外观被改变，但是没有改变页面的布局情况下，比如：改变了背景色

回流必定引起重绘