#### 1. 问题：请别离写出 HTML 中块标签、行标签以及行块标签的特点。（10 分）
本题目标：清晰把握行标签、块标签、行块标签的区别
答案：
块级元素：
（1）独占父级元素一行 (0.75 分)
（2）默认宽度为父级元素宽度的 100%(0.75 分)
（3）默认高度由内容撑开 (0.75 分)
（4）能够设置宽高 (0.75 分)
（5）能够任意嵌套（p 标签不能嵌套块标签）(0.75 分)
行级元素：
（1）可在一行显示，一行显示不下时，主动切换到下一行 (0.75 分）
（2）不能够设置宽度和高度（input 和 img 除外）(0.75 分）
（3）宽度和高度由内容撑开 (0.75 分）
（4）设置高低外边距有效 (0.75 分）
（5）不能嵌套块标签，其中 a 标签不能嵌套 a 标签 (0.75 分）
行块级元素：
（1）在一行显示 (0.5 分）
（2）默认宽度和高度由内容撑开 (0.5）
（3）能够设置宽度和高度 (0.5 分）
（4）换行被解析为空格 (0.5 分）
#### 2. 问题：说出学过的选择器有哪些？并举例说明。（10 分，少答一个扣 2 分，全答对满分）
本题目标：对学过的选择器，有清晰的理解
答案：
（1）标签名选择器, 例：div{}
（2）id 选择器, 例：#div{}
（3）类选择器, 例：.div{}
（4）后辈选择器, 例：div a{}
（5）群组选择器, 例：div,a{}
（6）通配符选择器, 例：*{}
#### 3. 问题：对于背景都有哪些款式？写出款式并阐明该款式的意思和可设置的值类型，至多写出五个；（10 分, 写出一个款式得 1 分，款式的意思 0.5 分, 可设置的值类型 0.5 分）
本题目标：把握背景款式
答案：
（1）background-color：背景色彩，可设置的值有英文色彩单词、十六进制颜 色码、rgb 值和 rgba 值。
（2）background-image：背景图片，可设置的值为 url(). 括号内为图片的门路。
（3）background-size：背景尺寸，可设置的值有 px、百分比
（4）background-position：背景地位，可设置的值有 px、百分比、具体方位（right、left、center、top、bottom）
（5）background-repeat：背景平铺形式，可设置的值有 no-repeat 不平铺、repeat- x 横向平铺、repeat- y 纵向平铺
（6）background-attachment：背景是否追随页面挪动，可设置的值有 scroll 默认值追随、fixed 不追随
#### 4. 问题：对于文本都有哪些款式？写出款式并阐明该款式的意思和可设置的值类型至多写出五个;（10 分, 写出一个款式得 1 分，款式的意思 0.5 分, 可设置的值类型 0.5 分）
本题目标：把握文本款式
答案：
（1）text-decoration：文本润饰，可设置的值有 underline 下划线、overline 上划线、linethrough 删除线、none 无文本润饰。
（2）text-align：文本横向对齐形式，可设置的值有 left 左对齐、center 两头对齐、right 右对齐
（3）text-indent：文本缩进，可设置的值有 px、em、百分比
（4）line-height：文本行间距，可设置的值为 px、em、百分比
#### 5. 问题：对于字体都有哪些款式？写出款式并阐明该款式的意思和可设置的值类型。(10 分, 写出一个款式得 1 分，款式的意思 0.5 分, 可设置的值类型 0.5 分)
本题目标：把握字体款式
答案：
（1）font-size：字体尺寸，可设置的值有 px、em
（2）font-family：设置字体，可设置的值为字体名字
（3）font-style：字体格调，可设置的值有 italic 斜体、oblique 歪斜
（4）font-weight：字体粗细，可设置的值为 bold 加粗、bolder 更粗、lighter 更细、100-900 的粗细范畴
（5）color：字体色彩，可设置的值有英文代码、十六进制色彩码、rgb 值和 rgba 值
#### 6. 问题：什么是盒模型？说出盒模型的组成及内外边距应用场景 (10 分)
本题目标：考查盒模型构造把握，以及宽高的计算
答案：
CSS 盒子模型就是在网页设计中，把所有的页面元素都看作盒子。（2 分）
它包含：外边距 (Margin)(1 分)，边框 (border)(1 分)，内边距 (padding)(1 分)，和理论内容 (content)(1 分)
应用场景：（1）兄弟元素之间的间隔用外边距 margin（2 分）
（2）父子之间的间隔用内边距 padding（2 分）
#### 7. 浮动元素的特点以及利用场景。(10 分)
本题目标：把握浮动元素的特点，明确浮动元素与其余元素的区别
答案：
浮动元素的特点：（8 分）
（1）元素之间没有间隙
（2）元素脱离文档流
（3）文字会盘绕浮动元素
（4）能够设置宽高
利用场景：（2 分）
（1）块标签在一行显示（2）左右布局（3）文字突围图片
#### 8. 问题：说出革除浮动的形式有哪些？(10 分)
本题目标：对革除浮动形式的把握，并理解为什么要革除浮动
答案：
1. 给间断浮动元素后增加一个兄弟标签, 只设置款式 clear:both
2. 给父级 div 定义 overflow 不为 visible，能够是 hidden、scroll、auto
3. 给父级 div 定义 display：inline-block;
4. 给父级 div 定义 position 不为 relative，能够是 absolute、fixed
5. 给父级 div 定义 float
#### 9. 问题：定位都有哪些？并阐明定位基准、特点及利用场景。(10 分)
本题目标：对定位的把握，并理解为什么要用定位
答案：
position:fixed; 固定定位，永远依据浏览器进行定位。
特点：（1）不在文本流（2）内容撑开宽高（3）能够设置宽高和纵向外边距
利用场景：广告、侧边栏、导航栏等固定布局
（3.5 分）
position:absolute; 相对定位，依据祖辈级上一个定位元素，进行定位, 如果祖辈级没有定位元素，则依据浏览器进行定位
特点：（1）不在文本流（2）内容撑开宽高（3）能够设置宽高和纵向外边距
利用场景：重叠布局
（3.5 分）
position:relative; 绝对定位，依据本身定位。
特点：（1）在文本流（2）属性特点不变
利用场景：（1）给相对定位做定位基准（2）微调
（3 分）
#### 10. 问题：css3 变换的属性是什么？变换有哪些形式，并写出实现代码？（10 分）
本题目标：把握变换的属性和形式
答案：
变换属性：transform 变换 (2 分)
变换形式：translate 挪动 (1 分)、rotate 旋转 (1 分)、scale 缩放 (1 分)、skew 歪斜 (1 分)
实现代码：
transform：translate(x,y);(1 分)
transform：rotate(deg);(1 分)
transform：scale(缩放比例);(1 分)
transform：skew(deg);(1 分)
#### 11. 问题：设置元素进行 3d 变换的筹备工作是什么？（10 分）
本题目标：把握开 3D 和景深
答案：
transform-style 属性，值为 preserve-3d（5 分）
perspective 属性，值为像素值 (5 分)
#### 12. 问题：动画别离有哪些款式？都是什么意思？并说出默认值（10 分）
本题目标：把握引入形式，明确理解优缺点后，依据状况，开始中应用不同的引入形式
答案：
动画名字：animation-name；默认值：无
动画运行工夫：animation-duration；默认值：0s
动画的工夫函数：animation-timing-function；默认值：ease
动画的延迟时间：animation-delay；默认值：0s
动画播放次数：animation-iteration-count；默认值：1
动画播放程序：animation-direction；默认值：alternate-reverse
动画完结状态：animation-fill-mode；默认值：backwards
动画播放状态：animation-play-state；默认值：running
**####
13. 问题：box-shadow：3px 4px 5px 5px red; 和 text-shadow：3px 4px 5px black; 别离代表什么意思？（10 分）**
本题目标：把握暗影复合款式属性的程序和代表的含意
答案：
盒子暗影：暗影横向偏移 3 像素 暗影纵向偏移 4 像素 暗影含糊间隔 5 像素 暗影在盒子自身减少的尺寸 红色暗影（5 分）
文字暗影：暗影横向偏移 3 像素 暗影纵向偏移 4 像素 暗影含糊间隔 5 像素 彩色暗影（5 分）
**#### 14. 问题：弹性布局学过哪些款式？别离什么意思？能够设置的值有哪些（10 分）
**
本题目标：把握弹性布局
答案：
（1）主轴的方向：flex-direction；可设置的值：row、column、row-reverse、column-reverse;
（2）主轴放不下是否换行：flex-wrap；可设置的值：wrap、nowrap、wrap-reverse；
（3）主轴对齐形式：justify-content；可设置的值：flex-start、flex-end、center、space-around、space-between；
（4）穿插轴对齐形式：align-items；可设置的值：flex-start、flex-end、center、stretch；
（5）多根主轴时，穿插轴的对齐形式：align-content；可设置的值：flex-start、flex-end、center、stretch；
（6）定义元素的显示程序：order；可设置的值：数字
（7）让单个子元素有不同的对齐形式：align-self；可设置的值：flex-start、flex-end、center、stretch、baseline、auto；
// 本期对于前端题库总结三到了这里就完结啦, 心愿对你有所帮忙! 让咱们一起致力走向巅峰!