2015-09-22 css2

时间:2022-12-28 19:04:12

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;