1.浮动元素引起的问题和解决方法是什么？
答：引起的问题有如下几个：
- 父元素的高度无法撑开，影响与父元素同级的元素
- 与元素同级的非浮动元素会紧随其后（类似遮盖现象）
- 若一个元素浮动，则该元素之前的元素也需要浮动；否则，会影响页面显示的结构（即串行现象）
解决方法如下： - 为父元素设置固定高度。
- 为父元素设置
overflow:hidden即可清除浮动，让父元素的高度被撑开 - 用
clear:both清除元素浮动 - 外墙法指在父元素外面，添加“一道墙”，设置属性
clear:both - 内墙法指在父元素内部，浮动元素的最后面，添加“一道墙”，设置属性
clear:both - 伪元素指为了少创建元素，对父元素添加after伪元素，设置属性
content:" ";display:block;clear:both; - 使用通用类clearfix，实现如下：
.clearfix:after{
content: "";
display: block;
clear: both;
}
2.请说明position:absolute和float属性的异同
答：相同点：可让元素脱离文档流，且可设置其宽高
不同点：absolute会覆盖文档流中的其他元素，即遮盖现象；float仍可占据位置，不会覆盖在另一个BFC区域上，浮动的框可向左或右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
3.CSS优先级如何排序？
答：优先级如下：
！important>style（内联）>Id（权重100）>class（权重10）>标签（权重1）
同类别的样式中，后面会覆盖前面的
4.HTML是什么？CSS是什么？JavaScript是什么？
答：（1）HTML（超文本标记语言）是做网站时使用的一些文本标记标签，如div、span等
（2）CSS（层叠样式表）是做网站时为美化网站而为标签添加的样式，如background、color、width、height
（3）JavaScript是网站中实现前后台交互效果、网页动画效果的一种开发语言，如鼠标单击（click）事件、前后台数据请求（ajax）等
5.为什么要初始化CSS？
答：因浏览器兼容问题，不同浏览器对有些标签的默认值不同，若没有初始化CSS，往往会导致页面在不同浏览器之间出现差异；
初始化样式有时会对SEO产生一定的影响，但鱼与熊掌不可兼得，所以在力求影响最小的情况下初始化CSS。
最简单的初始化方法：*{margin:0;padding:0;}
6.display有哪些值？说明它们的作用。
答：display的值有block、none、inline、inline-block、list-item、table和inherit，其作用如下：
- block：块类型。默认宽度为父元素宽度，可设置宽高，换行显示；
- none：元素不会显示，已脱离文档流；
- inline：行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示；
- inline-block：默认宽度为内容宽度，可设置宽高，同行显示；
- list-item：像块类型元素一样显示，并添加样式列表标记；
- table：此元素会作为块级表格显示；
- inherit：从父元素继承display属性的值
7.简要描述块级元素和行内元素的区别。
答：（1）块级元素：前后均会自动换行。默认情况下，块级元素会独占一行。
如< p>< h1-6>< div>都是块级元素。
当显示这些元素中间的文本时，都将从新行中开始显示，其后的内容也将在新行中显示。
（2）行内元素：可与其他行内元素位于同一行，在浏览器中显示时不会换行。
如< a>< span>等。
对于行内元素，不能设置其宽高。
（3）行内块级元素：如< img>< input>等。
这些元素可与其他行内元素位于同一行，可设置其宽高。
8.display:none 和visibility:hidden的区别是什么？
答：display:none 隐藏对应的元素，在文档流中不再给它分配空间，它各边的元素会合拢，即脱离文档流；
visibility:hidden 隐藏对应的元素，但在文档流中仍保留原来的空间
9.如何使英文单词发生词内断行？
答：输入word-wrap: break-word;
10.如何让超出宽度的文字显示为省略号？
答：输入width: xxx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
11.如何在图片下方设置几像素的空白间隙？
答：定义img为display:block或定义父容器为font-size:0
12.CSS中可以让文字在垂直和水平方向上重叠的两个属性是什么？
答：垂直：line-height；水平：letter-spacing
13.说说rem和em的区别。
答：它们都是相对单位。
rem表示相对于根元素的字体大小；em表示相对于父元素的字体大小
14.px和em的区别是什么？
答：px和em都是长度单位，两者的区别是：px的值是固定的，指定为多少就是多少，计算比较容易；em的不是固定的，是相对于容器字体的大小，且em会继承父级元素的字体大小
15.对行内元素设置margin-top和margin-bottom是否起作用？
答：不起作用（需注意行内元素的替换元素img、input，它们都是行内元素，但可以设置其宽高，并且margin属性对它们起作用，margin-top和margin-bottom有类似于inline-block的行为）
16.简要描述CSS中content属性的作用，且其有何应用。
答：content属性与 :before及 :after伪元素配合使用，用来插入生成的内容，可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号，并可结合计数器，为页面元素插入编号；
最常见的应用是利用伪类清除浮动
body{
counter-reset: chapter;
}
h1:before{
content: "第"counter(chapter)"章";
}
h1{
counter-increment: chapter;
}
<h1></h1>
<h1></h1>
<h1></h1>
运行结果如下：
使用content属性，并结合 :before选择器和计数器counter，可以在每个< h1>元素前插入新的内容
17.访问超链接后hover样式就不出现的原因是什么？应该如何解决？
答：因为访问过的超链接样式覆盖了原有的hover和active伪类选择器样式；
解决方法是将CSS属性的排列顺序改为L—>V—>H—>A（link,visited,hover,active）
18.已知高度的容器如何在页面中水平垂直居中？
答：代码如下：
#box{
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
width: 200px;
height: 200px;
background-color: red;
}
<div id="box"></div>
运行结果如下：
19.内联元素可以实现浮动吗？
答：在CSS中，任何元素都可以浮动。无论浮动元素本身是何种元素，都会生成一个块级框。因此，对于内联元素，若设置为浮动，会产生和块级框相同的效果
20.CSS的哪些样式可以继承？哪些不可以继承？
答：可继承的样式有font-size、font-family、color
不可继承的样式有border、width、height、margin、padding
21.解释浮动及其工作原理
答：
- 浮动的元素可以向左或向右移动，直到它的外边缘碰到包含元素（父元素）或另一个浮动元素的边框为止；
- 要想使元素浮动，必须为元素设置一个宽度；
- 虽然浮动元素已不在文档流中，但它浮动后所处的位置依然在浮动之前的水平方向上；
- 因为浮动元素不在文档流中，所以文档流中的块元素表现得像浮动元素不存在一样，下面的元素会填补原来的位置；
- 有些元素会在浮动元素的下方，但这些元素的内容不一定会被浮动元素遮盖；
- 当定位内敛元素时，要考虑浮动元素的边界，围绕浮动元素放置内联元素；
- 也可以把浮动元素想象成被块元素忽略的元素，而内联元素会关注的元素。