[TOC]
# 题1、元素浮动时，外层元素会收缩，如何解决？
答： 1. 设置父元素： overflow: hidden;
2.添加一个空的 div ，并设置为 clear: both;
3.伪类
~~~css
.clearfix::after {
content: "";
divplay: "block";
clear: both;
}
~~~
# 题2、CSS 隐藏一个元素有几种办法？
答：1.dispaly：none; (不占位)
2.visibility:hidden; （占位）
3.opacity: 0; (占位)
4.定位到屏幕外面
~~~css
position: relative;
left: -2000;
~~~
# 题3、如何让一个盒子水平垂直居中？
答： 定位 + 平移。
~~~css
.box {
// 让盒子的左上角居中
position: absolute;
left: 50%;
top: 50%;
// 向上、左平移自身的50%
transform: translate(-50%,-50%);
}
~~~
# 题4、一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），如何实现？
答： 设置左边宽100px并向左浮动即可，下面的 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 来设置？
答：
~~~css
display: block; // 块级元素
display: inline-block; // 行级块
display: none; // 隐藏，不占位
display: flex; // flex 布局
~~~
# 题12、 position 属性有几个值？分别的特点是什么？
答：
stativ（默认，静态定位）：正常文档流，从上向下，从左向右，依次显示。
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、为什么在制作页面前要进行样式的初始化？
答：不同的浏览器中默认的样式是不一样的，所以为了统一样式，我们需要在制作页面之前先对默认样式进行初始化。
