第11讲_盒子的浮动与定位
网页布局的三种方式-标准流、浮动和定位
⽹页布局的三种⽅式-标准流、浮动和定位⽹页布局的三种⽅式⽹页布局的本质——⽤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图⽚和⽂字的浮动效果，所以不会出现浮动元素盖住⽂字的情况出现。
⼆、如果多个盒⼦都设置了浮动，则它们会按照属性值⼀⾏内显⽰并且顶端对齐排列例如三个在同⼀个⽗盒⼦下的⼦盒⼦，都设置左浮动例如在同⼀个⽗盒⼦下的两个⼦盒⼦分别设置左浮动和右浮动注意：浮动的元素是互相贴靠在⼀起的（不会有缝隙），如果⽗级宽度装不下这些浮动的盒⼦，多出的盒⼦会另起⼀⾏对齐三、浮动元素会具有⾏内块元素特性任何元素都可以浮动。
《网页设计》课件——11-CSS浮动布局
PART ONE
重难点分析
重点：
1、浮动布局 2、消除浮动影响
难点：
1、浮动布局 2、消除浮动影响
B
PART TWO
课程讲解
常见网页布局
这是常见的1-2-1 布局。 上部：导航部分； 中部：主体部分； 下部：版权部分；
每一块都是一个div
常见网页布局
这是常见的1-3-1 布局。 上部：导航部分； 中部：主体部分； 下部：版权部分；
4. 多个块一起浮动，如果外层块缩小，使得同行浮动块空间不足时，浮动块会依 次向下一行移动。
5. 行内元素浮动后会强制转换成块级元素。此时要注意，一些内联属性将失效 （比如：vertical-align）.
浮动规则-1
1、浮动的块可以向左或向右移动，直到它 的外边缘碰到包含它区块的边框、或另 一个浮动框的边框、或一个标准流块的 下一行。
文档流布局方式
块级元素独占 一行，所以文档 流布局只能依次 顺序向下排列， 不能进行复杂布 局。
在实际应用中， 都采用浮动布局 或定位布局
网页元素的三种位置方式
• 普通流
• 浮动
• 定位
相对定位 绝对定位 固定定位
浮动——float属性
• 浮动的方式 取值 float : left float : right float : none
ShenYang ChinaSoft International 沈阳中软国际
浮动规则-3-1
3、如果多个块一起浮动，那么它们按照HTML代码顺序从前向后依 次跟随。 靠近页面边缘的一端是前，远离页面边缘的一端是后。
A、B块都向左浮动： A块向左浮动，B块依次跟随向左浮动。
浮动规则-3-2
深入理解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的祖先元素作为参考系进行偏移。
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摆放盒⼦的过程。
CSS之盒子的浮动与定位
实验六 全部向左浮动
• 实例：float_all_left.html（在BOX-1中增加一 行） • 观察结果
实验七 使用clear属性清除浮动的影响
准备代码
• 先制作一个基础的页面，来演示浮动的效 果。 • 实例：float01.html
实验一 设置第1个浮动的div
• 实例：float_son1.h源自ml • 观察结果 • 注意：box-2的左边框与box-1的左边框是重 合的，而box-2中的文字会围绕着box-1排列。
实验二 设置第2个浮动的div
• relative：元素框偏移某个距离。元素仍保 持其未定位前的形状，它原本所占的空间 仍保留。 • 说明：通过left或right属性指定其水平偏移 量，通过top或bottom属性指定其垂直偏移 量。通过设置垂直或水平位置，让这个元 素“相对于”它的起点进行移动。 • 实例：relative_position.html • 说明：当子块使用相对定位以后，即使移 动到了父盒子的外面，父盒子也不会变大。
– 使用绝对定位的盒子是以它的最近的一个已经 定位的祖先元素为基准进行偏移。 – 如果没有已经定位（只要该盒子的position属性 不是static，并且已经被设置）的祖先元素，则 以浏览器窗口为基准进行定位。
2.3 绝对定位absolute
• 实例：absolute_position_2.html • 观察结果：将父块的定位设置为relative;
• • • • • • • • • • • • • • • • • •
<html> <head> <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:-1 } </style> </head> <body> <h1>这是一个标题</h1> <img class="x" src="/i/eg_mouse.jpg" /> <p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p> </body> </html>
盒子属性，浮动，定位
盒⼦属性，浮动，定位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即可。
盒子的浮动与定位
准备页面 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盒子模型、浮动与定位
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
盒子的浮动与定位
主讲：毛丽娟
盒子的浮动-float属性
css1中首先提出浮动的概念。 float属性的设置会打破原标准流中盒子的默 认布局方式。 浮动不完全是定位，也不是标准流。
案例1-页面效果
制作一个包含4个div块（其中一个父块，三 个子块）的基础页面，页面效果如下：
案例1-结构代码
float小结
标准流布局
浮动后的布局
分析：在标准流中，即使设置了盒子的较小尺寸，块级元素依然遵循标准流 默认的布局规则；当出现浮动元素后，被浮动的框1脱离了标准流，原先在父 元素中占据的标准流空间也随之关闭（如果父盒子是未设置高度的，此时会 发现父盒子的高度也随之减小）。
float小结-浮动元素的叠放次序
案例3-static定位
下面是没有设置任何position属性的页面效果， 相当于使用static方式。
案例3-样式代码
body{ margin:20px; font :Arial 12px; } #father{ background-color:#a0c8ff; border:1px dashed #000000; padding:15px; } #block1{ background-color:#fff0ac; border:1px dashed #000000; padding:10px; }
案例-两栏布局样式代码
.news { p标记的float属性 background-color: gray; 值也可以改成left； border: solid 1px black; 如果没有width属 } 性将会出现p标记 .news img { 内容被img内容挤 到下一行。 float: left; } .news p { float: right; width:70%; margin-left:10px; } .clear { clear: both; }
盒子的定位与浮动
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--盒子的浮动与定位
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布局中float和position属性使用技巧
CSS布局中float和position属性使用技巧2010-09-02 11:18 52css 我要评论(0)字号：T | T在进行CSS网页布局时，对元素与容器进行布置与规划，最常用的两个属性就是浮动float和定位position，本文向大家描述一下这两个属性的用法。
AD：你对CSS布局中浮动float和定位position属性的使用是否熟悉，这两个属性的理解对CSS网页布局的学习非常重要，这里和大家分享一下。
CSS布局最常用属性float（浮动）和position（定位）在进行CSS网页布局时，对元素与容器进行布置与规划，最常用的两个属性就是浮动float和定位position。
这两个属性的理解对CSS网页布局的学习非常重要。
我们就这两个属性的相关知识与实例，发布本文，希望对您的工作学习有帮助。
首先了解float（浮动）和position（定位）属性的基础知识：float（浮动）属性：float:none|left|right◆取值：none:默认值。
对象不飘浮left:文本流向对象的右边right:文本流向对象的左边float（浮动）属性的一个实例（一行两列）：ExampleSourceCodexhtml代码:1.<divid divid="wrap">2.<divid divid="column1">这里是第一列</div>3.<divid divid="column2">这里是第二列</div>4.<divclass divclass="clear"></div>5.<!--元素需要清除浮动但可能与Web标准意图相背-->6.</div>CSS代码:1.#wrap{width:100px;margin:0auto;}2.#column1{float:left;width:40px;}3.#column2{float:right;width:60px;}4..clear{clear:both;}5.position（定位）属性：position:static|absolute|fixed|relative◆取值：◆static:默认值。
CSS基础知识之盒模型以及浮动布局
CSS基础知识之盒模型以及浮动布局CSS基础知识之盒模型以及浮动布局谈到盒模型，有经验的小伙伴一定滚瓜烂熟，无非就是内容(content)、填充(padding)、边框(border)、边界(margin)；这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。
盒子由几部分组成：物品+填充物+外包装+外边距content+padding+border+margin/*margin后面接多个值*//*上右下左*/margin:50px30px40px20px;/*上左右下*/margin:50px30px40px;/*上下左右*/margin:50px30px;/*上下左右*/margin:50px;通常情况下：父子关系产生边距一般用padding兄弟关系产生边距一般用marginp标签的基本样式p{font-family:"微软雅黑";/*em*/font-size:1em;/*italic斜体oblique倾斜*/font-style:oblique;/*100-900*//*bold加粗*//*lighter*//*normal*/font-weight:lighter;/*复合属性*/font:italic9002em"宋体";/*文本设置*//*underline*//*overline*//*line-through*//*text-decoration:line-through;*/ /*缩进*//*数值，可用用px也可用em，可以为负值*/ text-indent:-10px;/*left,right,center*//*justify两边对齐*/text-align:justify;/*行间距*//*如果一行内容的'情况下，可以用作垂直居中*/ line-height:-1px;/*字(单词)间距*//*可以为负值*/word-spacing:-50px;/*字符间距*//*可以为负值*/letter-spacing:-5px;}插入背景图片/*背景图片，平铺*/background-image:url("img/1.gif");/*背景图片是否重复xy*/background-repeat:repeat-y;/*背景图片大小宽高*//*background-size:100%100%;*//*1.可以使用像素值2.可以使用方向值3.可以使用百分比*/background-position:30%80%; }/*伪类hover鼠标悬停*/.p1:hover{width:400px;height:400px;}css基本样式一览css属性名：width:宽度height:高度margin:外边距padding:内边距border:边框background:背景display:显示方式font:字体font-weight文字着重font-family字体font-size文字大小font-style文字样式letter-spacing字母间距word-spacing单词间距text-align文本对齐方式text-decoration文本修饰text-indent首行缩进background-repeat背景图片重复background-image背景图片background-size背景图片大小float浮动浮动布局float:left左浮float：right右浮清除浮动的方式：1.clear:both;2.在父级中加上overflow:hidden;变为BFC(单独布局的小单位)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 浮动和定位
这些定位属性都需要如下属性配合 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
盒子的定位原则_Web前端开发技术——HTML、CSS、JavaScript（第2版）_[共5页]
![盒子的定位原则_Web前端开发技术——HTML、CSS、JavaScript（第2版）_[共5页]](https://img.taocdn.com/s3/m/5180dc0626fff705cd170a7c.png)
165 外边距margin 属性值的设置和内边距padding 是一样的，也可以设置不同的属性个数代表相应的含义。
15.3 盒子的浮动与定位通过前面几节的学习，我们已经熟悉了一个盒子内部的关系。
但实际网页上分布着大量的盒子，它们之间有着父子的相互关系。
要把一个盒子和其他盒子之间的关系搞清楚并不容易。
为了方便组织页面上的各种盒子，CSS 规范的制定者进行了深入细致的思考，既能有足够的灵活性，可以适应各种排版要求，又能使规则尽可能简单易用，让用户都能容易实现。
CSS 规范首先确定了一种标准的排版方式，可以保证设置的简单化，各种网页元素都按照这种标准的方式进行布局，这就是所谓的“标准流”方式。
但仅有标准流方式还不够灵活，是无法实现所有的排版方式的，所以CSS 规范还给出了其他的布局方法，如“浮动”属性和“定位”属性等。
15.3.1 标准流“标准文档流”简称为“标准流”，是指在不使用其他与排列和定位相关的特殊CSS 规则时各种页面元素默认的排列规则。
页面元素可以分为如下两类。
（1）块级元素（block level ）：总是以一个块的形式表现出来，并和同级的兄弟依次垂直排列，左右撑满。
比如<li>标记，总不会排在同一行，而是和相邻的<li>垂直排列。
（2）行内元素（inline ）：相邻元素之间横向排列，到最右端自动折行。
比如<a>标记。
标准流就是CSS 默认的块级元素和行内元素的排列方式。
在一个页面中如果没有出现特殊的排列方式，那么所有的页面元素将以标准流的方式排列，即一个个盒子形成一个序列，同级别的盒子依次在父级盒子中按照块级元素或行内元素的排列方式进行排列，同级父级盒子又依次在它们的父级盒子中排列，依此类推，整个页面如同河流和它的支流，所以称为“标准流”。
15.3.2 盒子的定位原则掌握盒子在标准流中定位原则需要对margin 有很深刻的理解，因为padding 只在盒子内部，不会影响盒子的外部，margin 是一个盒子的外边距，它直接影响与其他盒子之间的关系。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页的固定宽度1-3-1布局
在默认情况下，div作为块级元素是占满整行从 上到下依次排列的，但在网页的分栏布局中， 例如1-3-1固定宽度布局，我们希望中间三栏（ 三个div盒子）从左到右并列排列，这时就需要 将这三个div盒子都设置为浮动。 但三个div盒子都浮动后，只能浮动到窗口的左 边或右边，无法在浏览器中居中，因此需要在 三个div盒子外面再套一个盒子（称为container ），让container居中，这样就实现了里面的三 个div盒子居中
浮动的应用举例
1 图文混排及首字下沉效果等
2菜单的竖横转换
对li设置浮动即可实现
3 制作栏目框标题栏
标题栏的左端是栏目标题，右端是“更多”之类的链接。 如何将文字分别放在一个盒子的左右两端呢？
最简单的办法就是设置左边的文字左浮动，右边的文字右 浮动。
盒子的定位
CSS中定位的概念
浮动的清除
clear是清除浮动属性，它的取值有left、right 、both和none（默认值），如果设置盒子的清除 浮动属性clear值为left或right，表示该盒子的 左边或右边不允许有浮动的对象。值设置为both 则表示两边都不允许有浮动对象，因此该盒子将 会在浏览器中另起一行显示
广义的“定位”：在网页排版中，如何将一个盒子放置在某 个位置上。
狭义的“定位”：CSS中有一个非常重要的属性position，之 前我们用过该属性，实现了背景图片的定位 在本讲中，我们介绍的是广义的“定位”：
绝对定位 相对定位
默认的属性值
position定位-1
position定位分为：绝对定位与相对定位。
position定位-2
通过上述几个案例的演示，总结如下：
1、position、top、left、z-index四个属性配合使用； 2、绝对定位时，该元素悬浮于页面之上，不再占据页面位置； 3、绝对定位的基准点是以父块为标准，从而界定top、left值； 4、相对定位时，元素依然占据自己原始页面位置，只不过看上去 位置相对于自身发生了偏移； 5、相对定位的基准点是以原始位置的原点为标准，从而界定top、 left值； 6、z-index值决定了绝对定位时，元素距离页面有多远，值越大， 距离页面越远。
案例演示
position从字面意思上看就是指定块的位置，即块相对于 其父块的位置和相对于它自身应该在位置。
常用属性： position:absolute; position:relative; left:50px; top:50px; z-index:1;
//绝对定位 //相对定位 //块原点距离父块左侧距离 //块原点距离父块顶部距离 //深度定位
1－3－1布局示意图
header container nav content body
side
pagefooter
千里之行 始于足下
18
本讲目标
盒子的浮动 盒子的定位 Z-index空间位置
盒子的display属性
新知识点导入
一切皆为框，如何打破文档流？如何随心所欲的排 版这些框框、盒子呢？ 今天我们来了解网页设计中重要的部分：
盒子的浮动
盒子的浮动
在标准流中，块级元素的盒子都是上下排列，行 内元素的盒子都是左右排列，如果仅仅按照标准 流的方式进行排列，就只有这几种可能性，限制 太大。CSS的制订者也想到了这样排列限制的问题 ，因此又给出了浮动和定位方式进行盒子的排列 ，从而使排版的灵活性大大提高。 例如：有时希望相邻块级元素的盒子左右排列（ 所有盒子浮动）或者希望一个盒子被另一个盒子 中的内容所环绕（一个盒子浮动）做出图文混排 的效果，这时最简单的办法就是运用浮动（float ）属性使盒子在浮动方式下定位。
在标准流中，一个块级元素在水平方向会自动伸 展，在它的父元素中占满整个一行；而在竖直方 向和其他元素依次排列，不能并排，如图4-62所 示。使用“浮动”方式后，这种排列方式就会发 生改变。 CSS中有一个float属性，默认值为none，也就是标 准流通常的情况，如果将float属性的值设为left或 right，元素就会向其父元素的左侧或右侧靠紧， 同时盒子的宽度不再伸展，而是收缩，在没设置 宽度时，会根据盒子里面的内容来确定宽度。
clear属性既可以用在未浮动的元素上，也可以用 在浮动的元素上，如果对Box-3同时设置清除浮动 和浮动，即： .son3{clear:both; float:left;}
总结：清除浮动是清除其它盒子浮动对该元素的 影响，而设置浮动是让元素自身浮动，两者并不 矛盾，因此可同时设置元素清除浮动和浮动