css入门学习day08笔记

最新推荐文章于 2022-04-07 17:55:12 发布

Perryc

最新推荐文章于 2022-04-07 17:55:12 发布

阅读量358

点赞数 2

分类专栏： HTML基础文章标签： html入门 css测试 html测试 html基础测试题 html基础题

本文链接：https://blog.csdn.net/Perryc/article/details/99324647

版权

HTML基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

html基础测试题及答案

一、简答题：

1. 请列出核心选择器、层次选择器有哪些 (5)

核心选择器：id选择器、class选择器、标签选择器、逗号选择器、普遍选择器
层次选择器：子代选择器、后代选择器、下一个兄弟选择器、之后所有兄弟选择器

2. 块级元素的显示与隐藏，写出两种方法，并说明区别 (5)

display:none/block 元素隐藏之后，不占用原来的位置
visibility:hidden/visible 元素隐藏之后，占用原来的位置

3. line-height与text-align，font-size与font-weight分别是设置什么的 (5)

line-height：行高
text-align：文本位置
center 居中
left 居左
right 居右
font-size：字体大小
font-weight：字体粗细

4. 写出表单元素的三个布尔属性 (5)

disabled、checked与selected。
布尔属性是控制元素的某一个状态，是一种比较特别的属性。由于浏览器商之前互相没协商好，因此在定义布尔属性时，也有差异。
布尔属性主要出现在表单元素上，常见的有radio,checkbox上的checked属性，option元素的selected属性以及所有表单元素都支持的disabled属性

5. css的引入方式有哪些 (5)

外部导入(link标签)
style标签
标签内部添加style属性

6. html的核心属性有哪些？特有属性有哪些？ (5)

核心属性：id、class、style、title
特有属性：a标签的href、target；img标签的src、alt

7. 选择器的优先级是什么？请按权重列出选择器的先后顺序 (5)

选择器优先级：
1）是否具有!important声明
2）选择器权重
1000 定义在标签style属性中
100 id选择器
10 类选择器，伪类选择器，属性选择器
1 元素选择器,伪元素选择器
3）选择器权重相同时，后者覆盖前者（就近原则，哪一个样式离标签近，哪一个就生效）
顺序：
!important > id选择器 > 类选择器=伪类选择器=属性选择器 > 元素选择器=伪元素选择器

8. 请说出overflow的三种取值，并说明具体含义 (5)

auto：自适应，在需要时剪切内容并添加滚动条。
scroll：将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容（若不设置隐藏滚动条，滚动条一直存在）。
hidden：将超出对象尺寸的内容进行裁剪，不会出现滚动条。

9. 说明几种定位，并说明它们是否脱离了文档流、相对于谁来定位 (5)

position：static、relative、absolute、fixed
static：默认值，没有定位，正常文档流之中
relative：元素相对与原本位置的定位，并没有脱离文档流
absolute：给元素设置绝对的定位，脱离文档流
1）设置了absolute的元素，如果有祖先级元素设置了position为relative或absolute，则此时元素定位的对象为祖先级元素
2）设置了absolute的元素，如果没有祖先级设置position，则此时元素相对与body定位，即浏览器视口
fixed：固定定位，脱离文档流，相对于浏览器视口进行定位

10. 父子级的div，父级样式：width:300px;height:300px;background-color:pink;
子级样式：width:100px;height:100px;background-color:teal;
若给子元素div添加margin-top会出现什么现象，怎么解决这个现象 (5)

现象：父子级元素都会有上边距
解决方法：
父元素：给父元素设置border/padding
父元素设置padding-top，同时需要设置高度（或者将盒模型改为border-box）
子元素：子元素脱离文档流(float:left / position:absolute)
原因：
在CSS2.1中对盒模型有如下规定：在垂直方向上，所有毗邻的两个或多个盒元素的margin将会合并。毗邻的意思是：同级或嵌套的盒元素，并且它们之间没有非空内容、padding或border。
合并后的margin的大小取两个发生合并的元素中margin较大的那一个。
参考博客：
https://www.jianshu.com/p/b6b9e61ef07a

11. 块级元素在父元素中水平垂直居中的方法有哪些 (10)

定位、伸缩盒

12. 盒子模型有哪些，简述它们的概念、宽度的计算方式，并说明通过什么属性可以改变盒模型 (10)

内容盒子：content-box width = content + padding + border
边框盒子：border-box width = width
通过box-sizing可以改变盒模型

13. 清除浮动的方式，请从父子级和兄弟级两方面进行描述 (10)

父元素：
1）浮动元素的父元素设置高度
2）浮动的父级元素设置overflow:hidden;
3）浮动元素的父元素使用::after{clear:both;content:’’;display:block}

兄弟元素：
在使用浮动的最后一个兄弟元素后面，添加一个标签，该标签使用clear:both;

14. 块级元素与行内元素的特性，并举例哪些是块级元素与行内元素 (10)

块级元素：div、h1~h3、p、ul、html、body
1) 独占一行空间
2) 默认宽度为100%，默认高度由子元素或者内容决定
3) 可以为其指定宽高 style=“width:;height:;”

行内元素：a、span、img
1) 与其他行内元素共享一行空间
2) 默认宽高由内容决定
3) 不能为其指定宽和高
4) 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素

15. 简述css3动画与过度效果 (5)

动画：
动画的定义、动画的使用

过渡：
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

（简单的过渡效果使用transition，复杂的动画使用animation）

16. 如何理解响应式布局 (5)

就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本
方法：
媒体查询

17. 请说明一下选择器的权重 (5)

ul.products::after 1 + 10 + 1 = 12
form > input[type=‘text’] 1 + 10 = 11
#first p 100 + 1 = 101

18. 一个满屏品字布局如何设计 (5)

定位
flex布局

应用题：

19. 使用代码实现图片轮播 (10)

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片轮播</title>
</head>
<style>
	*{
		margin:0;
		padding:0;
		list-style: none;
	}
	.wrapper{
		width: 300px;
		height: 200px;
		border: 3px solid #333;
		margin:0 auto;
		overflow: hidden;
		position: relative;	
	}
	.inner{
		width: 1200px;
		height: 200px;
		background-color: red;
		animation: xpf 4s infinite;
		position: absolute;
	}
	.inner div{
		width: 300px;
		height: 200px;
		background-color: teal;
		float: left;
	}
	@keyframes xpf{
		0%{
			left:0;
		}
		35%{
			left: -300px;
		}
		70%{
			left: -600px;
		}
		100%{
			left: -900px;
		}
	}
</style>
<body>
	<div class="wrapper">
		<div class="inner">
			<div class="one">
				<img src="./1.png" alt="">
			</div>
			<div class="two">
				<img src="./2.png" alt="">
			</div>
			<div class="three"></div>
			<div class="four">
				<img src="./1.png" alt="">
			</div>
		</div>
	</div>
</body>
</html>