WEB基础之：层标签div

层div

• • 1. div(division)标签
  • • 1.1 align
    • 1.2 id
    • 1.3 class
    • 1.4 style
    • • 1.4.1 position属性
      • 1.4.2 display属性
      • 1.4.3 display属性与visibility属性的对比
  • 2. span标签与div标签
  • 3. iframe标签

​ 层属于网页中的块级元素，层元素中可以包含所有其他的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	动画完成需花费的秒数或毫秒数。
animationFillMode	当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animationIterationCount	动画的播放次数。
animationName	关键帧 @keyframes 动画的名称。
animationTimingFunction	动画的速度曲线。
animationPlayState	动画是运行的还是暂停的。
background	在一个声明中的所有背景属性。
backgroundAttachment	背景图像是否固定或随页面滚动。
backgroundColor	元素的背景色。
backgroundImage	元素的背景图像。
backgroundPosition	的背景图像的起始位置。
backgroundRepeat	如何重复背景图像。
backgroundClip	背景的绘制区域。
backgroundOrigin	背景图像的定位区域。
backgroundSize	背景图像的大小。
backfaceVisibility	当一个元素背对屏幕时是否可见。
border	在一个声明中的 borderWidth、borderStyle 和 borderColor。
borderBottom	在一个声明中的所有 borderBottom* 属性。
borderBottomColor	下边框的颜色。
borderBottomLeftRadius	左下角边框的形状。
borderBottomRightRadius	右下角边框的形状。
borderBottomStyle	下边框的样式。
borderBottomWidth	下边框的宽度。
borderCollapse	表格的边框是否被折叠为一个单一的边框。
borderColor	元素边框的颜色（最多可以有四个值）。
borderImage	一个用于所有的 borderImage* 属性的速记属性。
borderImageOutset	边框图像区域超出边界框的量。
borderImageRepeat	图像边框是重复拼接图块还是延伸图块。
borderImageSlice	图像边框的向内偏移。
borderImageSource	要作为边框使用的图像。
borderImageWidth	图像边框的宽度。
borderLeft	在一个声明中的所有 borderLeft* 属性。
borderLeftColor	左边框的颜色。
borderLeftStyle	左边框的样式。
borderLeftWidth	左边框的宽度。
borderRadius	一个用于四个 border*Radius 属性的速记属性。
borderRight	在一个声明中的所有 borderRight* 属性。
borderRightColor	右边框的颜色。
borderRightStyle	右边框的样式。
borderRightWidth	右边框的宽度。
borderSpacing	表格中单元格之间的距离。
borderStyle	元素边框的样式（最多可以有四个值）。
borderTop	在一个声明中的所有 borderTop* 属性。
borderTopColor	上边框的颜色。
borderTopLeftRadius	左上角边框的形状。
borderTopRightRadius	右上角边框的形状。
borderTopStyle	上边框的样式。
borderTopWidth	上边框的宽度。
borderWidth	元素边框的宽度（最多可以有四个值）。
bottom	定位元素的底部位置。
boxDecorationBreak	分页处元素的背景和边框行为，或者换行处内联元素的背景和边框行为。
boxShadow	元素的下拉阴影。
boxSizing	允许您以特定的方式定义匹配某个区域的特定元素。
captionSide	表格标题的位置。
clear	元素相对浮动对象的位置。
clip	定位元素的可见部分。
color	文本的颜色。
columnCount	元素应该被划分的列数。
columnFill	如何填充列。
columnGap	列之间的间隔。
columnRule	一个用于所有的 columnRule* 属性的速记属性。
columnRuleColor	列之间的颜色规则。
columnRuleStyle	列之间的样式规则。
columnRuleWidth	列之间的宽度规则。
columns	一个用于 columnWidth 和 columnCount 的速记属性。
columnSpan	一个元素应横跨多少列。
columnWidth	列的宽度。
content	与 :before 和 :after 伪元素一起使用，来插入生成的内容。
counterIncrement	增加一个或多个计数器。
counterReset	创建或重置一个或多个计数器。
cursor	鼠标指针显示的光标类型。
direction	文本的方向。
display	元素的显示类型。
emptyCells	是否显示表格中的空单元格的边框和背景。
filter	图片滤镜(可视效果，如：高斯模糊与饱和度)
flex	相对于同一容器其他灵活的项目，项目的长度。
flexBasis	设置或灵活项目的初始长度。
flexDirection	灵活项目的方向。
flexFlow	是 flexDirection 和 flexWrap 属性的速记属性。
flexGrow	项目将相对于同一容器内其他灵活的项目进行扩展的量。
flexShrink	项目将相对于同一容器内其他灵活的项目进行收缩的量。
flexWrap	灵活项目是否拆行或拆列。
cssFloat	元素的水平对齐方式。
font	一个声明中的 fontStyle、fontVariant、fontWeight、fontSize、lineHeight 和 fontFamily。
fontFamily	文本的字体。
fontSize	文本的字体尺寸。
fontStyle	字体样式是否是 normal（正常的）、italic（斜体）或 oblique（倾斜的）。
fontVariant	是否以小型大写字母显示字体。
fontWeight	字体的粗细。
fontSizeAdjust	当使用备用字体时，确保文本的可读性。
fontStretch	从字体库中选择一种正常的、浓缩的或扩大的字体。
hangingPunctuation	规定一个标点符号是否可以放置在线框外。
height	元素的高度。
hyphens	设置如何拆分单词来提高段落布局。
icon	向作者提供为一个带有等价于图标的元素定义样式的功能。
imageOrientation	规定一个用户代理应用到图像上的顺时针方向的旋转。
justifyContent	当灵活容器内的各项没有占用所有可用的空间时各项之间的对齐方式（垂直）。
left	定位元素的左部位置。
letterSpacing	文本中字符之间的空间。
lineHeight	在文本中行之间的距离。
listStyle	一个声明中的 listStyleImage、listStylePosition 和 listStyleType。
listStyleImage	作为列表项标记的图像。
listStylePosition	列表项标记的位置。
listStyleType	列表项标记的类型。
margin	元素的外边距（最多可以有四个值）。
marginBottom	元素的的下外边距。
marginLeft	元素的左外边距。
marginRight	元素的右外边距。
marginTop	元素的上外边距。
maxHeight	元素的最大高度。
maxWidth	元素的最大宽度。
minHeight	元素的最小高度。
minWidth	元素的最小宽度。
navDown	当使用向下箭头导航键时要导航到哪里。
navIndex	元素的显示顺序。
navLeft	当使用向左箭头导航键时要导航到哪里。
navRight	当使用向右箭头导航键时要导航到哪里。
navUp	当使用向上箭头导航键时要导航到哪里。
opacity	元素的不透明度。
order	一个灵活的项目相对于同一容器内其他灵活项目的顺序。
orphans	当元素内有分页时，必须在页面底部预留的最小行数。
outline	在一个声明中的所有 outline 属性。
outlineColor	一个元素周围的轮廓颜色。
outlineOffset	对轮廓进行偏移，并在边框边缘进行绘制。
outlineStyle	一个元素周围的轮廓样式。
outlineWidth	一个元素周围的轮廓宽度。
overflow	如何处理呈现在元素框外面的内容。
overflowX	规定如果内容溢出元素的内容区域，是否对内容的左/右边缘进行裁剪。
overflowY	规定如果内容溢出元素的内容区域，是否对内容的上/下边缘进行裁剪。
padding	元素的内边距（最多可以有四个值）。
paddingBottom	元素的下内边距。
paddingLeft	元素的左内边距。
paddingRight	元素的右内边距。
paddingTop	元素的上内边距。
pageBreakAfter	元素后的分页行为。
pageBreakBefore	元素前的分页行为。
pageBreakInside	元素内的分页行为。
perspective	3D 元素被查看的视角。
perspectiveOrigin	3D 元素的底部位置。
position	用于元素定位方法的类型（static、relative、absolute 或 fixed）。
quotes	嵌入引用的引号类型。
resize	是否可由用户调整元素的尺寸大小。
right	定位元素的右部位置。
tableLayout	表格单元格、行、列的布局方式。
tabSize	制表符（tab）字符的长度。
textAlign	文本的水平对齐方式。
textAlignLast	当 text-align 属性设置为 “justify” 时，如何对齐一个强制换行符前的最后一行。
textDecoration	文本的修饰。
textDecorationColor	文本修饰的颜色。
textDecorationLine	文本修饰要使用的线条类型。
textDecorationStyle	文本修饰中的线条样式。
textIndent	文本第一行的缩进。
textJustify	当 text-align 属性设置为 “justify” 时，要使用的对齐方法。
textOverflow	当文本溢出包含它的元素，应该发生什么。
textShadow	文本的阴影效果。
textTransform	文本的大小写。
top	定位元素的顶部位置。
transform	向元素应用 2D 或 3D 转换。
transformOrigin	被转换元素的位置。
transformStyle	被嵌套的元素如何呈现在 3D 空间中。
transition	一个用于四个过渡属性的速记属性。
transitionProperty	应用过渡效果的 CSS 属性的名称。
transitionDuration	完成过渡效果需要花费的时间（以秒或毫秒计）。
transitionTimingFunction	过渡效果的速度曲线。
transitionDelay	过渡效果何时开始。
unicodeBidi	文本是否被重写，以便在同一文档中支持多种语言。
verticalAlign	元素中内容的垂直对齐方式。
visibility	元素是否应该是可见的。
whiteSpace	如何处理文本中的制表符、换行符和空格符。
width	元素的宽度。
wordBreak	非 CJK 语言的换行规则。
wordSpacing	文本中单词之间的空间。
wordWrap	允许长单词或 URL 地址换行到下一行。
widows	一个元素必须在页面顶部的可见行的最小数量。
zIndex	定位元素的堆叠顺序。

1.4.1 position属性

用于元素定位方法的类型（static、relative、absolute 或 fixed）。

position属性的参数	描述
static	默认。对象遵循HTML定位规则。（static 元素会忽略任何 top、bottom、left 或 right 声明）。
absolute	可定位于相对于第一个已定位（非静态的）的包含它的元素的指定坐标。此元素的位置可通过 “left”、“top”、“right” 以及 “bottom” 属性来规定。而其层叠通过z-index属性定义，此时对象不具有边距，但仍有补白和边框。
fixed	定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 “left”、“top”、“right” 以及 “bottom” 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。
relative	对象不可层叠，但将依据left,right,top,bottom等属性在正常文档流中偏移位置。
inherit	position 属性的值从父元素继承。
left	定位元素的左部位置。
right	定位元素的右部位置。
width	元素的宽度。
height	元素的高度。
clip	定位元素的可见部分。
visibility	元素是否应该是可见的。
z-Index	定位元素的堆叠顺序。
background-Color	元素的背景色。
background-Image	元素的背景图像。

1.4.2 display属性

设置元素的浮动特征

display属性	描述
block	元素呈现为块级元素。容器中所有的元素将会被当作一个单独的块，就像< DIV>元素一样，它会在那个点被放入到页面中。(实际上你可以设置< span>的display:block，使其可以像< DIV>一样工作。
compact	元素呈现为块级元素或内联元素，取决于上下文。
inherit	display 属性的值从父元素继承。
inline	默认。将使其行为和元素inline一样—即使它是普通的块元素如< DIV>，它也将会被组合成像< span>那样的输出流。
inline-block	元素呈现为内联盒子内的块盒子。
inline-table	元素呈现为内联表格（类似 < table>），表格前后没有换行符。
list-item	元素呈现为列表。
marker	该值在盒子前后设置内容作为标记（与 :before 和 :after 伪元素一起使用，否则该值与 “inline” 是相同的）。
none	元素不会被显示。元素实际上从页面中被移走，下面所在的元素就会被自动跟上填充。
run-in	元素呈现为块级或内联元素，取决于上下文。
table	元素呈现为块级表格（类似 < table>），表格前后带有换行符。
table-caption	元素呈现为表格标题（类似 < caption>）。
table-cell	元素呈现为表格单元格（类似 < td> 和 < th>）。
table-column	元素呈现为单元格的列（类似 < col>）。
table-column-group	元素呈现为一个或多个列的分组（类似 < colgroup>）。
table-footer-group	元素呈现为表格页脚行（类似 < tfoot>）。
table-header-group	元素呈现为表格页眉行（类似 < thead>）。
table-row	元素呈现为表格行（类似 < tr>）。
table-row-group	元素呈现为一个或多个行的分组（类似 < tbody>）。

1.4.3 display属性与visibility属性的对比

**visibility属性：**确定元素显示还是隐藏；visibility=“visible|hidden”，visible显示，hidden隐藏。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

display属性： 隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。

2. span标签与div标签

**div：**块级元素，所谓的块级元素，就是可以通过css设置宽高等一些大小的样式，这样的元素标签称为块级元素。块级元素的特点是自己占一整行。如果再写其它标签，那么其它标签会显示在它的下面。div的宽度默认是整个浏览器的宽度，这个宽度是从body标签继承过来的。

**span：**行内元素，span的前后是不会换行的，它没有结构的意义，纯粹是应用样式。不能通过css设置具体的宽高等样式的标签元素称为行内元素，行内元素的特点是标签内的内容是多大它就是多大，而且不会占一整行。

功能角度：div一般用来做布局；span用来做文字的效果，如标题和链接的效果。

3. iframe标签

iframe只适用于IE浏览器，它的作用是在网页中插入一个框架窗口以显示另一个文件。浮动帧标签，可以将一个HTML文档嵌入在一个HTML中显示，使用iframe标签能够拖入外部文件，能更好地管理内容，并提供一种不同位置包含内容机制。

iframe属性	描述
align	根据周围的文字排列 iframe。
contentDocument	容纳框架的内容的文档。返回 frame/iframe 生成的文档对象。
contentWindow	返回 frame/iframe 生成的 window 对象。
frameBorder	取一个0或1值以判断是否显示框架周围的边框。
height	iframe 的高度。
longDesc	指向包含框架内容描述文档的 URL。
marginHeight	iframe 的顶部和底部的页空白。
marginWidth	frame/iframe 的左侧和右侧的页空白。
name	frame/iframe 的名称。
noResize	框架是否可调整大小。
scrolling	框架是否可拥有滚动条。auto: 根据文档的尺寸自动显示滚动条（默认）; yes: 一直显示; no: 永不显示
src	指定应被加载到框架中的文档的 URL。
width	iframe 的宽度。