1、块级元素
A:特点:
A.1默认显示在父标签的左上角
A.2块级元素默认占满一行(占满整个文档流)
B:常见的块级元素
P h1--h6 ul li ol li div hr table
2、行内元素(内联元素)
A:常见的=行内元素有
a span img input
B:行内元素的特点
B.1 大小受到文字区域影响,不受width height 影响
B.2 行内元素不会单独占满一行
3、 行内元素和块级元素相互转换
A: 行内元素转换成块级元素 display:block;
B: 块级元素转换成行内元素 display:inline;
4、padding
A: padding 是内边距,结果是撑开外框相应的宽度
A.1 padding 10px 20px 30px 40px ; 表示撑开的顺序是 上10 右20 下30 左40
A.2 padding 10px 20px 30px ; 表示撑开的顺序是 上10 左右20 下30
A.3 padding 10PX 20PX ; 表示撑开的顺序是 上下10 左右20
A.4 padding 10PX ; 表示撑开的是四周各10
5、margin
A: margin 是外边框的距离,
6、在边框大小固定之后增加了 Padding ,而后又改变原来边框大小时,则是对于DIV right 和 bottom 操作,改变的是右边和下边的距离。
7、padding的各种情况,行内元素是支持的,margin行内元素只支持左右,不支持上和下。
8、定位(绝对定位、相对定位)
A:绝对定位 position:absolute
A.1 当位置设置为绝对定位之后,脱离文档流,不会单独占满一行,不受float 影响
A.2 当设置为绝对定位后,元素的方位收到窗体的top left right bottom 影响。
B: 相对定位 positon:relative
B.1 当设置为相对定位时候没有脱离文档流,float 对其有影响
B.2 当设置为相对定位时候,方位是相对于元素父标签;由于标签没有脱离文档流所以它是占着位置
C:固定 positon:fixed
C.1 设置固定之后,DIV 不受float影响,会固定在设定的位置不变
#d1 /*这个DIV则紧紧贴在右下角*/ { width:200px; height:200px; border:1px #808080 solid; position:fixed;
right:0px;
bottom:0px; }