html/css3

程序员文章站 2022-05-11 09:05:57

...

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

2.块级元素的显示与隐藏，写出两种方法，并说明区别
display:none/block 元素隐藏之后，不占用原来的位置
visibility:hidden/visible 元素隐藏之后，占用原来的位置

3.line-height与text-align，font-size与font-weight分别是设置什么的
line-height：行高
text-align：文本位置
center 居中
left 居左
right 居右
font-size：字体大小
font-weight：字体粗细
width
4.写出表单元素的三个布尔属性
reversed 反转 open 打开
checked 默认选中，用于单选或者多选
disabled 禁止选中状态
readonly 只读
multiple 是否可以多选
selected 默认选中下拉框中的某个值
autofocus 默认提醒
required 必须输入不能为空
controls 显示控制条
autoplay 自动播放
loop 循环
5.css的引入方式有哪些
外部导入(link标签)
style标签
标签内部添加style属性

6.html的核心属性有哪些？特有属性有哪些？
核心属性：id、class、style、title
特有属性：a标签的href、target；img标签的src、alt

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

8.请说出overflow的三种取值，并说明具体含义
auto：自适应，在需要时剪切内容并添加滚动条。
scroll：将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容（若不设置隐藏滚动条，滚动条一直存在）。
hidden：将超出对象尺寸的内容进行裁剪，不会出现滚动条。

9.说明几种定位，并说明它们是否脱离了文档流、相对于谁来定位
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会出现什么现象，怎么解决这个现象
现象：父子级元素都会有上边距
解决方法：
给父级加边框属性
给父级加padding
给子级或父级一方添加浮动
给子级或父级一方添加绝对定位
给子级或父级一方添加display:inline-block;
给父级元素添加overflow：hidden;

11.块级元素在父元素中水平垂直居中的方法有哪些
可以给父级使用相对定位，子级使用绝对定位并margin:auto;，将top、left、right、bottom为0
给父级和子级都加绝对定位，再给子级添加top：calc（50% - 子级元素高度一半）left：calc（50% - 子级元素宽度一半）
给父级相对定位,子级绝对定位：left：50%；top：50%；
margin-left：-子级元素宽度一半；margin-top：-子级元素高度一半
给父级一个display：flex； align-items：center；再给子级添加：margin：0 auto；

12.盒子模型有哪些，简述它们的概念、宽度的计算方式，并说明通过什么属性可以改变盒模型
内容盒子：content-box width = content + padding + border
边框盒子：border-box width = width
通过box-sizing可以改变盒模型

13.清除浮动的方式，请从父子级和兄弟级两方面进行描述
1）、使用额外的标签clear:both
在浮动元素下面添加一个空标签，在这个标签中设置clear：both；
2）、使用overflow：hidden属性
父元素定义overflow:hidden，此时，浏览器会自动检查浮动区域的高度；
3）、使用伪元素:after清除浮动
.parent:after{
// 定义元素前后的生成内容，这里是定义元素后的空内容
content: ‘’;
display: block;
clear: both;
}
在元素最后定义一个空的内容，然后让该空的内容来清除浮动；

14.块级元素与行内元素的特性，并举例哪些是块级元素与行内元素
块级元素：div、h1~h3、p、ul、html、body
1) 独占一行空间
2) 默认宽度为100%，默认高度由子元素或者内容决定
3) 可以为其指定宽高 style=“width:;height:;”
行内元素：a、span、img
1) 与其他行内元素共享一行空间
2) 默认宽高由内容决定
3) 不能为其指定宽和高
4) 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素

15.简述css3动画与过度效果
动画：
动画的定义、动画的使用
过渡：
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
过渡效果使用transition,动画使用animation

transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果
1）动画不需要事件触发，过渡需要。
2）过渡只有一组（两个：开始-结束）关键帧，动画可以设置多个。
16.如何理解响应式布局
就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本
方法：
媒体查询

17.请说明一下选择器的权重
ul.products::after 1 + 10 + 1 = 12
form > input[type=‘text’] 1 + 10 = 11
#first p 100 + 1 = 101

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

	<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		html,body,.main{
			width: 100%;
			height: 100%;
		}
		*{
			margin: 0;
			padding: 0;
		}
		.top{
			width: 100%;
			height: 20%;
			background-color: pink;
		}
		.bottom{
			width: 100%;
			height: 80%;
			background-color: yellow;
		}
		.bottom_left{
			width: 15%;
			height: 100%;
			background-color: green;
			float: left;
		}
		.bottom_right{
			width: 85%;
			height: 100%;
			background-color: teal;
			margin-left: 15%;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="top"></div>
		<div class="bottom">
			<div class="bottom_left"></div>
			<div class="bottom_right"></div>
		</div>
	</div>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
</head>
<style>

	body,html,.outer{
		width: 100%;
		height: 100%;
	}
	.inner{
		width:500px;
		height: 400px;
		background-image: url(./images/a.jpg);
		background-size: cover;
		margin: auto;
		margin-top: 100px;
		animation-name: move;
		animation-duration: 4s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}
	@keyframes move{
		0%{
			background-image: url(./images/a.jpg);
		}
		20%{
			background-image: url(./images/b.jpg);
		}
		40%{
			background-image: url(./images/c.jpg);
		}
		60%{
			background-image: url(./images/d.jpg);
		}
		80%{
			background-image: url(./images/e.jpg);
		}
		100%{
			background-image: url(./images/a.jpg);
		}
	}
</style>
<body>
	<div class="outer">
		<div class="inner">
			
		</div>
	</div>
</body>
</html>

html/css3

SQL Server中发送HTML格式邮件的方法

jQuery模拟html下拉多选框的原生实现方法示例

JavaScript与HTML结合的基本使用方法整理

html搜索框怎么做（html制作百度搜索页面）

jquery跳转页面方法（html5点击按钮跳转页面）

Dom属性和HTML属性的区别解析

PHP使用HTML5 FormData对象提交表单操作示例

html自学网站有哪些（html5零基础入门教程）

PHP使用HTML5 FileApi实现Ajax上传文件功能示例

js中去除字符串中所有的html标签代码实例