HTML元素分类
1、HTML标签
- HTML标签指使用尖括号括起来的关键字。
1、 其中不以斜杠(/)开头的标签称为开始标签,以斜杠(/)开头的标签称为结束标签——双标签<p>内容</p>
2、有些标签本身既是开始标签也是结束标签——单标签<br/>
2、HTML元素
- 指从开始标签(start tag)到结束标签(end tag)的所有代码。
- 构成HTML元素的标签自身既是开始标签也是结束标签,则这样的HTML元素又称为空元素。否则称为非空元素;
3、块级和行内元素
根据是否自动换行
块级元素:(block element)
table、p、ol、ul、li、form、div、hr、hn(h1、h2、h3、h4、h5、h6)等元素,其特点为:块级元素自动换行且宽度默认情况下占满整个父元素行内元素(inline element)又称为内联元素、内嵌元素、直进式元素
i、b、del、a、img、span, input、select、textarea、label 等元素,其特点为:行内元素不会自动换行,相邻行内元素可以排在同一行。
行级元素转换为块级元素为了换行或使用块级元素才有的CSS样式
常用CSS样式属性
1、display
- 设置元素生成的框的类型。
- div标签display标签属性值不能为inline
<a style="display: block;">内容</a>
注意:当框的属性为block时,此元素前后带有**换行符**。
2、position属性
用于定义建立元素布局所用的定位类型。
–文档流又称正常流,是默认情况下HTML元素排版布局过程中元素会自动按照自上而下或从左往右进行流式排放的一种顺序。relative
:在使用相对定位时,无论是否进行移动,元素仍然保持其未定位前的形状,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。fixed
:元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。absolute
:设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。绝对定位使元素的位置与文档流无关,因此不占据空间。
1、任何元素都可以定位,但absolute或fixed元素会生成一个块级框,不论该元素本身是不是块级框。relative元素会相对于它在正常流中的默认位置偏移。
2、当一个标签使用了position CSS样式属性,如果其样式属性值为非static(不考虑inherit)则该标签将脱离正常文档流,如果又没有指定 “left”, “top”, “right” 以及 “bottom” 样式属性的属性值,则该标签只待在原来位置,但已经脱离正常文档流。
h2{
position:absolute;
left:100px;
top:150px;
}
3、left和right样式属性
1、left 属性规定元素的左边缘,该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移;
2、right 属性规定元素的右边缘,该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
- 注意:
a、如果不使用”position”属性或者”position”属性的值为”static”,那么设置”left”属性和”right” 属性不会产生任何效果。
b、对于static元素,为auto;对于长度值,则为相应的绝对长度;对于百分比数值,为指定值;否则为auto。对于相对定义元素,left 的计算值始终等于right。
4、z—index和width、height
设置元素的堆叠顺序。拥有更高堆叠顺序的标签总是会处于堆叠顺序较低的标签的上面。
a、z-index 样式属性的属性值可以是负值
b、z-index 仅能在定位标签上奏效(例如 position:absolute;);
c、IE浏览器不支持”inherit”属性值 。width和height属性:分别用于设置元素内容区的宽度和高度。(单位:px)
<html>
<head>
<style type="text/css">
img{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="/i/eg_smile.gif" />
<p>由于图像的 z-index 是 -1,因此它在文本的后面出现。</p>
</body>
</html>
5、margin属性
- 用于在一个声明中设置所有外边距的宽度,或者设置各边上外边距的宽度。**( 单位:px或cm)
margin—left,margin—right,margin—top,margin—bottom
注意:块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距;行内元素的的左右外边距不会合并;浮动元素的外边距也不会合并;允许使用负值,不过要谨慎使用;
外边距合并:当两个垂直(非水平)外边距相遇时,合并后的外边距高度等于两个外边距高度中的较大者。
p{
margin:2cm 4cm 3cm 4cm;
}
- margin的缩写
- margin:0 auto;——标签居中显示
6、padding
- 在一个声明中设置元素所有内边距的宽度,或者设置各边上内边距的宽度。
padding—left,padding—right,padding—top,padding—bottom
- 行内非替换元素上设置的内边距不会影响行高计算,因此如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠;元素的背景会延伸穿过内边距;不允许使用负值。
padding:10px 5px 15px 20px;//按顺时针方向
//上内边距是 10px
//右内边距是 5px
//下内边距是 15px
//左内边距是 20px
- padding的缩写
7、float属性
设置元素浮动方向。
注意:
- 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
- 以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动;浮动元素会生成一个块级框,而不论它本身是何种元素;如果浮动非替换元素,则要指定一个明确的宽度,否则它们会尽可能地窄;假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
8、clear属性和 :after清除浮动
- 用于设置元素的哪个边上不允许出现浮动元素。
<div>
<p style="float: left;">数学</p>
<p style="float: right;">语文</p>
<div style="clear: both;"></div>
<!--结束浮动,免得的后面的标签受影响-->
</div>
- :after清除浮动
:after伪元素和:before伪元素分别用于在元素之后和之前添加内容,实际网页开发过程中:after伪元素比较常用,借助:after伪元素一般用于清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:after清除浮动</title>
<style>
.out {
width:200px;
border: 5px solid red;
}
.out:after{
content: '';使得定义的边框内容为0
display: block;//使得其为块级元素
clear: left;//清除浮动
//上面三行起主要作用
width: 0px;
height: 0px;
}
.in {
width: 100px;
height: 100px;
float:left;
}
</style>
</head>
<body>
<div class="out">
<div class="in" style="background-color: blue;"></div>
<div class="in" style="background-color: green;"></div>
</div>
</body>
</html>
Box模型
为了方便HTML元素布局,每个HTML元素都包含在一个盒子里,这些矩形的盒子嵌套或者并列在一起形成了页面。
一个盒子模型从内到外分内容区(content)或元素(element)、内边距(padding)、边框(border)和外边距(margin)4部分,如下图:
- 内容区:内容区又称元素,用于包含其他HTML元素,相当于生活中盒子内的物品
- 内边距:内容区和边框之间的空间,相当于生活中盒子的防震泡沫
- 边框:边框用于标识盒子的边界,介于内边距和外边距之间, 相当于生活中盒子的“壁”
- 外边距:外边距位于边框外部,用于设定边框与周围其它元素之间的空间, 相当于生活中盒子与其他盒子之间的间距
- 盒子模型是一个三维的立体模型,
- 从上往下看,它表示的层次关系依次如下:
第一层:边框(border)
第二层:元素内容(content)、内边距(padding)
第三层:背景图(background-image)
第四层:背景色(background-color)
第五层:整个盒子的外边距(margin)