CSS之盒子的浮动与定位
CSS浮动属性Float详解
CSS浮动属性Float详解什么是浮动？浮动是 css 的定位属性。
我们可以看一下印刷设计来了解它的起源和作用。
印刷布局中，文本可以按照需要围绕图片。
一般把这种方式称为“文本环绕”。
这是一个例子：在排版软件里面，存放文字的盒子可以被设置为允许图文混排，或者无视它。
无视图文混排将会允许文字出现在图片的上面，就像它甚至不会在那里一样。
这就是图片是否是页面流的一部分的区别。
网页设计与此非常类似。
在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。
浮动的元素仍然是网页流的一部分。
这与使用绝对定位的页面元素相比是一个明显的不同。
绝对定位的页面元素被从网页流里面移除了，就像印刷布局里面的文本框被设置为无视页面环绕一样。
绝对定位的元素不会影响其它元素，其它元素也不会影响它，无论它是否和其它元素挨着。
像这样在一个元素上用CSS设置浮动：#sidebar { float: right; }fload属性有四个可用的值：Left 和Right 分别浮动元素到各自的方向，None (默认的) 使元素不浮动，Inherit 将会从父级元素获取float值。
浮动的用处除了简单的在图片周围包围文字，浮动可用于创建全部网页布局。
浮动对小型的布局同样有用。
例如页面中的这个小区域。
如果我们在我们的小头像图片上使用浮动，当调整图片大小的时候，盒子里面的文字也将自动调整位置：同样的布局可以通过在外容器使用相对定位，然后在头像上使用绝对定位来实现。
这种方式中，文本不会受头像图片大小的影响，不会随头像图片的大小而有相应变化。
清除浮动清除(clear)是浮动(float)的相关属性.一个设置了清除浮动的元素不会如浮动所设置的一样，向上移动到浮动元素的边界，而是会忽视浮动向下移动。
如下，一图顶千言。
上例中，侧栏向右浮动，并且短于主内容区域。
页脚(footer)于是按浮动所要求的向上跳到了可能的空间。
css不占空间的浮动方法
css不占空间的浮动方法
CSS浮动是网页布局中常用的效果之一，它可以让元素脱离正常文档流，向左或向右移动，直到它遇到另一个元素或边界。
要实现不占空间的浮动，可以使用以下方法：
1. 使用绝对定位：将浮动元素设置为绝对定位，这样它就不会占用文档流中的空间。
可以使用`position: absolute;`属性来实现。
2. 使用负外边距：通过给浮动元素添加负外边距，可以将其从文档流中“挤出”，使其不占用任何空间。
可以使用`margin-top: -10px;`和`margin-bottom: -10px;`等属性来实现。
3. 使用伪元素和绝对定位：通过将浮动元素设置为伪元素，并将其设置为绝对定位，可以实现不占空间的浮动效果。
例如，可以使用`::before`或`::after`伪元素和`position: absolute;`属性来实现。
4. 使用flex布局：使用flex布局可以将元素不占空间地浮动起来。
通过设置父元素的`display: flex;`属性，可以使其子元素浮动而不占用空间。
以上是几种实现CSS不占空间的浮动方法，可以根据具体需求选择适合的方法来使用。
有几种定位方式？分别是如何实现定位的？参考点是什么？使用场景是什么？
有⼏种定位⽅式？分别是如何实现定位的？参考点是什么？使⽤
场景是什么？
CSS 有三种基本的定位⽅式：⽂档流、浮动和定位。
⽂档流(normal flow)：⽂档流是所有元素布局的基础，作为从左到右、从上到下的布局⽅式，这是最常⽤的⼀种排版布局⽅式。
浮动(float)：float:left/right；浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另⼀个浮动框的边框为⽌。
由于浮动框不在⽂档的普通流中，所以⽂档的普通流中的块框表现得就像浮动框不存在⼀样。
适⽤于实现⽂字环绕图⽚和多列布局。
定位(position)有以下四种⽅式：
定位⽅
实现⽅式使⽤场景式
static默认布局，按照⽂档流定位；默认布局；
relative相对于元素⾃⾝正常位置进⾏定位，元素在⽂档流中仍占据原来空间，只是表现出来的位置
适⽤于层叠效果；
会相对原来的位置偏移；
absolute绝对定位，相对于有定位属性的第⼀个⽗元素偏移，absolute定位元素会脱离⽂档流；适⽤于⼩区块的布局使⽤频繁
fixed相对浏览器窗⼝定位，设置的偏移属性，是相对于浏览器窗⼝的位置。
适⽤于⼴告等意图⼀直出现在⽤户眼
前的信息。
CSS3浮动与定位
✎ 6.3 知识点讲解
1、元素的类型
（2）行内元素 行内元素也称内联元素或内嵌元素，其特点是，不必在新的一行开始，同 时，也不强迫其他的元素在新的一行显示。一个行内元素通常会和它前后的其他 行内元素显示在同一行中，它们不占有独立的区域，仅仅靠自身的字体大小和图 像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面 中文本的样式。 常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、 <u>、<a>、<span>等，其中<span>标记是最典型的行内元素。
✎ 6.3 知识点讲解
1、元素的类型
（1）块元素 块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自 占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局 和网页结构的搭建。 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div>标记是最典型的块元素。
相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属 性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后， 可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。
✎
✎ 6.4 知识点讲解
3、相对定位relative
相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属 性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后， 可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。
《网页设计》课件——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盒子模型定位方式的研究与应用摘要：在web标准设计模式下，div+css布局方式与传统的表格排版相比有了本质的区别，实现了样式与内容的分离，而且使网页代码简洁，维护方便。
css定位是其应用的难点，下面对css盒模型常用的几种定位方式进行研究和应用分析。
关键词：盒子模型；css布局；定位中图分类号：tp393.092文献标识码：a文章编号：1007-9599 (2013) 06-0000-02级联样式表简称为css，还被称为风格样式表，由名字中我们就可以看出，它是用来进行网页风格设计的。
如果将其和传统的html 相比较看来，css可以对网页中的各个目标的位置排版进行精确的控制和管理，其精确的控制管理程度可以达到像素级别，css可以对网页目标的模型样式进行编辑和管理，除此之外，还可以进行初步的交互设计工作，功能比较的丰富多样，也比较的强大，css是当今最令人满意的表现设计语言。
1盒子模型1.1关于盒子模型的简单叙述盒子模型是说我们可以将各种html标签都看成一个个的盒子，这些html标签可以发挥盒子的功能，将网页上的不同元素装入其中，就像是汉字、符号、等等，除此之外，还能够嵌套另一个css 盒子。
一个盒子模型由内至外由content（内容），padding（填充），border(边框)，margin(边界)四部分组成，如图1-1所示。
图1-1我们能够将其看成现实生活中上方开口的普通小盒子，然后从盒子的正上方向下看盒子，我们可以将边框当作盒子的厚度，我们将盒子的填充物看作具有良好防震功能的塑料泡沫，边界和内容就更好理解了，我们将边界当作盒子需要取出时所留下的空间，内容就当作这个虚拟小盒子能够装载物体的空间就可以了，这样的理解和比喻比较的直白，可以让人们产生很好的立体思维。
如此看来，盒子模型在具体的页面中占据的宽度就是左边界+左边框+左填充+内容+右填充+右边框+右边界几部分共同构成的，但是在css中width所代表的宽度则没有这么的复杂，它只是代表了盒子中内容部分的宽度。
08 CSS高级 - 全
需要使用display属性切换的情况
1. 2. 3. 4. 5. 让一个inline元素从新行开始；（block） 让块元素和其他元素保持在一行上；（inline） 控制inline元素的宽度;（block） 控制inline元素的高度（对导航条特别有用）block 无须设定宽度即可为一个块元素设定与文字同宽的 背景色 （inline）
网页的固定宽度1-3-1布局 在默认情况下，div作为块级元素是占满整行从上 到下依次排列的，但在网页的分栏布局中，例如 1-3-1固定宽度布局，我们希望中间三栏（三个div 盒子）从左到右并列排列，这时就需要将这三个 div盒子都设置为浮动。 但三个div盒子都浮动后，只能浮动到窗口的左边 或右边，无法在浏览器中居中，因此需要在三个 div盒子外面再套一个盒子（称为container），让 container居中，这样就实现了里面的三个div盒子 居中
改变行内元素的高度
如图所示，当增加行内元素的边界和填充时，行内元素a占据 浏览器的高度并没有增加，下面这个div块仍然在原来的位置， 导致行内元素盒子的上下部分重叠，而左右部分不会受影响
display属性
通过display属性可控制元素是以行内元素显示还是以 块级元素显示，或不显示 display:block | inline | none | list-item
嵌套盒子之间的margin
盒子在标准流中的定位原则
嵌套盒子之间的margin
嵌套盒子在IE和Firefox中的不同显示
当一个块元素包含在另一个块元素中时，若对父块设置高 度，但父块的高度不足以容纳子块时，IE将使父块的高度 自动伸展，达到能容纳子块的最小高度为止；若同时设置 了子块高度，IE有时使子块高度自动压缩，直到能容纳内 容的最小高度为止。而Firefox对父块和子块均以定义的高 度为准，父块高度不会伸展，任其子块露在外面，子块高 度也不会压缩。
HTML5+CSS3网站设计浮动与定位
第6章浮动与定位《HTML5+CSS3网站设计基础教程》学习目地/Target理解元素地浮动,能够为元素设置浮动样式。
熟悉清除浮动地方法,可以使用不同方法清除浮动。
掌握元素地定位,能够为元素设置常见地定位模式。
章节概述/Summary默认情况下,网页地元素会按照从上到下或从左到右地顺序一一罗列,如果按照这种默认地方式进行排版,网页将会单调,混乱。
为了使网页地排版更加丰富,合理,在CSS可以对元素设置浮动与定位样式。
本章将对元素地浮动与定位进行详细讲解。
目录/Contents01元素地浮动02元素地定位03元素地类型与转换04阶段案例—制作网页焦点图01元素地浮动初学者在设计一个页面时,通常会按照默认地排版方式,将页面地元素从上到下一一罗列。
这样地布局看起来呆板,不美观,那么,如何对页面重新排版,使页面变得整齐,有序呢？这就需要为元素设置浮动。
本节将对元素地浮动进行详细讲解。
掌握元素地浮动属性float地用法,能够设置元素地浮动。
学习目地1.元素地浮动属性float1.元素地浮动属性float究竟是什么是浮动？应用排列图文排列论坛分享说到浮动,其实大家并不陌生1.元素地浮动属性float浮动属性作为CSS地重要属性,在网页布局至关重要。
在CSS,通过float属性来定义浮动,所谓元素地浮动是指设置了浮动属性地元素会脱离标准文档流地控制,移动到其父元素指定位置地过程。
选择器{float:属性值;}属性值描述left元素向左浮动right元素向右浮动none元素不浮动（默认值）掌握清除浮动地方法,能够为元素清除浮动。
学习目地2.清除浮动2.清除浮动2.清除浮动由于浮动元素不再占用原文档流地位置,所以会对页面其它元素地排版产生影响,如果要避免这种影响,就需要对元素清除浮动。
2.清除浮动在CSS,使用clear属性清除浮动。
选择器{clear:属性值;}属性值描述left不允许左侧有浮动元素（清除左侧浮动地影响）right不允许右侧有浮动元素（清除右侧浮动地影响）both同时清除左右两侧浮动地影响2.清除浮动运用clear属性只能清除元素左右两侧浮动地影响。
第8讲 CSS页面布局设计
图1.1 盒子模型 4
• 元素框的最内部分是实际的内容，直接包围内容的是 内边距。内边距呈现了元素的背景。内边距的边缘是 边框。
• 边框以外是外边距，外边距默认是透明的，因此不会 遮挡其后的任何元素。
• 背景应用于由内容和内边距、边框所组成的区域。 • 内边距、边框和外边距都是可选的，默认值是零。 • 在 CSS 中，width 和 height 指的是内容区域的
• 虽然有方法解决这个问题。但是目前最好的解决方案
是回避这个问题。也就是，不要给元素添加具有指定宽
度的内边距，而是尝试将内边距或外边距添加到元素的
父元素和子元素。
6
1. 盒子的边框
• 元素的边框 (border) 是围绕元素内容和内边距的 一条或多条线，它包围了盒子padding和内容，形 成盒子的边界。
宽度和高度。增加内边距、边框和外边距不会影响内 容区域的尺寸，但是会增加元素框的总尺寸。 5
浏览器兼容性
• 一旦为页面设置了恰当的 DTD（文档类型定义），大 多数浏览器都会按照上面的图示来呈现内容。
• 根据W3C的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值 是另外计算的。而IE5.X 和 6 在怪异模式中使用自己 的非标准模型。这些浏览器的 width 属性不是内容宽 度，而是内容、内边距和边框的宽度的总和。
•为上面的链接定义了如下样式：
a:link, a:visited {border-style: solid;border-width: 5px;border-color: transparent;}
a:hover {border-color: gray;}
divcss盒子之绝对定位和相对定位
1．定位的专业解释(1)语法position : static | absolute | fixed | relative(2) 说明绝对定位（absolute）、相对定位（relative）。
绝对定位（absolute）：将被给予此定位方式的对象从文档流中拖出，利用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，若是对象的父级没有设置定位属性，即仍是遵循HTML定位规则的，则依据body 对象左上角作为参考进行定位。
绝对定位对象可层叠，层叠顺序可通过z-index 属性控制，z-index值为无单位的整数，大的在最上面，能够有负值（目前负值FF不支持）。
相对定位（relative）：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。
一样能够用z-index分层设计。
2．定位的形象解释我先来架设一个虚拟的场景：有一个矩形的房间，里面还有一个水桶装了些水，水里还浸泡着一个西瓜，那个房间半空中还有很多的钩子用于挂东西用。
此刻我把网页元素与上面物件对应上，那么房间就是一个网页，水桶是网页中的一个板块，桶中的水就是文本流，西瓜就是将要被定位的对象。
（1）奉献的绝对定位（absolute）对照前面解释，若是西瓜被给予绝对定位，那么就等于把西瓜从水中捞起来挂在半空中的钩子上，水桶中西瓜原来占用的空间水会自动填补它（绝对定位对象会让出自己原先占用位置，所以说它是奉献的）。
现在若是之前没有对水桶进行定位设定，那么被拿起的西瓜位置不会再受水桶位置影响，水桶怎么移动，西瓜仍是挂在原来位置，至于西瓜要怎放，则以房间左上角（body左上角）为准，用left，right，top，bottom值来定位。
可是若是水桶也给出了定位设置（一般是相对定位，下面有讲到这一实用技能），现在西瓜的摆放就没有那么自由了，虽然现在西瓜被拿起来了不会影响水桶中的水（文本流），但它仍是要听桶的话，桶会告知西瓜“你能够活动，但应该在我的范围内走动，例如说我要你在我左上方1米处，你就要跟死这一点，我走你也要随着走”，若是桶中有很多个西瓜，能够全数拿出来吊到半空中，它们将被安排在不同高度的空间（层），所以在房顶垂直往下看，有可能看到不同西瓜层叠在一路的情形（那个所谓的高度在网页中是不存在的，就像FLASH动画中的不同层上安排了元素，但它们在看时不会有深度感觉）。
CSS框模型、定位、浮动、显示和隐藏
CSS框模型（盒模型）、定位、浮动、显示和隐藏◆目标理解块元素和行内元素理解框模型掌握框模型的样式属性掌握定位属性掌握浮动属性掌握显示和隐藏属性◆内容1 块元素和行内元素块元素和行内元素的转换HTML常见的块元素和行内元素2框模型网页中的框框的特点框的样式属性3 定位4 浮动5 清除浮动6 显示和隐藏1 块元素和行内元素网页中的元素分为块元素和行内元素。
块元素成块状显示，独占行；行内元素不占满行，多个行内元素可在一行上显示。
块元素内能容纳其他的块元素和行内元素，行内元素内只能容纳行内元素。
◆块元素和行内元素的转换使用display（显示）属性，当设置标签的display属性值为block时，标签就呈块元素显示，当设置标签的display属性值为inline时，标签就呈行内元素显示。
一个网页就是大型的方框，里面包含着一大堆小方框。
◆网页中的框：块元素都是框（行内元素不是框，行内元素的高，宽都不能改变）。
框具有外边距、边框、、内边距和内容内容（content）：包含文字、图片、flash动画、应用程序、视频等内边距（padding）：内容和边框之间的距离边框（border）：盒的边界外边距（margin）：2个盒之间的空白，透明我们可以看到框模型的4个面：顶部（top）、右侧（right）、底部（bottom）和左侧（left）◆框的特点(1) 外边距和内边距只有宽度属性(2) 边框有大小和颜色之分，可以对每一条边框设置不同的样式(3) width和height定义的是内容的宽度和高度，而不是整个框的宽度和高度◆框的样式属性1内容的属性：widthheight2padding属性padding属性设置对象四边的内边距如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
（顺时针）如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下不允许负值设置对象四边的外边距检索或设置对象四边的外延边距。
htmlcss中float浮动的用法
htmlcss中float浮动的⽤法⼀、float基础⽤法⽰例
1、我们先建两个div盒⼦，设置⾼度、宽度和背景颜⾊；
最开始两个盒⼦在⽹页上的位置如下：
然后我们将红⾊盒⼦浮动到右边
然后我们会发现红⾊盒⼦浮动到了右边，但是蓝⾊盒⼦就直接上移到了原先红⾊盒⼦的位置。
然后我们将蓝⾊盒⼦也浮动到右边看看效果：
我们会发现它会紧跟着红⾊盒⼦排列，⽽不会受块级元素影响独占⼀⾏。
⼆、浮动定位的基本规则
1、当元素的float属性取值为left或right时，元素属于浮动定位;
2、若剩余空间⽆法放下浮动的盒⼦，则该盒⼦向下移动，直到具备⾜够的空间能容纳盒⼦，然后再向左或向右移动；
3、浮动盒⼦的顶边不得⾼于上⼀个盒⼦的顶边；
4、浮动盒⼦在摆放时，要避开常规流盒⼦；常规流盒⼦在摆放时，⽆视浮动盒⼦；
5、常规流盒⼦的⾃动⾼度计算时，⽆视浮动盒⼦
6、清除浮动：clear:both(左或右)。
浮动与定位_教学设计
传智播客《HTML5+CSS3网站设计基础教程》教学设计课程名称：HTML5+CSS3网站设计基础教程授课年级：2016年级授课学期：2016学年第一学期教师姓名：某某老师1201 年月日课题名称第6章浮动与定位计划课时8课时内容分析通过前面几章的学习，初学者不难发现，在默认情况下，网页中的元素会按照从上到下或从左到右的顺序一一罗列。
如果仅仅按照这种默认的方式进行布局，网页将会显得单调、混乱。
为了使网页的布局更加丰富、合理，可以在CSS中对元素设置浮动和定位属性。
本章将对元素的浮动和定位进行详细讲解。
教学目标●理解元素的浮动，能够为元素设置浮动样式。
●熟悉清除浮动的方法，可以使用不同方法清除浮动。
●掌握元素的定位，能够为元素设置常见的定位模式。
重点及措施教学重点：元素的浮动属性float、运用clear属性清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动、overflow属性、元素的定位属性。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施教学难点：元素的浮动属性float、overflow属性、元素的定位属性。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。
教学过程第一课时（讲解元素的浮动属性float、清除浮动）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第五章“CSS盒子模型”的相关知识。
1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px，同时盒子有3px的边框，请问这个盒子的总宽度是多少？（）A、333pxB、366pxC、336pxD、363px答案：C●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和；●所以，盒子的总宽度= width（300px）+左内边距（30px）+左右边框宽度之和（3px*2）=336px；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
常用的CSS属性的英文单词总结及用法、解释
2、边框
border-width -宽 ：控制边框的宽度，其中分为4个属性：border-top-width顶边框的宽度、border-right-width右边框的宽度、border-bottom-width底边框的宽度、border-left-width左边框的宽度。
blue 蓝色 bug 软件程序中的错误
body 主体，一个HTML 标记 building 建立
bold 粗体 button 按钮
anchor 锚记<a>标记是这个单词的缩写 anchor 锚记<a>标记是这个单词的缩写
arrow 箭头 arrow 箭头
auto 自动 auto 自动
text-align - 文本对齐：设置块的水平对齐方式。共有左对齐（left）、右对齐（right）、居中（center）和均分（justify）等4种选择。
text-indent - 文字缩进：控制块的缩进程度。
white-space -空白间距：在HTML中，空格是被省略的；在CSS中则使用属性（white-space）控制空格的输入。共有正常（normal）、保留（pre）和不换行（nowrap）等3种选择。
B
background 背景 border 边框
banner 页面上的一个横条 both 二者都是clear 属性的一个属性值
background-attachment - 附加：用于控制背景图像是否会随页面的滚动而一起滚动。有固定（fixd，文字滚动时，背景图像保质固定）和滚动（scroll，背景图像随文字内容一起滚动）两种选择。
禹神的css笔记
禹神的css笔记禹神是一个非常优秀的前端工程师，他在CSS方面也有非常深入的研究。
以下是他的一些CSS笔记：1. 盒模型：- 标准盒模型：width = 内容宽度(content width) + padding + border- IE盒模型：width = 内容宽度(content width) + padding + border + margin2. 盒子定位：- position: static; 默认值，按照正常文档流布局- position: relative; 相对定位，相对于元素原本的位置进行定位- position: absolute; 绝对定位，相对于最近的已定位父元素进行定位，如果没有已定位父元素，则相对于body进行定位- position: fixed; 固定定位，相对于浏览器窗口进行定位，不随滚动条滚动- z-index属性用于指定元素的叠放顺序3. 盒子显示与隐藏：- display: none; 隐藏元素, 不占据空间- visibility: hidden; 隐藏元素，但仍然占据空间- opacity属性可以调整元素的透明度4. 布局：- float属性可以使元素浮动左或浮动右，可以实现多栏布局- clear属性用于设置元素的边不能与之前浮动过的元素相邻5. 文本样式：- text-align属性用于调整文本的对齐方式- text-decoration属性用于给文本添加下划线、删除线等效果 - word-wrap属性可以使长单词或URL在超过容器宽度时自动换行6. 颜色和背景：- color属性设置文本颜色- background-color属性设置背景颜色- background-image属性可以添加背景图片7. 字体和字号：- font-family属性设置字体类型- font-size属性设置字体大小- line-height属性设置行高以上只是禹神CSS笔记的一小部分内容，他在CSS方面的知识非常丰富，可以参考他的博客或视频教程获取更多的学习资料。
float css用法
float css用法
CSS中的float属性用于指定一个元素的浮动方式，即元素相
对于其容器的浮动位置。
float属性有以下几种用法：
1. float: left;：指定元素向左浮动，将元素放到容器的左侧，其他内容将围绕在其右侧。
2. float: right;：指定元素向右浮动，将元素放到容器的右侧，
其他内容将围绕在其左侧。
3. float: none;（默认值）：不浮动元素，元素将按照文档流的
顺序排列，不会影响其他元素的位置。
4. float: inherit;：继承父元素的浮动方式。
浮动元素会脱离普通文档流，浮动后的元素不再占据原有位置，如果浮动的元素与其他元素重叠，则会根据元素的顺序进行覆盖。
浮动元素可能会造成容器塌陷，即容器的高度塌陷为0。
这时
可以通过清除浮动来解决，可以使用clear属性来清除前面的
浮动。
例如，设置clear: both; 可以清除前面的左浮动和右浮动。
CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
CSS布局之脱离⽂档流详解——浮动、绝对定位脱离⽂档流的区别准确的说，float浮动属于半脱离⽂档流，1、float浮动跟position:absolute⼀样拥有脱离⽂档流的功能，但是float虽然脱离了⽂档流但是仍然会占据位置，其他的⽂本内容会按照顺序继续排列——如果你对所有的元素都设置了浮动，你会看到这⼏个div并不会重叠，⽽是会顺序排列。
可以参考设置display:none,跟visible:hidden的效果。
其他盒⼦看不见被float的元素，但是其他盒⼦⾥的⽂本看得见float浮动：1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>浮动float和absolute区别</title>6<style>7 .box{8 width: 500px;9 height: 300px;10 border: 1px solid black;11 margin: 0 auto;12 position: relative;13 }14 .first {15 width: 150px;16 height: 100px;17/*float: left;*/18 display: inline-block;19 background: pink;20 border: 10px solid red; /*增加了边框*/21 }22 .second {23 width: 100px;24 height: 100px;25 background: blue;26 display: inline-block;27 float: left; /*只设置⼀个浮动*/28 }29 .third{30 width: 50px;31 height: 100px;32/*float: left;*/33 display: inline-block;34 background: green;35 }36</style>37</head>3839<body>40<div class="box">41<div class="first">123</div>42<div class="second">456</div>43<div class="third">789</div>44</div>45</body>46</html>效果图：将第27⾏设置改成position:absolute;如下图将第27⾏设置改成position:absolute;加上left:0；如下图例⼦3.脱离⽂档流对⽐1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>浮动float和absolute区别</title>6<style>7 .box{8 width: 500px;9 height: 300px;10 border: 1px solid black;11 margin: 0 auto;12 position: relative;13 }14 .first {15 width: 150px;16 height: 100px;17/*float: left;*/18 display: inline-block;19 background: pink;20 border: 10px solid red; /*增加了边框*/21 }22 .second {23 width: 100px;24 height: 100px;25 background: blue;26 display: inline-block;27 position: absolute;28 left:0;29 opacity: 0.830/*float: left;*/3132 }33 .third{34 width: 50px;35 height: 110px;36 float: left;37 display: inline-block;38 background: green;39/*position: absolute;*/40 }41</style>42</head>4344<body>45<div class="box">46<div class="first">123</div>47<div class="second">456</div>48<div class="third">789</div>49</div>50</body>51</html>absolute是脱离⽂档流优先级更⾼浮动解析<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.box{width:500px;height:500px;border: 5px solid green;} .first {width: 200px;height: 200px;border: 3px solid red;float:left; /*左浮动*/}.second {width: 150px;height: 100px;border: 3px solid blue;}.third{width: 110px;height: 100px;border: 3px solid grey;float:left; /*左浮动*/}</style></head><body><div class="box"><div class="first">123</div><div class="second">456</div><div class="third">789</div></div><div>我是⽂字</div></body>效果图：图中 第⼀个元素红⾊边框——左浮动 第⼆个元素蓝⾊边框 第三个元素灰⾊边框——左浮动注：浮动的意思就是脱离⽂档流，什么是浮动脱离⽂档流呢？顾名思义，浮动就是相当于把元素漂浮在没有设置浮动元素的上⽅（就好⽐如没浮动的代表⼤地，浮动则相当于⽩云⼀样漂浮在天空，⽽⾃⼰则是在⽐⽩云更⾼的⾼度俯瞰⼤地，你俯视哦那块地被⽩云遮住了，你只能看到⽩云却看不到⼤地，这就是浮动），从图中就可以看出蓝⾊边框被红⾊边框覆盖掉，怪异的是没浮动的⽂字内容跑到了浮动之外，通过这些你⼤概也清楚了吧，float跟absolute都是脱离⽂档流的区别。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
实验六 全部向左浮动
• 实例：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>
• • • • 实例：float_clear_left.html 实例： float_clear_right.html 观察结果 注意：对clear属性的设置要放在文字所在 的盒子里，而不要放到对浮动盒子的设置 里面。
实验八 扩展盒子的高度
• 实例：float_box_height.html • 观察结果 • 说明：包含浮动DIV的容器不会适应高度。 一个DIV盒子的高度是由它里面的标准流内 容决定的，与里面的浮动内容无关。 • 改进：float_box_height_new.html
三、盒子的display属性
• 可以使用 display 属性改变生成的框的类型。 这意味着，通过将 display 属性设置为 block， 可以让行内元素（比如 <a> 元素）表现得像 块级元素一样。还可以通过把 display 设置 为 none，让生成的元素根本没有框。这样 的话，该框及其所有内容就不再显示，不 占用文档中的空间。
CSS之盒子的浮动与定位
一、盒子的浮动
• 在标准流中，一个块级元素会自动伸展， 直到包含它的元素的边界。 • CSS中有一个float属性，默认为none，即标 准流通常的情况。 • 如果将float属性设置为left或right，元素就 会向其父元素的左侧或右侧靠紧，同时， 盒子的宽度不再伸展，而是根据盒子里内 容的宽度来决定。
• 设置为绝对定位的元素框从文档流完全删 除，并相对于其包含块定位，包含块可能 是文档中的另一个元素或者是初始包含块。 元素原先在正常文档流中所占的空间会关 闭，就好像该元素原来不存在一样。元素 定位后生成一个块级框，而不论原来它在 正常流中生成何种类型的框。
2.3 绝对定位absolute
• 准备实例：absolute_position.html
• 实例：float_son2.html • 观察结果 • 注意：box-3的左边框与box-1的左边框是重 合的。
实验三 设置第3个浮动的div
• 实例：float_son3.html • 观察结果
实验四 改变浮动的方法
• 实例：float_right.html • 观察结果
实验五 再次改变浮动的方向
一、浮动
• 浮动的框可以向左或向右移动，直到它的 外边缘碰到包含框或另一个浮动框的边框 为止。 • 由于浮动框不在文档的普通流中，所以文 档的普通流中的块框表现得就像浮动框不 存在一样。
二、盒子的定位
• 定位的基本思想很简单，它允许你定义元 素框相对于其正常位置应该出现的位置， 或者相对于父元素、另一个元素甚至浏览 器窗口本身的位置。 • 通过使用 position 属性，我们可以选择 4 种 不同类型的定位 ：
– Static、relative、absolute、fixed
2.1 static静态定位
• 元素框正常生成。块级元素生成一个矩形框， 作为文档流的一部分，行内元素则会创建一个 或多个行框，置于其父元素中。 • 实例：（两个没有设置Position属性的盒子） no_position.html
2.2 relative相对定位
• 绝对定位使元素的位置与文档流无关，因 此不占据空间。这一点与相对定位不同， 相对定位实际上被看作普通流定位模型的 一部分，因为元素的位置相对于它在普通 流中的位置。
2.3 绝对定位absolute
2.3 绝对定位absolute
• 实例：absolute_position_1.html • 说明：
2.2 relative相对定位
2.2 relative相对定位
• 结论：
– 使用相对定位的盒子，会相对于它原本的位置， 通过偏移指定的距离，到达新的位置。
– 使用相对定位的盒子仍在标准流中，它对父亲 和兄弟盒子都没有任何影响。
– 即使对浮动的盒子使用相对定位，作用也和上 面描述的一致。
2.3 绝对定位absolute
2.4 z-index空间位置
• z-index属性用于调整定位时重叠块的上下位 置。 z-index值大的页面位于值小的上方。 • z-index的值为整数，可正可负。默认的zindex为0。 • 当两个块的z-index值一样时，保持原有的高 低覆盖关系。
• 设置图像的 z-index： img { position:absolute; left:0px; top:0px; z-index:-1; }
• 说明：绝对定位的框从标准流中脱离，它 对其后的兄弟盒子的定位没有影响。
2.3 绝对定位absolute
• 特殊性质：如果绝对定位的盒子没有设置 某个偏移量，则该方向坐标保持不变。即 维持原来的位置。利用这个性质，可使某 个盒子脱离标准流，但仍保持在原来的位 置。 • 实例：absolute_position_3.html