1.块级元素
1.1 常用的块级元素
div p h1~h6 ul ol li hr table
1.2 块级元素的特点
1.2.1 块级元素默认显示在父标签的左上角。
1.2.2 块级元素默认沾满一行(沾满整个文档流)
1.2.3 块级元素可以变为行内元素
display:inline;/*变为行内元素*/
1.2.4 块级元素可以通过下面属性,同时拥有行内元素和块级元素的特点(width、height受到影响,不会单独占满一行)
display:inline-block;/*同时具有块级元素和行内元素的特点*/
2.行内元素(内联元素)
2.1 常用的行内元素有哪些
<a></a> <span></span> <img /> <input />
2.2 行内元素的特点
2.1 行内元素影响的范围是文字区域大小,不受到width,height影响。
2.2 行内元素不会单独占满一行(不会占满文档流)
2.3 行内元素可以变为块级元素
display:block
3.浮动(float)
3.1 float使得当前块级元素脱离文档流,通过left、right属性来控制此元素的漂浮方向
3.2 清除浮动(清除对当前元素的影响)
clear:both/*清除左右浮动*/ clear:left/*清除左浮动*/ clear:right/*清除右浮动*/
4.内间距、外边距(padding、margin)
4.1 padding的属性
padding:10px; /*上下左右都为10px*/ padding:10px 20px /*上下10px 左右为20px*/ padding:10px 20px 30px/*上10px 左右为20px 下30px*/ padding:10px 20px 30px 40px/*上右下左*/ /*单一使用时,可单独操作4个方向*/ padding-left padding-top padding-right padding-bottom
4.2 margin的属性与padding相同,都支持对于块级元素,但是margin对于行内元素只支持左右的外边距,不支持上下的外边距。
5.三种定位方式(relative、absolute、fixed)
5.1、绝对定位(absolute)
5.1.1 设置为绝对定位时候,会脱离文档流,不会单独占满一行,不会受到浮动的影响。
5.1.2 当设置为绝对定位的时候,元素的方位就会受到窗体的top、left、bottom、right的影响
5.2、相对定位(relative)
5.2.1当设置为相对定位的时候,并没有脱离文档流,此时浮动是会对他产生影响的。
5.2.2当设置为相对定位的时候,元素的方位是相对于元素的父标签,由于标签并没有脱离文档流,所以它四周的标签是占着位置的。
5.3、固定定位(fixed)
在给定的位置不动。