HTML阶段笔试题-附答案
- 问题：请分别写出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分)
- 问题：说出学过的选择器有哪些？并举例说明。（10分，少答一个扣2分，全答对满分）
本题目的：对学过的选择器，有清晰的了解
答案：
（1）标签名选择器,例：div{}
（2）id选择器,例：#div{}
（3）类选择器,例：.div{}
（4）后代选择器,例：div a{}
（5）群组选择器,例：div,a{}
（6）通配符选择器,例：*{}
- 问题：关于背景都有哪些样式？写出样式并说明该样式的意思和可设置的值类型，至少写出五个；（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不跟随
- 问题：关于文本都有哪些样式？写出样式并说明该样式的意思和可设置的值类型至少写出五个;（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、百分比
- 问题：关于字体都有哪些样式？写出样式并说明该样式的意思和可设置的值类型。(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值
- 问题：什么是盒模型？说出盒模型的组成及内外边距使用场景(10分)
本题目的：考察盒模型结构掌握，以及宽高的计算
答案：
CSS盒子模型就是在网页设计中，把所有的页面元素都看作盒子。（2分）
它包括：外边距(Margin)(1分)，边框(border)(1分)，内边距(padding)(1分)，和实际内容(content)(1分)
使用场景：
（1）兄弟元素之间的距离用外边距margin（2分）
（2）父子之间的距离用内边距padding（2分）
- 浮动元素的特点以及应用场景。(10分)
本题目的：掌握浮动元素的特点，明确浮动元素与其他元素的区别
答案：
浮动元素的特点：（8分）
（1）元素之间没有间隙
（2）元素脱离文档流
（3）文字会环绕浮动元素
（4）可以设置宽高
应用场景：（2分）
（1）块标签在一行显示（2）左右布局（3）文字包围图片
- 问题：说出清除浮动的方式有哪些？(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
- 问题：定位都有哪些？并说明定位基准、特点及应用场景。(10分)
本题目的：对定位的掌握，并了解为什么要用定位
答案：
- 1. position:fixed;固定定位，永远根据浏览器进行定位。
特点：（1）不在文本流（2）内容撑开宽高（3）可以设置宽高和纵向外边距
应用场景：广告、侧边栏、导航栏等固定布局
（3.5分）
- 2. position:absolute;绝对定位，根据祖辈级上一个定位元素，进行定位,如果祖辈级没有定位元素，则根据浏览器进行定位
特点：（1）不在文本流（2）内容撑开宽高（3）可以设置宽高和纵向外边距
应用场景：重叠布局
（3.5分）
- 3. position:relative;相对定位，根据自身定位。
特点：（1）在文本流（2）属性特点不变
应用场景：（1）给绝对定位做定位基准（2）微调
（3分）
- 问题：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分)
- 问题：设置元素进行3d变换的准备工作是什么？（10分）
本题目的：掌握开3D和景深
答案：
transform-style属性，值为preserve-3d（5分）
perspective属性，值为像素值(5分)
- 问题：动画分别有哪些样式？都是什么意思？并说出默认值（10分）
本题目的：掌握引入方式，明确了解优缺点后，根据情况，开始中使用不同的引入方式
答案：
- 1. 动画名字：animation-name；默认值：无
- 2. 动画运行时间： animation-duration；默认值：0s
- 3. 动画的时间函数： animation-timing-function；默认值：ease
- 4. 动画的延迟时间：animation-delay；默认值：0s
- 5. 动画播放次数： animation-iteration-count；默认值：1
- 6. 动画播放顺序： animation-direction；默认值：alternate-reverse
- 7. 动画结束状态：animation-fill-mode；默认值：backwards
- 8. 动画播放状态：animation-play-state；默认值：running
- 问题：box-shadow：3px 4px 5px 5px red; 和text-shadow：3px 4px 5px black; 分别代表什么意思？（10分）
本题目的：掌握阴影复合样式属性的顺序和代表的含义
答案：
盒子阴影：阴影横向偏移3像素 阴影纵向偏移4像素 阴影模糊距离5像素 阴影在盒子本身增加的尺寸 红色阴影（5分）
文字阴影：阴影横向偏移3像素 阴影纵向偏移4像素 阴影模糊距离5像素 黑色阴影（5分）
- 问题：弹性布局学过哪些样式？分别什么意思？可以设置的值有哪些（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；
