第14章盒子的浮动与定位分析

合集下载

浮动与定位解析

CSS 定位与浮动 CSS允许任何元素浮动float，不论是图像，段落还是列表。

无论先前元素是什么状态，浮动后都成为块级元素。

浮动元素的宽度缺省为auto。

浮动有一系列控制它的规则。

1.浮动元素的外边缘不会超过其父元素的内边缘。

2.浮动元素不会互相重叠。

3.浮动元素不会上下浮动。

4.如果一个浮动元素在另一个浮动元素之后显示，而且会超出容纳块，则它下降到低于先前任何浮动元素的位置。

说简单点就是没有空间的话，就另起一行。

CSS 定位机制 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。

也就是说，普通流中的元素的位置由元素在 (XHTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。

可以使用水平内边距、边框和外边距调整它们的间距。

但是，垂直内边距、边框和外边距不影响行内框的高度。

由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。

不过，设置行高可以增加这个框的高度。

CSS position 属性通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

position 属性值的含义：static 元素框正常生成。

块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative 元素框偏移某个距离。

元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute 元素框从文档流完全删除，并相对于其包含块定位。

包含块可能是文档中的另一个元素或者是初始包含块。

元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。

元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

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

网页布局的三种方式-标准流、浮动和定位

⽹页布局的三种⽅式-标准流、浮动和定位⽹页布局的三种⽅式⽹页布局的本质——⽤CSS 来摆放盒⼦。

把盒⼦摆放到相应位置CSS 提供了三种传统布局⽅式(简单说,就是盒⼦如何进⾏排列顺序)：普通流（标准流）浮动定位标准流标准流定义所谓的标准流:，就是标签按照规定好默认⽅式排列1. 块级元素会独占⼀⾏，从上向下顺序排列。

常⽤元素：div、hr、p、h1~h6、ul、ol、dl、form、table2. ⾏内元素会按照顺序，从左到右顺序排列，碰到⽗元素边缘则⾃动换⾏常⽤元素：span、a、i、em 等以上都是标准流布局，标准流是最基本的布局⽅式。

浮动浮动定义浮动最典型的应⽤：可以让多个块级元素⼀⾏内排列显⽰。

⽹页布局第⼀准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float 属性⽤于创建浮动框，将其移动到⼀边，直到左边缘或右边缘触及包含块或另⼀个浮动框的边缘。

语法：选择器{ float: 属性值; }属性值：值描述left元素向左浮动。

right元素向右浮动。

none默认值。

元素不浮动，并会显⽰在其在⽂本中出现的位置。

inherit规定应该从⽗元素继承 float 属性的值。

浮动特性⼀、脱离标准普通流的控制（浮）移动到指定位置（动）, （俗称脱标），且浮动的盒⼦不再保留原先的位置如同其名字的意义⼀样，浮动，即浮动到元素上⽅，可以这样来理解：标准流在最底层，浮动的元素在标准流的上⽅，即脱离了标准流的控制。

同时它位于标准流的上层，所以标准流⾥不会再存在它的位置。

但也会有特殊的情况，即⽂字和浮动元素位于同⼀个⽗元素⾥时，浮动元素不会盖住⽂字，⽽是环绕⽂字，这是因为浮动设计的初衷就是类似word图⽚和⽂字的浮动效果，所以不会出现浮动元素盖住⽂字的情况出现。

⼆、如果多个盒⼦都设置了浮动，则它们会按照属性值⼀⾏内显⽰并且顶端对齐排列例如三个在同⼀个⽗盒⼦下的⼦盒⼦，都设置左浮动例如在同⼀个⽗盒⼦下的两个⼦盒⼦分别设置左浮动和右浮动注意：浮动的元素是互相贴靠在⼀起的（不会有缝隙），如果⽗级宽度装不下这些浮动的盒⼦，多出的盒⼦会另起⼀⾏对齐三、浮动元素会具有⾏内块元素特性任何元素都可以浮动。

浮动与定位

1.浮动(float)在div+css中浮动分为左浮动右浮动和清除浮动。

①右浮动（float：right）指一个块元素向右移动，并且空出自己左边的位置，让给其他元素，直到碰到包含该块元素的边框为止。

②左浮动（float：left）指一个块元素向左移动，让出它右面的空间，让别的块元素显示。

如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素”卡住”。

并且只从它下一行的右下角往后排！③清除浮动（clear：left；clear：right；clear：both）如果不希望别的元素在某个元素的左边后者右边，可以使用清除浮动的方式。

2.浮动对块元素和行内元素都有效，并且只有在浮动的情况下，浏览器才解析行内元素的宽和高。

3.定位(position) 常见的定位有4种①static（默认的）Left 和top 属性对static 定位的元素不生效。

Static 是靠margin-left 和margin-top 进行定位的②relative 相对定位所谓相对定位是相对于该元素原先所在位置的左上角定位的，虽然它脱离了标准流，但是它原先的位置不会被占据。

代码#spe{Position:relative;Left:40px;Top:100px;}③absolute 绝对定位绝对定位是指：以包含该元素且脱离了标准流的元素为基础定位的，但是如果没有父元素（或有父元素，但父元素没有脱离标准流），则相对于body左上角定位。

④fixed 固定定位所谓fixed定位，指的是不管怎样，总是以视窗左上角为基准定位。

4.z-index 用于设置对象（div）显示的时候的层叠顺序。

.cls{z-index：#;}#=1 2 3 4 数字越小，对象越在下边。

postion:relative是子块级元素面向父级元素的相对定位，定位关键字使用left/right/top/bottom，而float:right/left是子块级元素流集合面向父级元素的定位，定位的关键词使用margin/padding。

浮动定位

１.1 标准流(文档流)块级元素独占一行显示标准流的显示方式元素默认的显示方式就是标准流。

１.2 浮动用法：Float:left| right特点：☞设置了浮动的元素不占原来的位置（脱标）☞可以让块级元素在一行上显示☞浮动可以行内元素转化为行内块元素模式转换的过程中，能用display就用display 作用：☞浮动用来解决文字图片环绕问题☞制作导航栏☞网页布局１.3 清除浮动☞清除浮动不是删除浮动☞清除浮动指的是清除浮动的影响注意：当子元素设置了浮动，父元素没有高度的时候，造成页面布局混乱。

这种情况下进行清除浮动。

１.4 清除浮动的几种方式☞使用clear:left| right | bothClear:both;在要清除浮动的元素后面添加一个标签☞给父盒子设置overflow:hidden如果父盒子中有定位的元素，一般不推荐使用该种方式清除浮动。

☞使用伪元素清除浮动１.5 Overflow的使用☞hidden 将超出部分进行隐藏☞auto如果内容超出盒子，那么给盒子设置滚动条，如果内容没有超出盒子，那么不显示滚动条。

☞scorll２定位方位名称：Left，right ，top, bottom２.1 静态定位（static）用法：Position：static静态定位就是元素标准流的显示方式。

２.2 绝对定位（absolute）看脸型用法：Position：absolute;特点：☞当给一个单独的元素设置绝对定位，以浏览器左上角（body）为基准设置定位的。

☞当盒子发生嵌套关系的时候，如果父盒子没有设置定位，子盒子设置定位以浏览器左上角为基准设置定位。

☞当盒子发生嵌套关系的时候，如果父盒子设置定位，子盒子设置定位父盒子左上角为基准设置定位。

☞给盒子设置了绝对定位，该盒子不占位置（脱标）☞给行内元素设置绝对定位后，该元素转化为了行内块元素注意：元素设置了绝对定位后，通过具体的方位名称可以随便设置元素的位置。

盒子的浮动与定位

准备页面 14-01.htm
未设置浮动，完全按标准流显示
父div 子div 子div 子div 子p
设置第1个浮动的div
.son1{ float:left; }
box-2左边框与box-1左边框重合，因为box-1已经脱离标准流，标准流中的 box-2会顶到box-1的位置，而文字会环绕box-1排列
盒子的
postion
static：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。 relative：相对定位，使用相对定位的盒子以标准流方式进行排版，然后使盒子相对于原位置偏移指定的距离。相对定位的盒子仍在标准流中，占用其原有位置。 absolute：绝对定位，盒子的位置以他的包含框为基准进行偏移。该盒子从标准流中脱离，其他盒子就好象这个盒子不存在一样。 fixed：固定定位，和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口滚动条时，依然保持对象位置不变。
改变浮动方向
14-05.htm
将box-3的float设置为right
如果将浏览器调整变窄，box-3将会被挤到下一行中，但仍然保持向右浮动。
调整浮动对象 14-06.htm
box-1保持向左，box-3左浮动，box-2右浮动。
将来浏览器窗口变窄，box-3先被挤入下一行，这是按照 HTML书写顺序来决定的。
扩展盒子高度
box-1、2、3均浮动，父div中无文字段落，父div范围缩为一条。 14-08a.htm
一个div的范围是由它里边的标准流内容决定的，与里边的浮动内容无关。要让父div包含3个浮动盒子，可以在3个浮动div后增加一个div实现。 14-08.htm .father .clear{

浮动定位的概念和作用

浮动定位的概念和作用
一、概念
浮动定位是一种CSS布局技术，它通过设置元素的float属性来实现元素在页面上的浮动效果。

浮动可以使元素向左或向右移动，直到它碰到父级元素的边界或另一个浮动元素。

二、作用
1.实现文字环绕效果
通过设置元素的float属性，可以让元素沿着容器边缘浮动，实现文字环绕效果。

例如，将图像设置为浮动，文本就会环绕在图像周围，形成图文混排的效果。

2.实现网页布局的多样化
通过将元素设置为浮动，可以让元素按照不同的方向排列，实现更加灵活的网页布局。

例如，可以将一组按钮设置为浮动排列，形成水平导航条。

3.方便地实现定位和排版
使用浮动定位可以方便地将元素定位到页面的特定位置，并且可以轻松地调整它们的顺序和位置。

此外，还可以使用clear属性来清除浮动，防止元素重叠。

4.快速排版
使用浮动定位可以快速地将文本和图片等元素排列在一起，实现快速排版。

这对于制作宣传册、海报等需要快速排版的任务非常有用。

盒子的定位和布局

盒⼦的定位和布局⼀、基本概念（⼀）视觉格式化模型1. 视觉格式化模型（visual formatting model）：CSS的⼀种机制，它规定了页⾯中的多个盒⼦如何布局2. css的⼀种机制，视觉格式化模型属于css范畴3. 多个盒⼦如何布局，中的每个HTML元素都会在页⾯盒⼦中⽣成4. 这些盒⼦如何排列、如何相互影响，由视觉格式化模型定义5. 视觉格式化模型是⼀套⾮常复杂的机制，包含错综复杂的CSS规范6. 本章的课程从实⽤的⾓度出发，仅学习在划分页⾯区域的时候需要的核⼼知识7. 由于划分页⾯区域时⼏乎都使⽤的是块盒，因此，本章仍然只涉及块盒（⼆）视⼝1. 视⼝（viewport）：可视窗⼝，通常指浏览器的可视区域2. 视⼝的尺⼨仅受到浏览器可视窗⼝⼤⼩的影响，和内容⽆关3. 当⽹页内容的尺⼨超过视⼝尺⼨时，浏览器会出现滚动条（三）包含块1. 包含块（containing block）：每个元素都有⼀个包含块，它是指元素在页⾯中摆放的区域2. 通常情况下，元素的包含块是它⽗元素的内容盒（content-box）3. 包含块：初始化包含块（initial containing block）初始化包含块是浏览器在渲染前⾃动⽣成的⼀块区域4. 包含块（containing block）：每个元素都有⼀个包含块，它是指元素在页⾯中摆放的区域5. 通常情况下，元素的包含块是它⽗元素的内容盒（content-box）6. 根元素的包含块是初始化包含块（initial containing block）⼆、定位体系概述（⼀）什么是定位体系1. 视觉格式化模型规定，定位体系⼀共有三种：常规流（normal flow）浮动（float）绝对定位（absolute positioned）2. 任何⼀个元素，必须属于其中⼀种定位体系3. 不同的定位体系中，元素在包含块中的尺⼨和位置会有⼀些差异（⼆）定位体系判定1. position是⼀个CSS属性，默认值为static2. float是⼀个CSS属性默认值为none三、盒模型的定位体系1．定位体系影响盒模型等于最终盒⼦尺⼨；定位体系等于盒⼦尺⼨2．盒模型中的尺⼨：margin：px、em、%、auto；border：px、em；padding：px、em、%；width：px、em、%、auto；height：px、em、%、auto 3．尺⼨为设定的值，与定位体系⽆关4．尺⼨是包含块尺⼨的百分⽐，margin、padding、width的百分⽐：是包含块宽度的百分⽐；height的百分⽐（很少使⽤）5．尺⼨受到定位体系的影响6．不同的定位体系，auto的计算规则不⼀样四、常规流（⼀）常规流1. 常规流，⼜叫做普通流、⽂档流、普通⽂档流2. 常规流是最常见的定位体系，所有元素默认状态下都是常规流定位（⼆）盒模型中的auto值1. 常规流盒⼦⽔平⽅向上的尺⼨，必须等于包含块的宽度2. margin为auto：0px；height为auto：适应内容的⾼度3. ⽔平⽅向：常规流盒⼦⽔平⽅向上的尺⼨，必须等于包含块的宽度，如果不⾏，则强⾏将margin-right设置为auto4. 垂直⽅向：margin为auto：0px；height为auto：适应内容的⾼度五、盒⼦位置1. 盒⼦在包含块的垂直⽅向上依次摆放，盒⼦在包含块的垂直⽅向上依次摆放。

第14章 DIV+CSS布局基础

14.2.5 边框
边框是页面元素可视范围的最外圈。边框是页面元素可视范围的最外圈。边框包围的范围包括页面元素的补白和内容。括页面元素的补白和内容。CSS中提供以下三个设置边框的中提供以下三个设置边框的属性：属性： 1．边框样式．边框样式border-style 参数：参数： none : 无边框。与任何指定的无边框。与任何指定的border-width值无关值无关 hidden : 隐藏边框。IE不支持隐藏边框。不支持 dotted : 在MAC平台上平台上IE4+与WINDOWS和UNIX平台上平台上与和平台上 IE5.5+为点线。否则为实线为点线。为点线 dashed : 在MAC平台上平台上IE4+与WINDOWS和UNIX平台上平台上与和平台上 IE5.5+为虚线。否则为实线为虚线。为虚线 solid : 实线边框 double : 双线边框。两条单线与其间隔的和等于指定的双线边框。 border-width值值 groove : 根据根据border-color的值画凹槽的值画3D凹槽的值画 ridge : 根据根据border-color的值画菱形边框的值画菱形边框 inset : 根据根据border-color的值画凹边的值画3D凹边的值画的值画3D凸边 outset : 根据根据border-color的值画凸边的值画
块级元素和行内元素的区别
排列方式块级元素垂直排列可控制属性高度、行高以及上下边距都可控制宽度其宽度默认情况下与其父元素一致。可以设置width 属性改变其宽度。宽度就是其包含的文字或者图片的宽度，设置width 属性不生效。
行内元素

盒子的定位与浮动

CSS系列：CSS中盒子的浮动与定位1. 盒子的浮动在标准流中，一个块级元素在水平方向会自动伸展，知道包含它的元素的边接；而在竖直方向与相邻元素依次排列，不能并排。

CSS中float属性，默认为none。

将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧。

同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来决定。

float: left;可以使用clear来清除浮动：clear: left | right | both;2. 盒子的定位在CSS中有一个position属性，用来进行定位操作。

position属性可以设置为4个属性值之一：◊ static：默认的属性值，该盒子按照标准流（包括浮动方式）进行布局；◊ relative：相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。

相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。

◊ absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。

绝对定位的盒子从标准流中脱离。

它对其后的相邻盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。

◊ fixed：固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，当拖动浏览器的滚动条时，依然保持对象位置不变。

2.1 staticstatic为默认值，表示块保持在原本的位置上，不会有任何移动的效果。

没有设置任何position属性相当于使用static方式。

2.2 relative使用relative相对定位，除了将position属性设置为relative之外，还需要指定一定的偏移量，水平方向通过left或者right属性来指定，竖直方向通过top或bottom来指定。

<!DOCTYPE html><html><head><title></title><style type="text/css">.relative {position: relative;top: 20px;left: 20px;width: 500px;}</style></head><body><div class="relative">Position相对偏移</div></body></html>在上面的示例中，.relative若不设置width，则由于block元素会自动伸展到宽度与父元素相同，且加上left的20px，则在浏览器中预览时，会出现横向滚动条。

CSS--盒子的浮动与定位

第五讲：第五讲： DIV+CSS布局布局--DIV+CSS布局--盒子的浮动与定位
1
复习在标准流中盒子的排列方式
2
盒子的浮动
3
盒子的定位
1
复习在标准流中盒子的排列方式
复习在标准流中盒子的排列方式
1、网页中的元素是以盒子的形式显示，盒、网页中的元素是以盒子的形式显示，子之间或并列或嵌套。子之间或并列或嵌套。 2、文档流是指浏览器处理文档（即网页）、文档流是指浏览器处理文档（即网页）中元素（盒子）的流程。中元素（盒子）的流程。标准文档流（即标准流），），是指在没标准文档流（即标准流），是指在没样式影响（有CSS样式影响（默认）下，浏览器对网样式影响默认）页中元素（盒子）的排列规则。页中元素（盒子）的排列规则。
复习在标准流中盒子的排列方式
4、行级元素和块级元素对于浏览器来讲，、行级元素和块级元素对于浏览器来讲，就是显示处理方式的不同。就是显示处理方式的不同。一个元素是块级元素还是行级元素可以通过css的display属性进行更改。属性进行更改。通过的属性进行更改 display：block；：； display：inline；：；设置为块级元素设置为行级元素
盒子的定位相对定位（relative） 1、相对定位（relative）分析实例09-12.htm 分析实例0909 结论：结论：相对定位是盒子相对原来的位置原来的位置， 1）相对定位是盒子相对原来的位置，通过指定偏移量，通过指定偏移量，到达新位置 2）相对定位对父盒子及兄弟盒子没有影响
复习在标准流中盒子的排列方式 3、标准流中盒子的排列方式：、标准流中盒子的排列方式：
1）一般的原则是浏览器从上至下，由外及一般的原则是浏览器从上至下，里显示各个盒子。里显示各个盒子。具体到元素： 2）具体到元素： • 块级元素在水平方向上自动伸展，直块级元素在水平方向上自动伸展，到包含它的元素的边界；到包含它的元素的边界；在竖直方向上与兄弟元素依次排列，不能并排。上与兄弟元素依次排列，不能并排。 • 行级元素则自动显示在一行中，在行行级元素则自动显示在一行中，的最右端自动换行。的最右端自动换行。3源自盒子的定位盒子的定位

盒子的浮动与定位

狭义的“定位”：在CSS中有一个非常重要的属性position，这个单词翻译为中文也是定位的意思。
然而要使用CSS进行定位操作并不仅仅通过这个属性来实现，因此不要把二者混淆。
首先，对position属性的使用方法做一个概述，后面再具体举例子说明。
position属性可以设置为以下4个属性值之一。 1.Static静态定位 2.Relative相对定位 3.Absolute绝对定位 4.Fixed固定定位
动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p> • </div> • </body> • </html>
1.2 设置第1个浮动的div
在上面的代码中找到： .son1{
/* 这里设置son1的浮动方式*/ } 将.son1盒子设置为向左浮动，代码为： .son1{ /* 这里设置son1的浮动方式*/ float:left; }
• .father div{ • padding:10px; • margin:15px; • border:1px dashed #111111; • background-color:#90baff; •} • .father p{ • border:1px dashed #111111; • background-color:#ff90ba; •} • .son1{ • /* 这里设置son1的浮动方式*/ •} • .son2{ • /* 这里设置son1的浮动方式*/ •} • .son3{ • /* 这里设置son1的浮动方式*/ •} • </style>

css 浮动和定位

用后台语言可以对从数据库里的字段内容做截断处理，比如说截12个汉字（之后用省略号）。但是有时还需要html标签的过滤等，而用 CSS来控制则没有这个问题。比如对列表应用以下样式： li{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
这些定位属性都需要如下属性配合 top bottom left right:
绝对定位：absolute:
1、不保留原先位置的占位 2、默认原点是浏览器的左上角（可以更改
原点） 3、要精确定位必须配合定位属性（ top、
bottom、 left 、 right ）
如何以父级标签左上角为原点？(在绝对定位的情况下)
以上都可以写在一行font属性里（除了color属性需要单独写）： font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;
固定宽度汉字截断 text-overflow
南京上海上海上南上海上海南京上海上海上海南京上海上海南京上海上海南京上海南京上海南京上海南京上海南京上海南京上海上海南京上海上海
</div>
竖排文字 — 使用writing-mode
writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左。比如：
清除浮动
1.额外标签法 w3c 组织推荐使用在容器的末尾加一个
clear:both 。空标签可以是div标签，也可以是P标签缺点：增加一个空div

绝对定位与相对定位和浮动的区别与运用

绝对定位与相对定位和浮动的区别与运用
绝对定位和浮动的区别和运用
1. 绝对定位的本身是与文档流无关，他的定位是从浏览器的左上方或者父级开始计算的。

因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样。

所以他可以覆盖页面上的其他元素。

2.浮动元素的定位还是基于正常的文档流，然后从文档流抽出并尽可能远的移动至左侧或者右侧。

文字内容会围绕在浮动元素周围。

它只是改变了文档流的显示，而没有脱离文档流。

绝对定位与相对定位
1.absolute，绝对定位的框与文档流无关，所以他们可以覆盖页面上的其他元素并可以通过z-index来控制它的层级次序。

z-index的值越高，它显示的越在上层。

2.relative,对一个元素进行相对定位，首先它出现在它所在的位置上。

然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动。

（相对定位时，无论是否进行移动，元素仍然占据原来的空间。

因此，移动元素会导致它覆盖其他框）
3.父元素相对定位。

子元素绝对定位。

这样子子元素的位置不在相对浏览器左上角，而是相对于父级窗口的左上角。

4.相对和绝对需要配合top/ right/ bottom/left来定位具体位置，这四个属性只有在该元素使用定位后才生效，其他情况无效。

浮动定位以及其区别

浮动定位以及其区别浮动元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

语法: float :leftrightnone(默认)注意:1. 浮动的元素要有父元素2. 浮动后的元素类似元素行内块元素,即使行内元素浮动后也可以设置宽高.(类似不代表是,浮动后的盒子可以设置宽高，但是不能用行内块的方式让盒子居中，比如：给浮动的盒子父元素添加text-algin ：center ；是不起作用的；需要给盒子margin 才能调整其位置)3. 浮动的元素会脱离文档流,但是没有脱离文本流浮动带来的影响：父元素高度塌陷 : 子元素浮动,父元素没有设置高,子元素不能把父元素的高给撑开,导致父元素没有高度,这种现象叫父元素高度塌陷 .清除浮动1.加固定的高缺点:不灵活2.额外标签法在父元素的末尾加一个空div, 给父元素设置clear:left/right/both优点：通俗易懂，书写方便缺点：添加许多无意义的标签，结构化较差。

3.父级添加overflow属性方法在父元素身上设置 : 除了visible以外的其他overflow 的值都可以 , overflow:hidden/scroll/ auto原因: 是overflow触发了BFC, 在计算BFC高度的时候,浮动的子元素的高度也计算在内优点:代码简洁缺点 :无法显示需要溢出的元素4.使用after伪元素清除浮动优点 : 结构语义化正确缺点 : 由于IE67不支持:after，使用 zoom:11 .clearfix:after {2 content: "";3 display: block;4 clear: both;5 }6 .clearfix {7 zoom: 1;8 }定位1.postion: static 默认值静态定位2.postion : relative : 相对定位特点 : 不脱离文档流 ,以自身的位置来定位的应用场景 :微调元素做绝对定位的参考，子绝父相3.position:fixed : 固定定位不管怎么滚动滚动条,始终固定在某个位置特点 : 脱离了文档流,以浏览器窗口来定位的4.position:absolute : 绝对定位特点 : 脱离了文档流, 以最近已定位的”父元素”的位置来说的,如果父元素都没有定位,以html的位置来说的备注 : 已定位的”父元素”可以是绝对定位/ 相对定位/固定定位,子绝父相用的最多方向关键字left : 正值是向右走的负值往左走top : 正值是向下走的负值往下走right : 正值是向左走的负值往右走bottom : 正值是向上走的负值往下走注意: static定位身上不能用方向关键字脱离文档流的元素1.固定定位2.绝对定位3.浮动特点 : 类似于行内块元素,如果不设置宽高,它的宽高是由内容撑开的,即使是行内元素,可以设置宽高如何让定位的盒子垂直居中:1 {2 left:50%;3 top:50%;4 margin-left:-盒子宽度的一半;5 margin-top:-盒子高度的一半;6 }78 {9 left:50%;10 top:50%;11 12 transform: translateX(-50%);13 14 transform: translateY(-50%);15 }浮动定位区别CSS2中能够使标签脱离文档流的属性有：float:left/right;postion:absolute/fixed;float脱离文档流时，其他盒子会无视这个标签，但其他盒子内的文本、图片、表单标签依然会为这个标签让出位置，环绕在周围( 脱离文档流，不脱离文本流 )。

深入理解css布局之定位与浮动

深入理解css布局之定位与浮动在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。

今天我们来深入学习一下css布局相关的知识。

上篇文章我们讲完了css布局中盒模型和元素分类的相关知识，同时介绍了box-sizing和行框。

这篇我们继续...一、定位与浮动上篇我们讲解了不同类型元素的特点，我们可以随意的排列组合他们来达到我们想要的效果。

但是他们都是基于一个二维平面的，如果我们想在布局中有遮挡，重叠之类的更丰富效果，我们就需要使用到定位和浮动的相关知识。

1.1 文档流文档流就是按照页面元素书写的顺序，将页面元素按从左到右，从上至下的一般顺序进行排列。

那么也就可以理解成我们刚才所说的一个二维平面的概念。

那么如果我想要实现更丰富的效果，就需要脱离文档流，在一个新的平面上去显示，这样我们就可以在屏幕上有多个平面叠加显示的效果了，那么这就是浮动和定位的工作了。

1.2 定位定位允许你使用position 属性，将一个元素相对于他自己或者他的祖先元素甚至是浏览器窗口通过 top , left , right , bottom 属性进行偏移。

根据position 属性的取值，元素可以分为静态定位元素static （默认值）、相对定位元素relative、绝对定位元素absoute和固定定位元素fixed。

首先我们抛开static这个默认值，因为他基本不属于定位的范畴，因为元素默认就是static，他就相当于是依据文档流显示。

当我们使用定位时，需要position属性和top,left,right,bottom 这两类属性共同参与来决定一个元素的定位类型和偏移量。

使用方法很简单，这里说下他们之间的区别:•relative相对定位•元素根据其在当前文档流所在位置作为参考系，进行偏移。

•定位之后原来元素在文档流中的位置会被空出来，不会被其他元素所占据。

•absolute绝对定位•元素会将其带有position为非static的祖先元素作为参考系进行偏移。

盒子属性，浮动，定位

盒⼦属性，浮动，定位1.盒⼦常见属性1）容器盒⼦Box-size:设置盒⼦模型，CSS3标准，content-box:正常默认模式，起源于⾕歌，元素的整体⼤⼩会被内边距和边框撑开border-box：怪异模式，起源于IE，元素的整体⼤⼩不会被内边距和边框撑开Width:宽度Height:⾼度注意：width,height会根据box-size盒⼦模型的不同来决定是内容的宽度和⾼度，还是整个元素⼤⼩的宽度和⾼度。

2）Padding:内边距Padding-left,padding-right,padding-top,padding-bottomPadding:上右下左;Padding:上右下；左边距等于右边距Padding:上右；下跟上边⼀样，左跟右⼀样3）Margin:外边距外边距跟内边距⼀致。

但是两个元素的外边距会重叠。

4）Border:边框语法：border: 边框宽度边框样式颜⾊;可以分开设置，例如border-width: 30px;border-style: dashed;border-color: purple;分别设置上下左右边框，例如border-bottom:50px dotted green;5）Box-shadow:盒⼦阴影box-shadow: 阴影的⽔平偏移值阴影的垂直偏移值阴影的模糊度阴影的颜⾊;6）Display:设置盒⼦是块级元素还是⾏级元素还是弹性元素Block:块级元素，会占据⼀整⾏，有宽⾼，div,h1,p,li,ul...Line-block:⾏块元素，不会占据⼀整⾏，有宽⾼,img...Line:⾏元素，不会占据⼀整⾏，也没有宽⾼,a,span...7）Border-radius:边框的圆⾓8）Background:设置元素的背景，背景图⽚，背景颜⾊Background:是⼀个综合性的属性，可以分出背景颜⾊，背景图⽚，背景是否重复，背景图⽚的位置，背景图⽚的⼤⼩Background-position:设置背景图⽚的位置，left,right,top,bottom,center,百分⽐⼀般可以设置2值，第⼀个值是设置⽔平位置，第⼆个值设置垂直位置Background-size:设置背景图⽚的⼤⼩，注意：有时候不知道图⽚的确切⽐例的时候，只需要设置⼀个宽度或者⾼度，另外⼀个值设置为auto即可。

CSS盒子模型、浮动与定位

盒子之间的关系 (test05-05.htm)
body <li> <li> ul ul <ul> <li> li li li li <li> <body> <ul>
标准文档流
块级元素（block level） li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。 ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。因此，这类元素称为“块级元素”（block level），即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。思考：哪些标记是块级元素？
静态定位(test05-11.html)
没有设置position属性时的状态
1．一个子块的情况
#block1{ background-color:#fff0ac; border:1px dashed #000000; padding:10px; position:relative; /* relative相对定位 */ left:30px; top:30px; }

绝对定位
1．创建基础页面(test05-12.html) 2．使用绝对定位 #block2{ position:absolute; top:0px; right:0px; } 将父div增加一个定位样式： #father{ background-color:#a0c8ff; border:1px dashed #000000; padding:15px; position:relative; }
Margin-left
span2
行内元素之间的margin

css三大模块：盒子模型、浮动、定位

css三⼤模块：盒⼦模型、浮动、定位⼀、盒⼦模型把HTML页⾯中的元素看作是⼀个矩形的盒⼦（装内容的容器），每个矩形都由元素的内容、内边距padding、边框border和外边距margin 组成。

看下⾯的代码：<style>.box{width: 200px;height: 200px;float: left;padding: 100px;margin: 100px;border: 50px solid orangered;background-color: bisque;}</style><div class="box"></div>代码效果如下：浏览器下的效果在Chrome的开发者⼯具中 box的⼆维分析图盒⼦模型⼀般分为两种：IE盒模型（⼜称怪异盒模型）和标准盒模型css3中可以通过box-sizing来指定盒模型，如下：标准盒模型：box-sizing: content-box; /*盒⼦⼤⼩为：width+padding+border*/IE盒模型：box-sizing: border-box; /*盒⼦⼤⼩为：width 即padding和border是包含到width⾥⾯的*/代码如下：<style>div{width: 200px;height: 200px;float: left;padding: 100px;margin: 100px;border: 50px solid orangered;background-color: bisque;}.box1{box-sizing: content-box; /*盒⼦⼤⼩为：width+padding+border*/}.box2{box-sizing: border-box; /*盒⼦⼤⼩为：width 即padding和border是包含到width⾥⾯的*/}</style><div class="box1">box1</div><div class="box2">box2</div>两种盒模型效果图如下（box1为标准盒模型、box2为IE盒模型）：浏览器下的效果在Chrome的开发者⼯具中两个盒⼦的⼆维分析图⽹页布局的本质：把⽹页元素（⽂字、图⽚等），放⼊到盒⼦⾥⾯，然后利⽤css摆放盒⼦的过程。

2022年第讲盒子的浮动与定位

前我们用过该属性，实现了背景图片的定位
在本讲中，我们介绍的是广义的“定位”：
绝对定位相对定位默认的属性值
position定位-1

position定位分为：绝对定位与相对定位。
案例演示
position从字面意思上看就是指定块的位置，即块相对于其父块的位置和相对于它自身应该在位置。
常用属性： position:absolute; position:relative; left:50px; top:50px; z-index:1;
如何将文字分别放在一个盒子的左右两端呢？ position定位-2
在默认情况下，div作为块级元素是占满整行从上到下依次排列的，但在网页的分栏布局中，例如1-3-1固定宽度布局，我们希望中间三栏（三个div盒子）从左到右并列排列，这时就需要将这三个div盒子都设置为浮动。 clear是清除浮动属性，它的取值有left、right、both和none（默认值），如果设置盒子的清除浮动属性clear值为left或right，表示该盒子的左边或右边不允许有浮动的对象。
18
clear属性既可以用在未浮动的元素上，也可以用在浮动的元素上，如果对Box-3同时设置清除浮动和浮动，即：
.son3{clear:both; float:left;}
总结：清除浮动是清除其它盒子浮动对该元素的影响，而设置浮动是让元素自身浮动，两者并不矛盾，因此可同时设置元素清除浮动和浮动
浮动的应用举例
1 图文混排及首字下沉效果等
2菜单的竖横转换
对li设置浮动即可实现
3 制作栏目框标题栏
标题栏的左端是栏目标题，右端是“更多”之类的链接。在默认情况下，div作为块级元素是占满整行从上到下依次排列的，但在网页的分栏布局中，例如1-3-1固定宽度布局，我们希望中间三