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></pre>
的功能是什么?
答:被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。其中一二个常见应用就是用来表示计算机的源代码
**注意:(1)会导致断开的标签如:p标签等 不能包含在<pre>
定义的块里
(2)同时<pre>
标签中的特殊符号被转换为符号实体,比如 “<
” 代表 “<”,">
" 代表 “>”
**
效果简单演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pre</title>
</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)说出你学到的网页布局模型。并写出最熟悉的一种模型的代码。
- 双飞翼布局模型
<!DOCTYPE html>
<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">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>