搜索
您的当前位置:首页正文

有关CSS浮动和定位定义和用法介绍

2023-11-29 来源:莱芜美食

一、浮动1.浮动元素

1.对于浮动元素,有几点需要记住: 首先,会以某种方式将浮动元素从文档的正常流中删除,不过他还是会影响布局; 2.采取css的特有方式,浮动元素几乎“集自成一派”,不过他们还是对文档的其余部分有影响; 3.当一个元素浮动时,其他元素会“环绕”该元素。浮动元素周围的外边距不会合并。 4.不浮动:float:none用于防止元素浮动。

2.浮动的详细内幕

在详细了解浮动的内容之前,首先我们要知道什么是包含块。 浮动元素的包含块时是其最近的块级祖先元素。 css提供了一系列的规则来控制浮动元素的摆放:

  • 浮动元素的左(或右)外边界不能超出其包含块的左(或右)内边界;

  • 浮动元素的左(或右)外边界必须是源文档中之前出现的左浮动(或右浮动)元素的右(或左)外边界,除非后出现浮动元素的顶端在先出现浮动元素的底端下面。

  • 左浮动元素的右外边界不会在其右边右浮动元素的做外边界的右边。

  • 一个浮动元素的顶端不能比其父元素的内顶端更高;

  • 浮动元素的顶端不能比之前所有的浮动元素或块级元素的顶端更高。

  • 如果源文档中一个浮动元素之前出现另一个元素,浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高

  • 左(或右)浮动元素的左边(右边)有另一个浮动元素,前者的右外边界不能在其包含块的右(左)边界的右边(左边)

  • 浮动元素必须尽可能高的放置

  • 左浮动元素必须向左进尽可能远,右浮动元素则必须向右尽可能远。

  • 3.实用行为

    首先,我们来看一下浮动元素比其父元素高时会有什么结果。 css2.1澄清了浮动元素行为的一个方面:浮动元素会延伸,从而包含其所有后代浮动元素。所以,通过将父元素置为浮动元素,就可以把浮动元素包含在其父元素内。

    4.负外边距

    负外边距可能导致浮动元素移到其父元素的外面。通过设置负外边距,元素可能看上去比其父元素更宽,同样的道理,浮动元素也可能超过其父元素。 看上去,这个规则好像是和前面的相矛盾(浮动元素放在其父元素之外了); 但是仔细研究一下上一节的规则就可以发现,这个在技术上其实是允许的,一个浮动元素的外边界必须在父元素内,不过由于外边距为负,放置浮动元素的内容时就好像覆盖了自己的外边界一样。

    5.浮动元素、内容和重叠

    还有一个有趣的问题,如果一个浮动元素与正常流中的内容发生重叠会怎么样? css2.1指定以下规则:

  • 行内框与一个浮动元素重叠时,其边框,背景和内容都在浮动元素“之上”显示。

  • 块框与一个浮动元素重叠时,其边框和背景在该浮动元素“之下”显示,而内容在浮动元素“之上”显示。

  • 6.清除

    有时候,我们可能并不总是希望内容流过浮动元素,某些情况下,可能要特意避免这种行为。例如: 为了确保所有的h3元素不会放在左浮动元素的右边,可以设置h3{clear:left;}。这可以理解为“确保一个h3的左边没有浮动图像”;

    二、定位1.基本概念

    利用定位,可以准确的定义元素框相对于其正常位置应该出现在哪里,或者相对于父元素、另一个元素设置浏览器窗口本身的位置。

    2.定位的类型
  • static(初始值): 元素框正常生成,块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

  • relative: 元素框偏移某个距离。元素仍保持其未定位前的形状,他原本所占的空间仍保留。

  • absolute: 元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中的所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来他在正常流中生成何种类型的框。

  • fixed: 元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身。

  • 3.包含块

    对于浮动元素,其包含块的定义为最近的块级祖先元素。 对于定位,情况则比较复杂: - “根元素”的包含块(也称初始包含块)由用户代理建立,在HTML中,根元素就是html元素,不过有些浏览器会使用body作为根元素。 - 对于一个非根元素,如果其position值是relative或static,包含块则由最近的块级框、表单元格或行内块祖先框的内容边界过程。 - 对于一个非根元素,如果其position值是absolute,包含块设置为最近的position值不是static的祖先元素。

    4.偏移属性

    上面我们介绍了三种定位机制使用了四种属性来描述定位元素各边相对于其包含块的偏移。我们将这四个属性成为偏移属性,这对于完成定位是很重要的一部分。 - 对于top和bottom,相对于包含块的高度 - 对于right和left,相对于包含块的宽度 这些属性描述了距离包含块最近边的偏移,所以又得名offset。

    5.宽度和高度设置宽度和高度

    如果想为定位元素指定一个特定的宽度,显然要用width属性,类似的,利用height,也可以为定位元素声明特定的高度。

    限制宽度和高度

    可以使用min-width和min-height,为元素的内容区定义一个最小尺寸。 类似的,还可以使用属性max-width和max-height来限制元素的尺寸。

    6.内容溢出和剪裁溢出

    假设由于某种原因,一个元素固定为某个特定大小,但内容在元素中放不下,此时就可以利用overflow属性控制这种情况; - visible: 默认值,表明元素的内容在元素框之外也能看见。一般的,这会导致内容超出其自己的元素框,但不会改变框的形状。 - hidden: 元素的内容会在元素框的边界处裁剪,不会提供滚动接口使用户访问超出剪裁区域的内容; - scroll: 元素的内容会在元素框的边界处裁剪,但是会提供一个滚动机制供用户使用。

    7.内容剪裁

    如果一个绝对定位元素的内容溢出其内容框,而且overflow设置为要求裁剪该内容,通过使用属性clip可以改变剪裁区域的形状。 clip:rect(top,right,bottom,left);

    8.元素可见性

    除了剪裁和溢出,还可以控制整个元素的可见性。 visibility: - visible 可见的 - hidden 不可见的。 - collapse - inherit visibility:collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 “hidden”。 visibility:hidden 当元素通过设置visibility处于“不可见”状态时,元素还是会影响文档的布局,就好像他还是可见一样。换句话说,元素还在那里,只是你看不见它。这与display:none有区别,后者不仅不可见。还会从文档中删除,所以对文档布局没有影响。

    9.绝对定位包含块与绝对定位元素

    元素绝对定位时,会从文档流中完全删除。然后相对于其包含块定位。这说明,绝对定位的元素可能覆盖其他元素,或者被其他元素覆盖。 绝对定位元素的包含块是最近的position值不为static的祖先元素,创作人员通常会选择一个元素作为绝对定位元素的包含块,将其position指定为relative而且没有偏移。

    自动边偏移

    元素的静态位置一词的大致含义是:元素在正常流中原本的位置。更确切的讲,“顶端”静态位置是从包含块的上边界到假想框的上外边距边界之间的距离。

    10、非替换元素的放置和大小

    一般地,元素的大小和位置取决于其包含块。各个属性的值也会有一些影响,不过最主要的还是其包含块。

    11.替换元素的放置与大小

    非替换元素和替换元素的定位规则大不相同。这是因为替换元素有固有的高度和宽度,因此其大小不会改变。 确定替换元素位置和大小时,所涉及的行为用以下规则描述最为容易: - 如果width设置为auto,width的实际使用值由元素内容的固有宽度决定。 - 在从左向右读的语言中,如果left的值为auto,要把auto替换为静态位置。从右向左同理; - 如果left或right仍为auto,则将margin-left或margin-right的auto值替换为0; - 如果此时margin-left和margin-right都还定义为auto,则将他们设置为相等的值,从而将元素在其包含块中居中; - 在此之后,如果只剩下一个auto值,则将其修改为等于等式的余下部分。

    12、Z轴上的放置

    通过属性z-index进行控制

    13、固定定位

    固定定位和绝对定位很类似,只不过固定元素的包含块是视窗。固定定位时,元素会完全从文档流中去除,不会有相对于文档中任何部分的位置。

    14、相对定位

    理解起来最简单的定位机制就是相对定位。采取这种机制时,将通过使用偏移属性移动定位元素。

    小编还为您整理了以下内容,可能对您也有帮助:

    CSS布局浮动(float)和定位(position)属性的区别和如何使用

    今天看到有朋友留言问浮动和定位有什么区别,如何使用?今天找了篇文章,讲的比较通俗易懂,供大家参考postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。float:right/left是子块级元素流集合面向父级元素的定位,定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染,可以重叠,原位置被清空。二者之中最大的差别就是位置保留。人们也就利用这种差异,可以做出CSS代码的滑动门菜单。hover时取当前元素为保留位置,定义一个relative时,没有hover时使用float清空保留位置。比较示例中的3个样式表,就可以发现:<!--<style> *{border:1px solid #eee;} body{ border-color:#09f; } ul{list-style:none;width:800px;height:600px;margin:0 auto;padding:10px;} li{float:left;} #li1{width:200px;height:200px;border-color:red;} #li2{width:200px;height:150px;border-color:green;margin-left:-20px;} #li3{width:200px;height:100px;border-color:blue;margin-left:-20px;} </style>--> <!--<style> *{border:1px solid #eee;} body{ border-color:#09f; } ul{list-style:none;width:800px;height:600px;margin:0 auto;} li{position:relative;} #li1{width:200px;height:200px;border-color:red;top:10px;} #li2{width:200px;height:150px;border-color:green;top:-192px;left:180px;} #li3{width:200px;height:100px;border-color:blue;top:-344px;left:360px;} </style>--> <style> *{border:1px solid #eee;} body{ border-color:#09f; } #ul{list-style:none;width:800px;height:600px;margin:0 auto;padding:20px;} #li1{width:200px;height:200px;border-color:red;position:relative;} #li2{width:200px;height:150px;border-color:green;float:left;margin-left:-20px;margin-top:-202px;} #li3{width:200px;height:100px;border-color:blue;float:left;margin-left:20px;margin-top:-202px;} </style> <ul id=#id> <li id=li1>li1</li> <li id=li2>li2</li> <li id=li3>li3</li> </ul> 提示:可以先修改部分代码后再运行 (如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、、贴吧等,记得带网址哟,不胜感激!) 〖DIV+CSS教程〗Tags:floatposition浮动绝对定位相对定位

    css 的浮动机制怎么样?

    CSS 的浮动机制是一种布局方式,它可以让元素向左或向右浮动,从而使它们脱离标准流,不占位置。浮动元素会尽可能靠近容器的左侧或右侧,但是如果两个浮动元素相邻,它们之间会有一个空间。如果有多个浮动元素,它们会尽可能地向左或向右排列,直到遇到一个块级元素或者另一个浮动元素。

    浮动元素的定位是通过浮动锚点和浮动参考来实现的。浮动锚点是浮动元素所在的“流”中的一个点,这个点本身并不浮动,就表现而言更像一个没有 margin、border 和 padding 的空的内联元素。而浮动参考则指的是浮动元素对齐参考的实体。

    CSS布局浮动和定位属性的区别?

    本文针对CSS浮动float、定位position进行学习理解,通过实例帮助大家掌握CSS浮动float、定位position技巧,感兴趣的小伙伴们可以参考一下

    一 . 浮动float

    I . 定义及规则

    float默认为none,对应标准流的情况。当float : left;时,元素就会向其父元素的左侧靠紧,脱离标准流,同时宽度不再伸展至充满父容器,而是根据自身内容来确定。

    II . 演示规则

    准备代码

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> body { margin: 0; padding: 0; } #father { background-color: cyan; /*父级p 没有定位 造成子p的margin-top传递给父级*/ position: absolute; } #father * { margin: 10px; padding: 10px; border: 1px dashed red; } #son1 { } #son2 { } #son3 { } </style> </head> <body> <p id="father"> <p id="son1">#son1</p> <p id="son2">#son2</p> <p id="son3">#son3-son3son3son3</p> <p> 这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字 </p> </p> </body> </html>

    1、中间给#father加上position:absolute,是为了消除未定位父p的margin-top传递问题,相关内容如下

    嵌套p中margin-top转移问题的解决办法

    在这两个浏览器中,有两个嵌套关系的p,如果外层p的父元素padding值为0,那么内层p的margin-top或者margin-bottom的值会“转移”给外层p。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <p style="background-color:#FF0000;width:300px; height:100px">上部层</p> <p style="background-color:#009900; width:300px; height:300px;overflow:hidden "> <!--父层--> <p style="margin:50px; background-color:#000000;width:200px; height:200px"">子层</p> </p> </body> </html>

    原因:盒子没有获得 haslayout 造成 margin-top无效

    解决办法:
    1、在父层p加上:overflow:hidden;
    2、把margin-top外边距改成padding-top内边距 ;
    3、父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。
    父层p加: padding-top: 1px;
    4、让父元素生成一个 block formating context,以下属性可以实现
    * float: left/right
    * position: absolute
    * display: inline-block/table-cell(或其他 table 类型)
    * overflow: hidden/auto
    父层p加:position: absolute;

    显示效果为

    2、1,2的float分别为left right时,有

    可见1,2脱离标准流,标准流中的son3当他们不存在,于是son3代替原来son1的位置,而son1的左border、son2的右border与son3的左右border重合

    3、当1,2,3全都float left时

    文字围绕着float过的p

    4、1,2左浮动,3右浮动,当窗口宽度减小时,3会被挤下来

    当3左浮动,2右浮动的时候,显示为

    当浏览器窗口宽度减小时,猜猜谁会被挤下来,son2么?

    答案还是son3,规则为 : 写在html文件中后面的会被挤下来,在html文件中,son3在son2后面,因此总是son3先挤下来。

    5、增加son1高度,son3挤下来时会卡在那里

    6、删除盒子中的文字,3个子p全部左浮动
    显示为

    父p中的三个子p全部脱离标准流了,父p就缩成一条线了,可以用clear来修正
    加一个margin-padding-border全为0,clear为both的空p,来撑大父p

    III . clear清除浮动
    如果前面有float:left的元素,他会影响下面元素,如上例中的p,在p元素中写clear : left即可消除前面左浮动元素对本元素的影响.同理clear:both是左右都清除.

    二 . 定位position

    position取值有static absolute relative fixed

    1. static
    这个是默认的,即标准流排下来,就是static定位方式.

    2. fixed
    在浏览器窗口中固定,什么论坛中的[回到顶部]这种按钮就是fixed做的
    练习做个回到顶部玩玩

    <p id="backToTop"> 回到顶部 </p> #backToTop { width: 100px; height: 50px; background-color: red; color: white; cursor: pointer; border-radius: 25px 0 0 25px; padding-left: 20px; text-align: center; line-height: 50px; position: fixed; bottombottom: 80px; rightright: 0; }

    显示效果

    3. relative相对定位

    相对于自己的偏移,而且不脱离标准流,使用top/bottom left/right指定偏移量

    4. absolute绝对定位

    根据别的已定位元素进行定位,应用absolute规则的脱离标准流

    1)、这个别的元素:
    离它最近的已定位的祖先元素 或者 浏览器窗口,当找不到前面的祖先元素时,就以后者浏览器窗口来定位.
    2)、已经定位 : 是指position已经设置,而且不是static...即position值不为static就是已经定位的元素,未设置position或设置为static认为它没有定位.
    Trick

    只设置 position : absolute,而不设置top/bottom/left/right值,那么元素会保持在原地,但是已经脱离标准流.

    三 . display

    display取值有inline block none

    设置为none,即可将其隐藏,像inline-block等新添加的

    CSS布局浮动和定位属性的区别?

    本文针对CSS浮动float、定位position进行学习理解,通过实例帮助大家掌握CSS浮动float、定位position技巧,感兴趣的小伙伴们可以参考一下

    一 . 浮动float

    I . 定义及规则

    float默认为none,对应标准流的情况。当float : left;时,元素就会向其父元素的左侧靠紧,脱离标准流,同时宽度不再伸展至充满父容器,而是根据自身内容来确定。

    II . 演示规则

    准备代码

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> body { margin: 0; padding: 0; } #father { background-color: cyan; /*父级p 没有定位 造成子p的margin-top传递给父级*/ position: absolute; } #father * { margin: 10px; padding: 10px; border: 1px dashed red; } #son1 { } #son2 { } #son3 { } </style> </head> <body> <p id="father"> <p id="son1">#son1</p> <p id="son2">#son2</p> <p id="son3">#son3-son3son3son3</p> <p> 这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字 </p> </p> </body> </html>

    1、中间给#father加上position:absolute,是为了消除未定位父p的margin-top传递问题,相关内容如下

    嵌套p中margin-top转移问题的解决办法

    在这两个浏览器中,有两个嵌套关系的p,如果外层p的父元素padding值为0,那么内层p的margin-top或者margin-bottom的值会“转移”给外层p。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <p style="background-color:#FF0000;width:300px; height:100px">上部层</p> <p style="background-color:#009900; width:300px; height:300px;overflow:hidden "> <!--父层--> <p style="margin:50px; background-color:#000000;width:200px; height:200px"">子层</p> </p> </body> </html>

    原因:盒子没有获得 haslayout 造成 margin-top无效

    解决办法:
    1、在父层p加上:overflow:hidden;
    2、把margin-top外边距改成padding-top内边距 ;
    3、父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。
    父层p加: padding-top: 1px;
    4、让父元素生成一个 block formating context,以下属性可以实现
    * float: left/right
    * position: absolute
    * display: inline-block/table-cell(或其他 table 类型)
    * overflow: hidden/auto
    父层p加:position: absolute;

    显示效果为

    2、1,2的float分别为left right时,有

    可见1,2脱离标准流,标准流中的son3当他们不存在,于是son3代替原来son1的位置,而son1的左border、son2的右border与son3的左右border重合

    3、当1,2,3全都float left时

    文字围绕着float过的p

    4、1,2左浮动,3右浮动,当窗口宽度减小时,3会被挤下来

    当3左浮动,2右浮动的时候,显示为

    当浏览器窗口宽度减小时,猜猜谁会被挤下来,son2么?

    答案还是son3,规则为 : 写在html文件中后面的会被挤下来,在html文件中,son3在son2后面,因此总是son3先挤下来。

    5、增加son1高度,son3挤下来时会卡在那里

    6、删除盒子中的文字,3个子p全部左浮动
    显示为

    父p中的三个子p全部脱离标准流了,父p就缩成一条线了,可以用clear来修正
    加一个margin-padding-border全为0,clear为both的空p,来撑大父p

    III . clear清除浮动
    如果前面有float:left的元素,他会影响下面元素,如上例中的p,在p元素中写clear : left即可消除前面左浮动元素对本元素的影响.同理clear:both是左右都清除.

    二 . 定位position

    position取值有static absolute relative fixed

    1. static
    这个是默认的,即标准流排下来,就是static定位方式.

    2. fixed
    在浏览器窗口中固定,什么论坛中的[回到顶部]这种按钮就是fixed做的
    练习做个回到顶部玩玩

    <p id="backToTop"> 回到顶部 </p> #backToTop { width: 100px; height: 50px; background-color: red; color: white; cursor: pointer; border-radius: 25px 0 0 25px; padding-left: 20px; text-align: center; line-height: 50px; position: fixed; bottombottom: 80px; rightright: 0; }

    显示效果

    3. relative相对定位

    相对于自己的偏移,而且不脱离标准流,使用top/bottom left/right指定偏移量

    4. absolute绝对定位

    根据别的已定位元素进行定位,应用absolute规则的脱离标准流

    1)、这个别的元素:
    离它最近的已定位的祖先元素 或者 浏览器窗口,当找不到前面的祖先元素时,就以后者浏览器窗口来定位.
    2)、已经定位 : 是指position已经设置,而且不是static...即position值不为static就是已经定位的元素,未设置position或设置为static认为它没有定位.
    Trick

    只设置 position : absolute,而不设置top/bottom/left/right值,那么元素会保持在原地,但是已经脱离标准流.

    三 . display

    display取值有inline block none

    设置为none,即可将其隐藏,像inline-block等新添加的

    CSS有三种基本的定位机制:普通流、浮动和绝对定位。 呢么相对定位和css定位机制有什么关系?

    一、普通流

    普通流中元素框的位置由元素在XHTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。

    普通流就是html文档中的元素如块级元素、行内元素依据他们的显示属性按照在文档中的先后次序依次显示。是块级元素就占一行或多行,是行内元素就和其他元素共处一行,没什么好说的,该咋显示咋显示,一个萝卜一个坑。

    二、定位

    1、相对定位 (position:relative)

    被看作普通流定位模型的一部分,定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。例如: 设置元素 top:20px; left:20px; 那么框将出现在距原本元素顶部左侧各20px的地方。

    对蓝框进行定位后,它仍占据原先的位置。

    2、绝对定位 (position:absolute)

    绝对定位的元素位置是相对于距离它最近的那个已定位的祖先(相对/绝对)元素决定的。 如果元素没有已定位的祖先元素, 那么它的位置相对于初始包含块。绝对定位的元素可以在它的包含块向上、下、左、右移动。

    与相对定位相反, 绝对定位使元素与文档流无关, 因此不占据空间。 普通文档流中其他的元素的布局不受绝对定位元素的影响。参见下图:

    对蓝框定位后, 它下面的元素上移占据了蓝框原本的位置, 仿佛蓝框不存在一般。

    由于绝对定位的元素脱离普通流,所以它可以覆盖页面上的其他元素,可以通过设置Z-Iindex属性来控制这些框的堆放次序。

    绝对定位在大多数现代浏览器中实现得很好, 但是在IE5.5与IE6中有一个bug。 如果要设置绝对定位元素的right或bottom, 那么需要确保它的"最近的相对定位的祖先元素"已经设置了尺寸。 如果没有, 那么IE会错误的相对于初始包含快(画布)定位这个元素。 简单的解决办法 就是给相对定位的元素设置尺寸。 或者尽量使用 top/left定位。

    3、固定定位 (position:fixed)

    相对于浏览器窗口,其余的特点类似于绝对定位。

    三、浮动

    浮动的元素可以在左右移动,直到它的外边框边缘碰到包含块或另一个浮动元素的边缘。浮动的元素离普通流。

    如果包含块太窄,无法容纳水平排列的浮动元素,那么其他浮动元素向下移动,直到有足够多的空间。如果浮动元素的高度不同,那么当它们向下移动时可能会被其他浮动元素卡住。

    行内元素会围绕着浮动框排列。

    CSS布局:float、position、flex、grid

    CSS是前端基础技能之一,而CSS最重要的功能就是网站布局。

    CSS布局方式有很多,从远古时代的table(表格)布局-->float(浮动)布局-->position(定位)布局-->flex(弹性)布局-->grid(网格)布局(还未正式推出),下面咱们简单谈一谈各种布局的用法及其优缺点。

    table布局就是将网站当做一个表单来做,这里不做展开,因为现在基本不这么用了。

    float:浮动。float刚开始并不是为了用来网页布局,而是用来解决图文信息中图片与文本冲突的问题的。

    如下图:

    这种常见的图文效果,没有float之前是很难达到的。有了float之后只需要加一个float:left,轻松搞定。

    ‘咦,如果float可以处理图文的问题,那用来布局不也可以吗?’,后来有人用float试着用于网页布局,还真的可以。

    网页中最常见的布局如下:

    用float做

    比table布局要方便不少,不过float随之而来的带来了 “浮动高度塌陷”的问题:

    如果浮动元素的父元素没有设定高度,当其子元素浮动后,父元素就因为内部没有子元素撑起从而高度变为0;

    引申:网页元素一般分为 普通流,浮动流,定位流。其中普通流和浮动流在一个层级上,定位流>浮动流>普通流。

    之后为了解决这个问题搞出来一系列清除“浮动高度塌陷”的策略方法,非常麻烦。

    position:定位;顾名思义,就是确定位置。position同样可以用做网页布局。

    同样的效果

    不过position需要计算每一个元素的位置,而且这个位置是定死的,略显繁琐和笨重。实际上position我平常只用来定位一些小的标签之类的东西。position优点在于不像float那样会影响其他元素。

    关键点:子绝父相。需要定位的元素用absolute绝对定位,其父元素用 relative相对定位。还有fixed固定定位,他是以html为父元素的定位。

    flex:弹性;弹性布局很好的解决了float和position的问题,非常好用。

    使用方法:

    在父元素使用 display:flex;确定弹性作用的范围。

    然后

    justify-content:center(space-around,space-between等);水平方向布局;

    align-items:center(flex-start,flex-end等);垂直方向布局;

    不过flex不兼容IE8及以下的浏览器。

    大部分情况下flex布局已经能满足需要,不过flex只能用作一维布局,也就是说,flex一次只能作用于一条线。如果想要进行二维布局,必须翻转坐标二次弹性,这样会显得不够优雅,这时候grid(网格)布局就发展起来了。

    grid布局用法和flex相似,但是作用于二维布局。

    先在父元素使用 display:grid;确定网格作用范围;

    然后

    grid-template-columns: 40px 50px auto 50px 40px;(行)

    grid-template-rows: 25% 100px auto;(列)

    等等属性,这里只简单介绍,大家了解有这个东西就行。

    在现实工作用,以flex为主,position辅助已经足够应对所有问题。

    莱芜美食还为您提供以下相关内容希望对您有帮助:

    CSS布局浮动(float)和定位(position)属性的区别和如何使用

    float:right/left是子块级元素流集合面向父级元素的定位,定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染,可以重叠,原位置被清空。二者之中最大的差别就是位置保留。比较示例...

    css中浮动是什么意思

    CSS浮动是一种常用于布局的属性,它可以让HTML元素相对于其他元素脱离文档流,并根据指定的方向“浮动”。例如,设置元素为左浮动时,它将会出现在其左侧的最近的可用空间内。浮动元素的存在不影响其他元素的位置和大小,但它...

    CSS布局浮动和定位属性的区别?

    浮动:float:float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。如果浮动非替换元素,则要指定一...

    css中float什么意思

    CSS中的float表示的是浮动,当元素设置了float属性就会脱离标准流,浮动在其他元素上,它会根据属性值向左或者向右浮动CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在...

    CSS布局:float、position、flex、grid

    CSS布局方式有很多,从远古时代的table(表格)布局--&gt;float(浮动)布局--&gt;position(定位)布局--&gt;flex(弹性)布局--&gt;grid(网格)布局(还未正式推出),下面咱们简单谈一谈各种布局的用法及其优缺点。table布局就是将...

    ...-|||-题目一:-|||-在制作网页时,如果希望元素出现在某个特定的位置...

    在制作网页时,如果希望元素出现在某个特定的位置,可以使用CSS来控制元素的定位。有以下几种常见的定位方式:静态定位(static):元素默认的定位方式,按照文档流进行排列,不能通过top、bottom、left、right属性来调整位置。相...

    ...浮动和绝对定位。 呢么相对定位和css定位机制有什么关系?

    简单的解决办法 就是给相对定位的元素设置尺寸。 或者尽量使用 top/left定位。3、固定定位 (position:fixed)相对于浏览器窗口,其余的特点类似于绝对定位。三、浮动 浮动的元素可以在左右移动,直到它的外边框边缘碰到包含块或...

    在CSS 中,用 float 和 position 的区别是什么

    两者是有绝对的区别的,float是时元素浮动,而position是用来给一个元素定位的。1、float的定义和常见用法:float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS中,任何元素都可以浮动...

    在CSS 中,用 float 和 position 的区别是什么

    在CSS里float是浮动的意思,position是定位的意思。float:浮动,故名思议,就是让HTML元素(标签)从标准文档流里浮动起来。从而不受标准文档流的约束,变成了非标准流。标准文档流:HTML的默认布局方式,即元素从上往下,从左...

    CSS是什么?

    CSS 的主要作用包括:样式定义:CSS 允许开发人员定义文本、图像、链接和其他网页元素的样式,包括字体、颜色、边框、间距、尺寸等。布局控制:开发人员可以使用 CSS 来控制网页的布局,包括元素的位置、对齐方式、浮动、定位和...

    Top