2021.3.7 前端小组考核试题整理_设置网页中某个标签的右外边距为10像素-CSDN博客

本文链接：https://blog.csdn.net/qq_51368103/article/details/114501009

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>