关于前端:前端题库总结三

#### 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；

// 本期对于前端题库总结三到了这里就完结啦, 心愿对你有所帮忙! 让咱们一起致力走向巅峰!