2021.3.7 前端小组考核试题整理
HTML+CSS基础知识
试题如下：
1. 下面选项中，哪个属性值能将网页中某个标签的右外边距设置为10像素（A）
A. margin:0 10px 0 0;
B. margin:0 0 0 10px;
C. margin:10px 0 0 0;
D. padding-right:10px;
解析：margin属性连写时后面的取值分别是 上 右 下 左
2. 在页面中实现文字滚动的标记是什么标签？
答：marquee标签
3. 预定义格式化标签
答：被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。其中一二个常见应用就是用来表示计算机的源代码
**注意：（1）会导致断开的标签如：p标签等 不能包含在定义的块里
（2）同时 标签中的特殊符号被转换为符号实体，比如 “<” 代表 “<”，">" 代表 “>”
**
效果简单演示：
<html>
<head>
<meta charset="UTF-8">
<title>pretitle>
head>
<body>
<div>
aaa
aaa
div>
<pre>
aaa
aaa
pre>
body>
html>
效果：
aaa aaa
aaa
aaa
4. （1）请写出在网页中设定表格边框的厚度的属性；（2）设定表格单元格之间宽度属性；（3）设定表格内容与单元格线的距离属性；（4）合并行使用什么，和并列是用什么属性；
答：（1）border属性
（2）cellspacing属性
（3）cellpadding属性
（4）合并行使用 colspan属性 和并列使用 rowspan属性
5. CSS优先级算法如何计算？
答：（1）判断是否是直接选中（间接选中就是指继承）：
如果是间接选中，遵循“就近原则”保持状态努力向前
（2）如果是相同的选择器时：
如果都是直接选中，并且都是同类型的选择器，则遵循后写的选择器的设置
（3）如果是不同选择器时：
如果都是直接选中，并且不是相同类型的选择器，那么就会按照选择器的优先级来层叠
其中：id>类>标签>通配符>继承>浏览器默认
注意：!important设置的样式优先级别最高，通配符*优先级别最低
6. css属性哪些有继承性？哪些没有？
答：以color-/font-/text-/line-等开头的的属性具有继承性
7. 伪类的写作顺序？
答：a标签有四个伪类分别为：
- link 超链接的默认样式
- visited 访问过的（已经看过的）链接样式
- hover 鼠标处于鼠标悬停状态的链接样式
- active 当鼠标左键按下时，被激活（就是鼠标按下去那一瞬间）的链接样式。
其中的写作顺序也是按照 link→visited→hover→active
8. 如何让一段文本中的所有英文单词的字母大写？
答：*（1）利用 ==text-transform:uppercase;==属性
同时，==text-transform:lowercase; ==让一段文本中的所有英文单词的字母小写
*
9. 块级元素和行级元素分别有什么特点？
答：其主要特点是：行级元素也不独占一行 而块级元素独占一行
10. 用纯CSS创建一个三角形的原理是什么？
答：基本原理：首先给一个块级元素的宽高设置为0，然后将不需要的边框设置为透明，再给需要的边框设置颜色等参数
代码如下：
<style>
div{
height: 0;
width: 0;
border: 50px solid transparent;
border-top: 50px solid blue;
}
style>
效果如下：
11. 行内元素有哪些？块元素有哪些？空元素有哪些？
答：行内元素：img,a,input,span,strong等标签
块级元素：p,div,table,ul,dl,ol等标签
空元素：br等标签
12. 请对一下名词进行解释：绝对定位，相对定位，固定定位；并说出三种定位方式的区别。（※※※）
答：（1）绝对定位：Position:absolute;
将元素从文档流中拖出，想对他的父元素进行定位
主要特点：
-
元素使用绝对定位之后不占据原来的位置（脱标）
-
元素使用绝对定位，位置是从浏览器出发。
-
嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出
发。
- 嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出
发。
- 给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用
display:inline-block;）
（2）相对定位：Position: relative;
为从文档流中脱离
主要特点：
-
使用相对定位，位置从自身出发。
-
还占据原来的位置。
-
父元素相对定位，子元素绝对定位
-
行内元素使用相对定位不能转行内块
（3）固定定位：Position:fixed;
脱离文档流，不受父元素影响
主要特点：
-
固定定位之后，不占据原来的位置（脱标）
-
元素使用固定定位之后，位置从浏览器出发。
-
元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-
block;）
13. 什么是外边距重叠，重叠的结果是什么？
答：水平方向上外边距会相加，而垂直方向上的外边距最终会遵循较大的那一个
14. 是否了解iframe，优缺点是什么？
优点：重载页面时不需要重载整个页面，只需要重载一个框架页
缺点：会产生很多页面，不容易管理
15. 请写出如何清除浮动（至少两种方法）：
- 给前面一个父元素设置高度
- 给后面的盒子添加clear:both;属性
- 隔墙法
- 利用伪元素选择器（内墙法plus）
- 利用overflow: hidden;属性
16. 请写出如何让一个元素从页面中消失（至少三种方法）
- 添加 visibility: hidden;属性
- 添加 display:none;
- 添加 opacity:0;属性（元素隐藏，但依然占据空间，存在于文档流中，只是透明度被设置成了100%）
17. 你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？（了解）
答：*火狐浏览器——GECKO内核
谷歌浏览器——webkit内核
IE浏览器内核——IE内核
*
18. 代码题：
（1）写出三种或三种以上的让Div水平居中的方法。
- 给div添加 margin: 0 auto;属性：
<style>
div{
height: 100px;
width: 100px;
background-color: pink;
margin: 0 auto;
}
style>
- 利用绝对定位和margin-left:-(width/2)实现水平居中：
<style>
div{
height: 200px;
width: 200px;
background-color: pink;
position: absolute;
left: 50%;
margin-left: -100px;
}
style>
- 绝对定位+margin:0 auto + left：0 right:0 bottom:0 top:0
<style>
div{
height: 200px;
width: 200px;
background-color: pink;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
style>
（2）说出你学到的网页布局模型。并写出最熟悉的一种模型的代码。
- 双飞翼布局模型
<html>
<head>
<meta charset="utf-8">
<title>实现三栏水平布局之双飞翼布局title>
<style type="text/css">
.left, .main, .right {
float: left;
min-height: 130px;
text-align: center;
}
.left {
margin-left: -100%;
background: green;
width: 200px;
}
.right {
margin-left: -300px;
background-color: red;
width: 300px;
}
.main {
background-color: blue;
width: 100%;
}
.content{
margin: 0 300px 0 200px;
}
style>
head>
<body>
<div class="container">
<div class="main">
<div class="content">maindiv>
div>
<div class="left">leftdiv>
<div class="right">rightdiv>
div>
body>
html>