HTML5及CSS3的部分知识点回顾

最新推荐文章于 2023-02-02 19:07:15 发布

小欣不会输

最新推荐文章于 2023-02-02 19:07:15 发布

阅读量386

点赞数

本文链接：https://blog.csdn.net/wx112728/article/details/123683947

版权

1.新增form表单：

<input type=“email”> 邮箱

<input type=“number”> 数字

<input type=“tel”> 手机

<input type=“search”> 搜索域

<input type=“url”> 网址

<input type=“date”> 年月日

<input type=“month”> 年月

<input type=“week”> 年周

<input type=“time”> 时分

<input type=“datetime”> 年月日时间

<input type=“datetime-local”> 本地时间

<input type=“range”> 滑动条

<input type=“color”> 拾色器

2:关键帧的定义

@keyframes 自定义动画名称{

        from{

属性名 : 属性值;

        }

        to{

属性名 : 属性值;

        }

}

@keyframes 自定义动画名称{

        0%{

属性名 : 属性值;

        }

        100%{

属性名 : 属性值;

         }

}

3：transform的变换值

transform : translate() / translateX() / translateY() 移动

transform : rotate() / rotateX() / rotateY() / rotateZ() 旋转

transform : scale() / scaleX() / scaleY() 缩放

transform : skew() / skewX() / skewY() 扭曲

需要注意的是X Y Z要大写！

4:变换基点

transform-origin: x y;

x和y的值也可以是表示位置的单词，如：top、left和center等等；

5：边框阴影的语法

box-shadow: x y [模糊距离] [阴影扩展半径] [阴影颜色] [投影方式]；

投影的方式有两种：内投影inset和外投影outset(默认值)；

6：优雅降级和渐进增强的区别

优雅降级是先构建完整的功能，再考虑低版本的兼容问题，并试图减少用户体验的供给，而渐进增强是从低版本的兼容性开始，并不断扩充，以适应新环境的需要。

7：display:none与visibility:hidden的区别

visibility:hidden; 将元素隐藏，但是在网页中的位置不会被取缔。
display:none; 将元素的显示设为无，在网页中不占任何位置。

visibility 属性指定一个元素是否可见的

display 这个属性用于定义建立布局时元素生成的显示框类型

visibility:hidden; 会触发重绘（repaint）

display:none; 会触发回流（reflow）

注意：重绘不一定回流，回流一定重绘。

8：rem和em的区别

rem 受根html的字号大小影响，常用于移动端

em 受当前字号大小的影响

9：一个元素在另一个元素中垂直水平居中的方法

垂直水平都居中的方法目前有四种常见的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 第一种 */
			.boxone{
				position: relative;
				width: 300px;
				height: 300px;
				background-color: #8A2BE2;
			}
			.boxone .one{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 200px;
				height: 200px;
				background-color: #32CD32;
			}
			/* 第二种 */
			.boxtwo{
				position: relative;
				width: 300px;
				height: 300px;
				background-color: #DC143C;
			}
			.boxtwo .two{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 200px;
				height: 200px;
				background-color: #DEB887;
			}
			.boxthree{
				position: relative;
				width: 300px;
				height: 300px;
				background-color: #ada442;
			}
			.boxthree .three{
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -100px;
				/* car盒子高度的一半的负值 */
				margin-left: -100px;
				/* car盒子宽度的一半的负值 */
				width: 200px;
				height: 200px;
				background-color: #DEB887;
			}
			.boxfour{
				position: relative;
				width: 300px;
				height: 300px;
				background-color: #8A2BE2;
			}
			.boxfour .four{
				position: absolute;
				top: calc(50% -  100px);
				left: calc(50% - 100px);
				width: 200px;
				height: 200px;
				background-color: #FF7F50;
			}
		</style>
	</head>
	<body>
		<!-- 第一种 -->
		<div class="boxone">
			<div class="one"></div>
		</div>
		<!-- 第二种 -->
		<div class="boxtwo">
			<div class="two"></div>
		</div>
		<!-- 第三种 -->
		<div class="boxthree">
			<div class="three"></div>
		</div>
		<!-- 第四种 -->
		<div class="boxfour">
			<div class="four"></div>
		</div>
	</body>
</html>

下面的顺序和上面的顺序不一样大家可以对照一下

第一种：

父元素 position ：relative

子元素 position ： absolute ;

left:0;right:0;top:0;bottom:0;margin:auto

第二种

父元素 position:relative

子元素 position:absolute;

left:50%;

top:50%;

margin-left:-width/2 +px；

margin-top:-height/2 + px;

第三种

父元素 position:relative

子元素 position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%)

第四种

父元素 position:relative

子元素 position:absolute;

left:calc(50% - width/2 px)

top:calc(50% - height/2 px)

需要注意的是第四种方法的最后一定要加单位！

小欣不会输

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5及CSS3的部分知识点回顾

1.新增form表单：<input type=“email”> 邮箱<input type=“number”> 数字<input type=“tel”> 手机<input type=“search”> 搜索域<input type=“url”> 网址<input type=“date”> 年月日<input type=“month”> 年月<input type=“week”>
复制链接

扫一扫