清除浮动和定位

2018-07-11  本文已影响0人  末版车

clear 属性可以用于清除元素周围的浮动对元素的影响。

也就是元素不会因为上方出现了浮动元素而改变位置。

可选值:

left:忽略左侧浮动

right:忽略右侧浮动

both:忽略全部浮动

none:不忽略浮动,默认值。

定位:

position属性可以控制wed浏览器如何以及在何处显示特定的元素。

可以使用position属性把一个元素放置到网页中的任何位置。

static   relative  absolute   fixed

相对定位:

每个元素在页面中都有一个自然位置。开启相对定位相对于自身原来的位置发生改变,但是不会改变元素的性质。相对定位不会使元素脱离文本流,相对定位会使元素的层级提升,使元素可以覆盖文本流中的元素开启之后可以使用top right  bottom  left 四个属性对元素进行定位。

绝对定位:

绝对定位指的是元素相对于html元素或离他最近的组选定位元素进行定位。

当将position属性设置为absolute时,开启了元素的绝对定位。也可以使用 top right bottom left 四个属性对元素进行定位。

绝对定位会使元素完全脱离文本流。 绝对定位的块元素的宽度会被其他内容撑开。  绝对定位会使行内元素变成快元素。

固定定位:

固定定位的元素会被锁定在屏幕的某个位置上,当访问者滚动网页时,固定元素会在屏幕上保持不定。当position设置为fixed时,开启固定定位。

BFC(隐含地属性)

1 父元素的垂直外边距不会和子元素重叠

2 开启BFC的元素不会被浮动元素所覆盖

3 所开启BFC的元素可以包含浮动的子元素

开启BFC

1 设置元素浮动

2 设置元素的绝对定位

3 设置元素为inline-block

4 设置元素的overflow设置为一个非visible

作业1-1 作业1-2 作业1-3 作业效果图
上一篇 下一篇

猜你喜欢

热点阅读