层div
层属于网页中的块级元素,层元素中可以包含所有其他的HTML代码。层提供了一种分块控制网页内容的方法。各层之间可以彼此叠加,各层次序可以改变。
1. div(division)标签
< div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。
<div 属性="value">
属性 | 描述 |
---|---|
accesskey | 设置或检索对象的快捷键 |
align | 设置或检索对象相对于显示或表格的排列方式 |
atomicselection | 指定元素及其内容是否可以以不可见形式统一选择 |
begin | 设置或检索时间线在该元素上播放前的延迟时间 |
class | 设置或检索对象的类 |
contenteditable | 设置或检索表明用户是否可编辑对象内容的字符串 |
datafld | 设置或检索由datasrc属性指定的绑定到指定对象的给定数据源的字段 |
dataformatas | 设置或检索如何渲染提供给对象的数据 |
datasrc | 设置或检索用于数据绑定的数据源 |
dir | 设置或检索对象的阅读顺序 |
disabled | 设置或检索控件的状态 |
end | 设置或检索表明元素结束时间的值,或者元素设置为重复的简单持续终止时间。 |
hidefocus | 设置或检索表明对象是否显式表明焦点的值 |
id | 检索标识对象的字符串 |
lang | 设置或检索要使用的语言 |
language | 设置或检索当前脚本编写用的语言 |
nowrap | 设置或检索浏览器是否自动执行换行 |
style | 为该元素设置内嵌样式 |
syncmaster | 设置或检索时间容器是否必须在此元素上同步回放 |
systembitrate | 检索系统串大约可用带宽bps |
systemcaption | 表明是否要显示文本来代替演示的音频部分 |
systemlanguage | 表明是否在用户计算机上的选项设置中选中了给定语言 |
systemoverduborsubtitle | 指定针对那些正在观看演示但对播放的音频所使用的语言不熟悉的用户来说是否要渲染配音或字幕 |
tabindex | 设置或检索定义对象的tab顺序的索引 |
timecontainer | 设置或检索与元素关联的时间线类型 |
title | 设置或检索对象的咨询信息 |
unselectable | 指定该元素不可被选中 |
1.1 align
align:用于控制< div>标签中的元素对齐方式,其value值可以是left,center,right。
1.2 id
id属性用于定义一个元素的独特的样式,即设置标签的标识
语法:
id=“str”
例如一个css规则
#font1{font-size:llarger}
使用方法
id=“font1”
1.3 class
class属性用于指定元素属于何种样式的类,即设置标签的类。
class是一个样式,可以嵌套在任何结构和内容上。
语法:
classname{color}
classname:class属性的名称
例如:样式表可以加入:
color1{color:lime; background:#ff80c0}
使用方法:
class=“color1”
说明:
id属性和class属性的区别:
- id属性是先找到结构/内容,再给他定义样式:
id属性通常由于定义页面上一个仅出现一次的标签,因为一个id在一个文档中只能使用一次。
在一个结构文档中,d名必须是惟一的
- class属性是先定义样式,再套给多个结构/内容:
class属性是用来根据用户定义的标准对一个或多个元素进行定义,可通过css,JavaScript等来使用这个类,因此可以在一个页面上使用class=“frodo”,class=“gandalf”,class=“aragorn"来区分不同的故事线。
在一个结构文档中,可以多处使用同一个class。
- id在标准上是一个id只能在文档中使用一次,但大多数浏览器不会出错,建议按标准来。
1.4 style
style:用于设置
标签中的元素样式,其value值为css属性值,各属性值间应用分号分隔。
属性 | 描述 |
---|---|
alignContent | 当灵活容器内的各项没有占用所有可用的空间时各项之间的对齐方式(水平)。 |
alignItems | 灵活容器内的各项的对齐方式。 |
alignSelf | 灵活容器内被选中项目的对齐方式。 |
animation | 是下面除了 animationPlayState 属性之外的其他属性的速记属性。 |
animationDelay | 动画何时开始。 |
animationDirection | 是否循环交替反向播放动画。 |
animationDuration | 动画完成需花 |