6.块元素和行内元素
1. 块元素特点:默认显示在父标签的左上角
块级元素默认占满一行(占满整个文档流)
常见的块元素:p,h1--h6,ul li, ol li,div,hr,table.
2.行内元素(内联元素):大小受到文字区域影响,不受到width,height影响
行内元素不会单独占满一行
常见的行内元素:a,span,img,input .
3.块元素和行内元素转换
块元素----->行内元素 display:inline
行内元素--->块元素 display:block
display:inline-block 具有块元素和行内元素的特点:1.width,height受到影响
2.不会单独占满一行
7.块元素浮动
float:left左浮动,right右浮动
clear:both----清除左右浮动
8.内间距padding 外间距margin
padding:10px 10px 10px 10px---上右下左(撑开10px)
margin: 10px 10px 10px 10px外间距
padding对于行内元素是支持的,margin对于行内元素只支持左和右
9.绝地定位和相对定位
position:absoulte;
1.当设置为绝对定位后,脱离了文档流,不会单独占满一行,不会受到浮动的影响
2.当设置为绝对定位时,元素的方位就受到窗体的top,left,right,bottom的影响。
position: relative;
1.当设置为相对定位时,没有脱离文档流
2.当设置为相对定位时,方位是相对于元素的父标签,由于标签并没有脱离文档流,所以它四周的标签是占着位置的。
position:fixed;-----固定显示在某一处(脱离)。如:top:0px; right:0px;