浮动、定位、背景、HTML5

最新推荐文章于 2023-01-04 13:14:12 发布

yjx_43750162

最新推荐文章于 2023-01-04 13:14:12 发布

阅读量528

点赞数

本文链接：https://blog.csdn.net/weixin_43750162/article/details/86680580

版权

浮动

文档流

文档流，是指盒子按照 html 标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

浮动的特性

1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来
3、相邻浮动的块元素可以并在一行，超出父级宽度就换行
4、浮动让行内元素或块元素自动转化为行内块元素
5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动
7、浮动元素之间没有垂直 margin 的合并

清除浮动

1、父级上增加属性 overflow：hidden
2、在最后一个子元素的后面加一个空的 div，给它样式属性 clear:both
3、

.clearfix:after,.clearfix:before{
 content: "";
 display: table;
 }
.clearfix:after{
 clear:both；
 }

定位

我们可以使用 css 的 position 属性来设置元素的定位类型，postion的设置项如下：
1、relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
2、absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于 body 元素进行定位。
3、fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
4、static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性
5、inherit 从父元素继承 position 属性的值

定位元素特性

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

定位元素层级

定位元素是浮动的正常的文档流之上的，可以用 z-index 属性来设置元素的层级，其取值的范围是0~999；数字越大，其层级越高。

背景属性

它是负责给盒子设置背景图片和背景颜色的

background-color

设置背景颜色

background-image

设置背景图片地址
参数：
none : 　无背景图（默认的）
url : 　使用绝对或相对地址指定背景图像

background-repeat

设置背景图片如何重复平铺
参数：
repeat : 　背景图像在纵向和横向上平铺
no-repeat : 　背景图像不平铺
repeat-x : 　背景图像在横向上平铺
repeat-y : 　背景图像在纵向平铺

background-position 设置背景图片的位置

position 后面是x坐标和y坐标。可以使用方位名词或者精确数值。
如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面

background-attachment

设置背景图片是固定还是随着页面滚动条
参数：
scroll : 　背景图像是随对象内容滚动
fixed : 　背景图像固定

HTML5

HTML5 定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可
以帮助开发者创建富互联网应用，还提供了一些 Javascript API，如地理位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合 Canvas 我们可开发网页版游戏。
H5 范称
HTML + CSS3 + JS

语法规范

特点：
1、更简洁
2、更宽松

语义化标签

常用的语义化标签

<nav> 表示导航
<header> 表示页眉
<footer> 表示页脚
<section> 表示区块
<article> 表示文章 如文章、评论、帖
<aside> 表示侧边栏 如文章的侧栏
<figure> 表示媒介内容分组 
<mark> 表示标记 
<progress> 表示进度

表单

表单类型

email：输入email格式
tel 手机号码
url 只能输入 url 格式
number 只能输入数字
search 搜索框
range 范围 滑动条
color 拾色器
time 时间
date 日期 
datetime 时间日期
month 月份
week 星期

表单元素

下拉菜单：

数据列表元素

datalist（数据列表）与 input 配合

<input type=”text” list=”data”>
<datalist id=”data”>
<option>职业</option>
<option>工人</option>
<option>学生</option>
<option>老板</option>
 </datalist>

注意：list取名要与id名一样。

keygen 元素

生成加密字符串
作用：提供一种验证用户的可靠方法
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。
meter：度量器
最大宽度：max-width
最小宽度：min-width

表单属性

placeholder 占位符
autofocus 获取焦点
multiple 文件上传多选或多个邮箱地址
autocomplete 自动完成
novalidate 关闭验证
required 必填项
pattern 正则表达式 验证表单

表单事件

oninput 用户输入内容时触发，可用于移动端输入字数统计
oninvalid 验证不通过时触发

多媒体

音频

<body>
		<!--通过src指定音频文件的地址-->
		<audio src="">
			
		</audio>
	</body>

其中，音频的后缀名也可以是.mp3、.wav、.ogg
并且可以通过附加属性可以更友好控制音频的播放，如：
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放

视频

<body>
		<!--通过src指定视频文件的地址-->
		<video src="">
			
		</video>
	</body>

其中,视频的后缀名也可以是.mp4、.ogg
同样，通过附加属性可以更友好的控制视频的播放，如：
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度

DOM扩展

获取元素

1、document.getElementsByClassName (‘class’) 通过类名获取元素，以类数组形式存在。
2、document.querySelector(‘div’) 通过 CSS 选择器获取元素，符合匹配条件的第 1 个元素。
3、document.querySelectorAll(‘selector’) 通过 CSS 选择器获取元素，以类数组形式存

类名操作

1、Node.classList.add(‘class’) 添加 class
2、Node.classList.remove(‘class’) 移除 class
3、Node.classList.toggle(‘class’) 切换 class，有则移除，无则添加
4、Node.classList.contains(‘class’) 检测是否存在 class

自定义属性

给标签添加自定义属性，必须要以data开头
自定义的属性需要通过 dateset[]方式来获取

yjx_43750162

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动、定位、背景、HTML5

浮动文档流文档流，是指盒子按照 html 标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。浮动的特性1、浮动元素有左浮动(float:left)和右浮动(float:right)两种2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来3、相邻浮动的块元素可以并在一...
复制链接

扫一扫