css消逝浮动的法规

2020-01-26 作者:网站首页   |   浏览(133)

时间: 2019-06-02阅读: 211标签: 浮动

时间: 2019-09-17阅读: 174标签: 定位一、什么是定位

最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解,如果你已经很了解什么是浮动和浮动的效果,你可以直接跳转到三.如何清除浮动(重点)阅读

改变元素在页面中的位置

一.什么是浮动首先我们需要知道定位元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位方式

二、定位的分类

1、普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素:按照从上到下的方式逐个排列 页面中的行内元素:按照从左到右的方式逐个排列 但是如何让多个块级元素在一行内显示? 这里就引出了浮动定位

1、普通流定位

2、浮动定位 float float属性 取值为 left/right

2、浮动定位

这个属性原本不是用来布局的,而是用来做文字环绕的,但是后来人们发现做布局也不错,就一直这么用了,甚至有些时候都忘了用他做文字环绕

3、相对定位

3、相对定位 relative 元素会相对于它原来的位置偏移某个距离,改变元素位置后,元素原本的空间依然会被保留 属性:position 取值:relative 配合着 偏移属性(top/right/bottom/left)实现位置的改变

4、绝对定位

4、绝对定位 absolute如果元素被设置为绝对定位的话,将具备以下几个特征 1、脱离文档流-不占据页面空间 2、通过偏移属性固定元素位置 3、相对于 最近的已定位的祖先元素实现位置固定 4、如果没有已定位祖先元素,那么就相对于最初的包含块(body,html)去实现位置的固定 属性:position 取值:absolute 配合着 偏移属性(top/right/bottom/left)实现位置的固定

5、固定定位

5、固定定位 fixed 将元素固定在页面的某个位置处,不会随着滚动条而发生位置移动 属性:position 取值:fixed 配合着 偏移属性(top/right/bottom/left)实现位置的固定

三、普通流定位

二.浮动的效果浮动 之后会怎么样? 1、浮动定位元素会被排除在文档流之外-脱离文档流(不占据页面空间),其余的元素要上前补位 2、浮动元素会停靠在父元素的左边或右边,或停靠在其他已浮动元素的边缘上(元素只能在当前所在行浮动) 3、浮动元素依然位于父元素之内 4、浮动元素处理的问题-解决多个块级元素在一行内显示的问题注意 1、一行内,显示不下所有的已浮动元素时,最后一个将换行 2、元素一旦浮动起来之后,那么宽度将变成自适应(宽度由内容决定) 3、元素一旦浮动起来之后,那么就将变成块级元素,尤其对行内元素,影响最大 块级元素:允许修改尺寸 行内元素:不允许修改尺寸4、文本,行内元素,行内块元素时采用环绕的方式来排列的,是不会被浮动元素压在底下的,会巧妙的避开浮动元素 浮动 之后会有什么样的影响? 由于浮动元素会脱离文档流,所以导致不占据页面空间,所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素,那么该元素高度将变成0(高度塌陷)

页面中元素的默认定位方式,默认文档流,从上往下,从左往右

三.如何清除浮动(重点)解决方案 及 原理分析

1、每个元素都在页面有自己的空间

网上有很多种方法,我这里只介绍一种非常好用的方法,设置class名为clearfix

2、每个元素都是从父元素的左上角开始显示

原理:如果子元素全部浮动,父元素就会塌陷,所以在所有浮动子元素后添加一个没有浮动元素把父元素撑起来,这个元素找不到、不占据空间,不能让它里面有内容,有内容也要隐藏

3、块级元素都是按照从上到下的方式逐行排列,每个元素独占一行

.clearfix:after{content:‘.‘;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}.clearfix:after{zoom:1;}/*解决IE的问题*///visibility:hidden;隐藏元素,但是位置留着//display:none;隐藏元素,不占据空间,彻底隐藏//after:伪对象选择符

4、行内元素是多个元素在一行显示,从左往右逐个排列

四、浮动定位

1、当元素设置浮动后,该元素脱离默认文档流,后面的元素会上前补位。当前元素会在当前行,向左或者向右排列

float:left、right、none

特点:

(1)、元素一旦浮动,就脱离文档流了,不占据页面空间,后面会上前补位

(2)、浮动元素会停靠在父元素的左边/右边,或者其他已经浮动元素边缘

(3)、浮动就是解决多个块级元素在一行显示的问题

2、浮动引发的特殊情况

a、(1)当父元素显示不下所有已浮动元素的时候,显示不下的几个将换行显示,换行显示的规则:优先上浮,之后向左/右对齐

(2)浮动元素占位,浮动元素会根据浮动方向,占据方向上的位置,不让其他后面浮动元素占用

b、元素一旦浮动,如果没有定义宽度,宽度会以内容为准

c、元素一旦浮动起来,就变成了块级元素,可以设置宽高,可以设置上下外边距

d、文本,行内元素,行内块元素是不会被浮动元素压在下方。而是巧妙的避开了所有浮动元素,围绕者浮动元素显示

e、清除浮动:元素一旦浮动起来会对后续元素带来一定影响(后续元素会上前补位),如果后续元素不想上前补位,那么给后续元素设置clear,清除前面浮动元素带来的影响

clear:left/right/both

f、高度坍塌,块级元素的高度如果不设置,高度以内部元素内容为准,但是如果内部元素都是浮动元素,浮动元素不占据页面空间,父元素的高没有了

解决方案:

1、直接为父元素设置高度,弊端:不知到父元素高度

2、父元素也浮动,弊端:浮动会影响后续元素

3、overflow:hidden,弊端:当元素真的需要显示溢出内容时,就显示不出来了

4、在父元素中追加一个空的块级元素,并设置clear:both

3、显示

1、显示方式

display

元素在页面中的显示表现形式(块级,行内,行内块)

取值:

(1)none:隐藏,不显示元素,不占据位置

(2)block:让元素的表现形式和块级元素一样,特点:独占一行,可以设置宽高,垂直外边距

(3)inline:让元素和行内元素一样,特点:多个元素公用一行,不能设置宽高和垂直外边距

(4)inline-block:让元素的表现形式和行内块一样,特点:多个元素在一行中显示,但是可以设置宽高和垂直外边距

(5)table:让元素的表现形式和table一样,特点:尺寸以内容为准,每个元素独占一行,允许修改尺寸

2、显示效果

visibility

取值

visible:默认可见

hidden:隐藏

display:none和visibility:hidden的区别 :display隐藏,脱离文档流,不占据页面空间,visibility不脱离文档流,占据页面空间

3、透明度

opacity

取值:0~1 越小越透明

opacity和rgba的区别:opacity作用于元素,只要跟元素相关的颜色都会跟着透明,可以作用到子元素,rgba只改变当前元素的透明度,不会影响其他元素

4、垂直对齐方式

vertical-align

取值:top/middle/bottom

使用场合:

(1)table标签中,控制文字的垂直对齐,取值:top/middle/bottom

(2)img标签,控制图片与前后文字的垂直对齐方式,取值:top/middle/bottom/baseline

5、光标

cursor:

取值:

(1)default:箭头

(2)pointer:手

(3)text:I

(4)crosshair:十字

(5)wait:沙漏或者转圈

(6)help:问号

五、定位

1、定位的属性

position:

取值:

(1)static: 默认值,静态,默认文档流

(2)relative:相对定位

(3)absolute:绝对定位

(4)fixed:固定定位

元素的position设置为relative/absolute/fixed中任意一个值,该元素被称为已定位元素

偏移属性

top/bottom/right/left

left:100px 向由移100px

2、相对定位

元素相对于原来的位置偏移某个距离,没有脱离默认文档流,页面上的位置不会被其他元素补位

语法:position:relative;必须配合偏移属性使用

使用场合:作为绝对定位的祖先元素

(1)位置微调

3、绝对定位

绝对定位的元素会脱离默认文档流,后面元素会向前补位,绝对定位的元素会相对于离他最近的已定位的祖先元素去实现定位,如果所有祖先元素不是已经定位元素,相对于body去实现定位

属性:position:absolute;配合偏移属性使用

使用场合:有层叠效果时

4、固定定位

将元素固定在页面的某一个位置,元素不会随滚动条发生位置变化,一直固定在可是区域内

语法:

position:fixes;配合偏移属性使用

注意:

(1)固定定位脱离文档流,不占页面空间

(2)固定定位元素变为块级元素

(3)相对于body实现位置的偏移

堆叠顺序

元素变为已定位元素,有可能出现堆叠,想修改堆叠顺序

z-index

取值:无单位的数字,数字越大,元素越靠上显示,父子元素间z-index无效,永远都是子元素在父元素上面,只有已定位元素才能使用z-index

本文由yzc216亚洲城发布于网站首页,转载请注明出处:css消逝浮动的法规

关键词: yzc216亚洲城