css-10个经典面试题

1.css选择器优先级是怎样的

1. ！important
2. 行内样式
3. id选择器
4. 类、伪类和属性选择器
5. 标签选择器和伪元素选择器。
6. 通配符选择器*

css选择器

id选择器（#myId）
类选择器（.myClassName）
标签选择器（div, h1, p）
后代选择器（h1 p）
相邻后代选择器（子）选择器（ul > li）
兄弟选择器（li~a）
相邻兄弟选择器（li+a）
属性选择器（a[rel=“external”]）
伪类选择器（a:hover, li:nth-child）
伪元素选择器（::before, ::after）
通配符选择器（*）

2.元素居中方式

     <div style="position: absolute;
     width: 100px;
     height: 100px;
     margin: auto;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background-color: green;">水平垂直居中</div>

     <div style="position: absolute;
     width:100px;
     height:100px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: blue;">水平垂直居中</div>

<div style="display: flex;align-items: center;justify-content: center;">
    <div style="width: 100px;height: 100px;background-color: gray;">flex 布局</div>
</div>

<style>
        .content{
            width:600px;
            height:100px;
            border:1px solid #0a3b98;
            text-align: center;
        }
        .content:before{
            content: '';
            height:100%;
            width:0;
            display: inline-block;
            vertical-align: middle;
        }
        .box{
            width:100px;
            height:50px;
            background: #f0a238;
            display: inline-block;
            vertical-align: middle;
        }
</style>
<div class="content">
    <div class="box"></div>
</div>

3.CSS3有哪些新特性？

1.圆角（边框半径）：border-radius 属性用于创建圆角
2.background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
3.word-wrap（对长的不可分割单词换行）word-wrap：break-word
4.文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
5.边框图片：border-image: url(border.png) 30 30 round
6.盒阴影：box-shadow: 10px 10px 5px #888888
7.rgba(0,0,0,0)
8.媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

4. display:none与visibility：hidden的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
（opacity:0;该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定
一些事件,如click事件,那么点击该区域,也能触发点击事件.）

5.清除浮动的方式?

父级div定义height
最后一个浮动元素后加空div标签 并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom

6.flex属性

一.父元素属性
1.display:flex;（定义了一个flex容器）
2. flex-direction（决定主轴的方向）
row colunm row-reverse column-reverse
3. flex-wrap（定义如何换行）
nowrap wrap wrap-reverse
4.flex-flow（属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为row nowrap）
5. justify-content（设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式）
flex-start flex-end center space-between space-around
6.align-items（设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式）
flex-start flex-end center baseline stretch
7.align-content（设置或检索弹性盒堆叠伸缩行的对齐方式）
flex-start flex-end center space-between） space-around stretch
二.子元素上属性
1.order
2.flex-grow
3.flex-shrink
4.flex-basis
5.flex (flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选)
6.align-self

7px和em和rem区别：

px：px像素，相对长度单位，像素px相对于显示器屏幕分辨率而言。
em：相对长度单位，相对于当前对象内文本的字体尺寸，如相对行内文本的字体尺寸未被人为设置，则对于浏览器的默认字体尺寸。em的值相对不固定，汇集成父级元素的字体大小。
rem：是CSS3新增的一个相对单位，em与rem的区别在于使用rem为元素设定字体大小时，仍然时相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做深入理解opacity和rgba的区别到只修改根元素就成比例地调整所有字体大，又可以避免字体大小逐层复合的连锁反应.

8深入理解opacity和rgba的区别

1.opacity属性的所有后代元素都会继承 opacity 属性，而RGBA后代元素不会继承不透明属性
2. rgba只是背景颜色有透明效果 而有opacity属性元素的后代都会继承这个透明属性，包括但不限于文字图片等

9link和@import的区别？

1.link属于XHTML标签，而@import是CSS提供的。
2页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。
3import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。
4link方式的样式权重高于@import的权重。
5使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

10 Sass 和 Less 是什么？它们有何区别？

Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。Sass语法类似与Haml，属于缩排语法（makeup），用意就是为了快速写Html和Css。
Less一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
区别：
(1))Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器，也可以在开发环节使用Less，然后编译成Css文件，直接放到项目中，也有Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。
(2)变量符不一样，less是@，而Scss是$，而且变量的作用域也不一样，后面会讲到。
(3)输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。
(4)Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。