简答题
1.常见的块级元素和行内元素有哪些？说说行内元素和块级元素的主要区别。
块级元素：
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、meue、pre。HTML5新增的header、section、aside、footer等
特点： 自动换行、独占一行、可设置宽度、默认宽度为父元素的宽度。
行内元素：
span、img、a、lable、input、abbr、em、big、cite、i、q、textarea、select、small、sub、sup、strong、u、button。
特点： 无法自动换行：一行可放多个；不可设置宽度；默认宽度是本身内容宽度；padding可以设置；margin只能设置水平方向的边距。
2.去掉ul、li前面的小点，需要使用什么属性？具体方法是什么？
list-style:none;,
有的写list-style-type:none;。
3.清除浮动的方法有哪些?
1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置
clear:both;）。
优点：通俗易懂，方便。
缺点：添加无意义标签，语义化差。
2.父级添加overflow属性（父元素添加：overflow:hidden）。
通过触发BFC（第11题解释）方式，实现清除浮动。
优点：代码简洁。
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏，无法显示要溢出的元素。
3.（推荐）使用after伪元素清除浮动。
优点：符合闭合浮动思想，结构语义化正确。
缺点：IE6-7不支持伪元素；用zoom:1触发hasLayout。
4.（推荐）使用before和after双伪元素清除浮动。
优点：代码更简洁。
缺点：用zoom:1触发hasLayout。
4.你知道哪些选择器？CSS优先级算法如何计算？
选择器：
元素选择器；类选择器；id选择器；通配符选择器。
CSS优先级算法:
（1）判断是否是直接选中（间接选中就是指继承）： 如果是间接选中，遵循“就近原则”保持状态努力向前
（2）如果是相同的选择器时：如果都是直接选中，并且都是同类型的选择器，则遵循后写的选择器的设置;
（3）如果是不同选择器时：如果都是直接选中，并且不是相同类型的选择器，那么就会按照选择器的优先级来层叠
其中：id>类>标签>通配符>继承>浏览器默认
注意：!important设置的样式优先级别最高，通配符*优先级别最低
5.CSS中有哪些样式可以继承？
所有子元素，列表元素，块级元素，内联元素，表格元素；
以list-，text-，font-等开头；
6.让一个元素不可见的方法（至少两种），并说说他们的区别。
1.添加
visibility:hidden;属性
2.添加display:none;属性
3.添加opacity:0;属性（元素隐藏，但依然占据空间，存在于文档流中，只是透明度被设置100%）
7.你是否了解过flex布局？有哪些常用的属性？
flex"弹性布局":
用来为盒装模型提供最大的灵活性,任何一个容器都可以指定为flex布局。
flex布局父项常见属性:
flex-direction：设置主轴的方向；
justify-content：设置主轴上的子元素排列方式；
flex-wrap：设置子元素是否换行；
align-content：设置侧轴上的子元素的排列方式(多行)；
align-items：设置侧轴上的子元素排列方式(单行)；
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap。
flex布局子项常见属性:
flex:定义子项目分配剩余空间，用flex来表示占多少份数。
align-self:控制子项自己在侧轴的排列方式。
order:定义项目的排列顺序，数值越小，排列越靠前，默认为0。
8.让一个div水平垂直居中的方法（至少两种）。
1.给div添加
margin:0 auto;属性；
2.position 定位+margin（子盒子有宽度和高度的时候）
3.position + transform（子盒子有或没有宽高的时候都适用）
4,flex(子盒子有或没有宽高的时候都适用)
9.说说你知道的animation和transition的属性以及作用。
animation（动画）：
@keyframes:规定动画模式。
animation-name:规定@keyframes动画的名称。
animation-duration:规定动画完成一个周期应花费的时间。
animation-delay:规定动画开始的延迟。
animation-iteration-count: 规定动画应播放的次数。
animation-direction:定动画是向前播放、向后播放还是交替播放。
animation-timing-function:规定动画的速度曲线。
animation-fill-mode:规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-play-state:规定动画是运行还是暂停。
animation:设置所有动画属性的简写属性。
transition（过渡）：
transition:简写属性，用于将四个过渡属性设置为单一属性。
transition-delay:规定过渡效果的延迟（以秒计）。
transition-duration:规定过渡效果要持续多少秒或毫秒。
transition-property:规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function:规定过渡效果的速度曲线。
10.你知道哪些定位？说说它们的区别。
父元素相对定位，子元素绝对定位。
（1）绝对定位：是元素在移动位置的时候，是相对于它父级元素来说的。
主要特点：
绝对定位不占据原来的位置（脱标）；
没有父级元素或父级元素没有定位，则以浏览器为准定位；
父级元素有定位，则以最近一级的有定位父级元素为参考点移动位置。
（2）相对定位：是元素在移动位置的时候，是相对于它原来的位置来说的。
主要特点：
移动位置的时候是参照点是自己原来的位置；
不脱标，继续保留原来的位置；
行内元素使用相对定位不能转行内块。
（3）固定定位：是元素固定与浏览器可视区的位置。
主要特点：
以浏览器的可视窗口为参照点移动元素；
跟父元素没有任何关系；
不随滚动条滚动；
固定定位不再占有原先的位置（脱标），可以看作是一种特殊的绝对定位；
元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;）。
11.BFC是什么？有什么作用？
BFC可以理解为一个区域（块级格式化上下文）
在这个区域内的元素无论如何布局，都不影响区域外的元素。
触发BFC的条件：
1.有根元素，即HTML元素；
2.添加定位，position值为absolute或fixed;
3.浮动元素：float不为none;
4.块级元素：overflow不为visible;
5.元素强制转换类型：display值为inline-block,table-cell,table-caption
代码题
1.用CSS画一条0.5px的线。
使用transform属性进行缩放。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用CSS画一条0.5px的线</title>
<style>
div {
width: 100px;
height: 1px;
background: black;
transform: scaleY(0.5)
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果：
2.使用CSS实现淡入淡出动画效果。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淡入淡出
</title>
<style>
div {
background-color: green;
width: 150px;
height: 150px;
opacity: 1;
}
div:hover {
content: "";
display: block;
opacity: 0;
transition: all 2s;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
效果：
3.使用CSS实现一个，选中行变色的细边框表格。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.datalist {
border: 1px solid black;/* 表格边框 */
font-family: Arial;
border-collapse: collapse;/* 边框重叠 */
background-color: white;/* 表格背景色 */
font-size: 14px;
}
.datalist td {
border: 1px solid black;/* 单元格边框 */
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 50px;
padding-right: 50px;
}
.datalist tr:hover,
.datalist tr.altrow {
background-color: rgba(128, 128, 128, 0.299);/* 动态变色 */
}
</style>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay" id="member">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
效果：
附加题
1.使用CSS实现一个简单的轮播图。
轮播图：
多张图片按照一定的时间顺序依次从某个窗口来向用户展示。
思路：
a.创建一个容器进行展示。
b,创建一个容器存储图片。
c.在存储容器中放入图片。
d.为图片设置动画。
2.使用div+css实现一个圆形，红色占60%，绿色占40%。
之后补充。
3.要求使用最多两个元素实现以下效果（二选一）。
No1.
思路：
使用绝对定位，增加盒子边框。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框显示一半（绝对定位）</title>
<style>
#holder {
width: 300px;
height: 50px;
background-color: rgba(128, 128, 128, 0.402);
position: relative;
margin: 10px;
}
#mask {
width: 50%;
height: 1px;
position: absolute;
background-color: red;
top: -1px;
left: 1px;
}
</style>
</head>
<body>
<div id="holder">
请看这个div的“上边框”是只有一半的
<div id="mask"></div>
</div>
</body>
</html>
效果：
No2.
思路：
使用伪类，在元素前或后插入内容。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框显示仪一半（伪类）</title>
<style>
div {
width: 300px;
height: 50px;
background-color: rgba(128, 128, 128, 0.402);
position: relative;
margin: 10px;
}
div::before {
content: "";
width: 50%;
height: 2px;
position: absolute;
background-color: red;
top: -1px;
left: 1px;
}
</style>
</head>
<body>
<div>请看这个div的“上边框”是只有一半的</div>
</body>
</html>
效果：
