[toc]
# 题1、元素浮动时，外层元素会收缩，如何解决？
答：1. 设置父元素：overflow:hidden。
2. 添加一个空的 div ，并设置为 clear:both
3. 伪类：
~~~
.clearfix:after{
content:"";
display:"block":
clear:both;
}
~~~
# 題2、CSS 隐藏一个元素有几种办法？
答：
1. display:none （不占位）
2. visibility: hidden;（占位）
3. opacity: 0; （占位）
4. 定位到屏幕外面
~~~
position: relative;
left: -2000;
~~~
# 题3、如何让一个盒子水平垂直居中？
答：定位 + 平移。
~~~
.box {
/* 让盒子的左上角居中 */
position: absolute;
left: 50%;
top: 50%;
/* 向上、左平移自身的50% */
transform: translate(-50%, -50%);
}
~~~
#题4、一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的d iv跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），如何实现？
答：设置左边宽100并向左即可，下面的 div 自动会向右补满。
# 题5、如何实现一个满屏的品字布局？
答：放三个 div ,高度都是50%，然后让第二个div，宽度50%并且右左浮动即可。
注意：要先设置 html 和 body 的 height 为 100%,否则没有高度。
# 题6、在一个 div 中有两个 div 垂直排列，上面的 div 高度 100px，如何让下面的 div 铺满剩余空间？
答：设置下面的元素绝对定位，并设置 top: 100px; bottom: 0;
# 题7、CSS 选择器有哪些？
答：id选择器，如：#id
类选择， 如：.class
标签选择器，如：span
通配符选择器，*
包含选择器， p a
父子选择器， p>a
分组选择器， p,a
交集选择器， p.clear
伪类选择器， a::hover
伪元素选择器， .clear::after
兄弟选择器， div~ul
属性选择器， [href^="http"]
等
# 题8、哪些属性可以继承？
答：font- 开头
text- 开头
color
opacity
cursor
visibility
line-height
white-space
等
# 题9、盒模型和哪些部分组成？box-sizing 两个重要属性值是什么？含义是什么？
答：
盒模型组成：（内->外）width、height，padding、border、margin。
box-sizing：影响盒子占用宽、高的计算方式。
content-box;（默认）
border-box;
content-box：实际宽= width + 左右内边距 + 左右边框
~~~
.box {
width: 100px;
padding: 5px;
border: 1px solid red;
box-sizing: content-box;（默认）
}
最终宽度= 100 + 2*5 + 2*1 = 112px
~~~
border-box：实际宽= width
~~~
.box {
width: 100px;
padding: 5px;
border: 1px solid red;
box-sizing: border-box;
}
最终宽度= 100px
~~~
# 题10、CSS 的优先级是如何计算的？
答：!important > 内联样式 > #id > .class 选择器 > 标签选择器
如果优先级相同，那么后面的会覆盖前面的。
# 题11、行级元素、块级元素、行级块元素分别有什么特点？如何使用 display 来设置？
答：display:block; 块级元素
display:inline; 行级元素
display:inline-block; 行级块
display:none; 隐藏，不占位
display:flex; flex 布局
# 题12、position 属性有几个值？分别的特点是什么？
答：static（默认，静态定位）：正常文档流，从上向下，从左向右，依次显示。
absolute（绝对）：脱离文档流（飞起来）。可以 left、top、bottom、right 来设置坐标定位。定位进先找它上级中的相对定位的元素，如果有就相对这个元素定位。如果上面没有相对定位的元素，那么它就相对于浏览器的边缘定位。
relative（相对）：不脱离文档流（原位置保留）。可以 left、top、bottom、right 来设置坐标。定位是相对于它原来文档流中的位置定位。
fixed（固定）：脱离文档流（飞起来）。可以 left、top、bottom、right 来设置坐标定位。它就相对于浏览器的边缘定位。不会随页面滚动而滚动，定在屏幕上不动。
# 题13、CSS3 中有哪些新特性？对应的属性名称是什么？
答：动画（animation）、过渡（transition）、转换（transform）、阴影（box-shadow）、弧度（border-radius）、渐变色、flex布局 等。
# 题14、什么是外边距合并？
答：
1. 上下两个标签的 margin 会合并成最大的值。比如，上面 div 向下外边距50px，下面 div 向上外边距 10 px ，最后两个元素的外边距为 50px （合并成大的，不是 60px）
2. 父子元素，子元素的向上外边距会被合并加到父元素的上外边距
# 题15、如何使用 CSS 创建一个三角形？
答：1. 放一个 div 2. 让这个 div 的宽高是0 3.设置四个边框，其中三个边框颜色透明（transparent），剩下的边框就是三角形
# 题16、什么是媒体查询？通过哪个属性可以实现？
答：可以根据浏览器的尺寸来设置不同的样式。使用 `@media` 属性来实现。
# 题17、如何实现屏幕在375px 以下时背景色是灰色，375px~750px 时背景色是红色，750px以上时背景色是绿色。
答：
~~~
/* 375 以下 */
@media screen and (max-width: 375px) {
body {
background-color: gray;
}
}
@media screen and (min-width: 375px) and (max-width: 750px) {
body {
background-color: red;
}
}
/* 750以上 */
@media screen and (min-width: 750px) {
body {
background-color: green;
}
}
~~~
# 题18、使用过 CSS 的预处理器吗？
答：常用的三种：less、sass、stylus。
# 题19、style 写在 body 前和写在 body 后有什么区别？
答： styles 都要写在前面。因为，页面是从上向下解析的，如果把 styles 写在后面，就会导致先渲染一遍HTML页面，渲染完之后再渲染CSS，会导致前面已经渲染完页面内容再重新根据样式再渲染一次。
# 题20、overflow 属性有几个值？分别含义是什么？
答：overfflow：用来控制一个标签中的内容超出范围时如何显示。
值：
visible:默认，超出的直接显示。
auto：超出的有滚动条
hidden:超出的隐藏。
scroll：左右都有滚动条、
scroll-x：X轴有滚动条
scroll-y：Y轴有滚动条
# 题21、什么是精灵（雪碧）图？干什么用的？
答：把多个小图标放到一起制作成一张图片来使用。
目的：减少图片下载的次数（减少和服务器连接次数）。比如：有20个小图标，分别下载需要连接服务器 20 次来下载，制作成一张图片就只需要连接下载一次。
用法：1. 先放一个标签，让这个标签的宽、高只够显示一个图标的尺寸
2. 让雪碧图做为这个标签的背景图
3. 通过 background-position 来调背景图上的位置 ，以显示不同的图标
# 题22、浮动用哪个属性？浮动有几种？
答：float。 浮动两种：float:left;（左浮动） , float:right（右浮动）
# 题23、清除用哪个属性？有几种值？为什么要使用清除？
答：属性：clear。
值：clear: left; （清除左浮动）
clear: right: (清除右浮动）
clear: both; （同时清除左右浮动）
使用清除的原因：当一个元素浮动之后，就会脱离文档流，就会导致：1. 父元素坍塌 2. 后面的元素向前补位导致页面乱了。所以需要清除浮动对父和后面元素的影响。
# 题24、为什么在制作页面前要进行样式的初始化？
答：不同的浏览器中默认的样式是不一样的，所以为了统一样式，我们需要在制作页面之前先对默认样式进行初始化。
# 题25、margin 重叠是什么情况？
答：情况一、`上下` 两个元素的的外边距会合并。
情况二、`父子`两个元素，子元素的向上的外边距会合并到父元素的向上的外边距
# 题26、px、em、rem 的区别？
px：像素
em：当前标签 font-size 的倍数
rem：html 标签 font-size 的倍数
