浮动与定位

1、元素的浮动属性float的

基本的格式

选择器{float:属性值;}

一般他的值包过3个在内

属性值                    描述

left                       元素会向左浮动

right                      向右

none                    不浮动

2、清除浮动

clear的属性

选择器{clear:属性值;}

属性值                   描述

left                     不允许左侧有浮动元素(清除左侧浮动的影响)

right                   不允许右侧有浮动元素(清除右侧浮动的影响)

both                   同时清除的左右两侧的浮动的影响

3、使用after伪对象清除的浮动

使用after为对象也可以清除浮动,但是该方法只是适用于ie8浏览器以上的,使用after的为对象,需要注意两点

(1)必须为需要清除浮动的元素为对象设置“height:0”样式否则该元素会比其实实际高度高出若干像素

(2)必须在为对象中设置content属性,属性值可以为空,如"content:“”"

4、overflow的属性

当盒子的大小超过自身的大小是,内容就会溢出,这时如果想要规范溢出内容的,显示方式,就需要使用css中的overflow属性。

基本的语法格式如下

选择器{overflow:属性值;}

常用的属性的值

属性值                     描述

visible                  内容不会被修剪,会出现在元素之外的(默认值)

hidden                溢出内容会被修剪,并且被修剪的内容是不可见的

auto                    在需要时产生滚动条,级自适应所要显示的内容

scroll                  溢出内容会被修剪,且浏览器会始终显示滚动条

5、元素定位的属性

(1)定位模式

在css中,position属性时用于定义元素的定位模式,基本的语法格式如下

选择器{position:属性值;}

值                              描述

static                     自动定位

relative                 相对定位,相对于其原文档流的位置进行定位

absolute               绝对定位相对其上一个已经定位的父元素进行定位

fixed                      固定定位,相对于浏览器窗口进行的定位。

(2)边偏移的量

定位模式仅仅用于定义元素以哪种方式的定位,并不能确定元素的具体,通过边偏移的属性,top、bottom、left、right,来精确定义定位元素的位置,取值为不同的单位数值或百分比,

边偏移的属性                          描述

top                          顶端偏移量,定义元素相对于其父元素,上边线的距离

bottom                 底部偏移量,定义元素相对父的,下

left                        左                                        左

right                      右                            右

(3)静态的定位                   当position属性的取值为static的时候             可以将元素定位于静态位置。

(4)相对定位                     

当position属性的取值为relative时,可以成为相对定位。

(5)绝对定位

当position属性的取值为absolute时,可以成为相对定位。

(6)固定定位

当position属性的取值为fixed时,可以成为相对定位。

猜你喜欢

转载自blog.csdn.net/shisjieshoufu/article/details/81099547