1.
2.sometext
3.
Somemoretext.p>
4.div>
5.
在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联。
块级元素的文本行也会发生类似的情况。
假设有一个包含三行文本的段落。
每行文本形成一个无名框。
无法直接对无名块或行框应用样式,因为没有可以应用样式的地方(注意,行框和行内框是两个概念)。
但是,这有助于理解在屏幕上看到的所有东西都形成某种框。
CSS定位机制
CSS有三种基本的定位机制:
普通流、浮动和绝对定位。
除非专门指定,否则所有框都在普通流中定位。
也就是说,普通流中的元素的位置由元素在X(HTML)中的位置决定。
块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。
可以使用水平内边距、边框和外边距调整它们的间距。
但是,垂直内边距、边框和外边距不影响行内框的高度。
由一行形成的水平框称为行框(LineBox),行框的高度总是足以容纳它包含的所有行内框。
不过,设置行高可以增加这个框的高度。
在下面,我们会为您详细讲解相对定位、绝对定位和浮动。
CSSposition属性
通过使用position属性,我们可以选择4中不同类型的定位,这会影响元素框生成的方式。
position属性值的含义:
◆static
元素框正常生成。
块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
◆relative
元素框偏移某个距离。
元素仍保持其未定位前的形状,它原本所占的空间仍保留。
◆absolute
元素框从文档流完全删除,并相对于其包含块定位。
包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。
元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
绝对定位描述如下:
1、使用绝对定位的盒子以它的“最近”的一个“已定位”(position属性被设置,并且被设置为不是static的任意一种)的“祖先元素”为基准进行偏移。
如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。
2、绝对定位的框从标准流中脱离,这意味着它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样。
◆fixed
元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身。
fixed总是以body为定位时的父容器对象,总是根据浏览器的窗口来进行元素的定位,通过"left"、"top"、"right"、"bottom"属性进行定位。
提示:
相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
当我们需要使一个层相对于浏览器来自动调整该层的位置的时候,如果你使用position的absolute属性来定位该层,你会发现absolute属性并不能达到你想要的css效果,。
这时,就需要要用到fixed属性来定位该层了,当然,你如果不想用fixed属性的话,你是可以使用JavaScript语句来代替的。
(差别:
fixed定位是调整,abosulte是飞地;fixed的父容器是body,而absolute是其上一级容器(直至body);fixed将定位的块按在了规定的位置,哪怕父容器会滚动都不受影响(不随父动),而absolute会被影响(随父动);--我的简单理解)
CSS定位属性
CSS定位属性允许你对元素进行定位。
属性描述
position把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow设置当元素的内容溢出其区域时发生的事情。
clip设置元素的形状。
元素被剪入这个形状之中,然后显示出来。
vertical-align设置元素的垂直对齐方式。
z-index设置元素的堆叠顺序。
Display元素:
基本形状
1、行内元素(display:
inline):
没有高宽属性,不能设置高宽,元素形状大小由包含的内容决定,例如 span
2、块状元素(display:
block):
有高宽属性,独占一行,例如 div
3、行内块状(display:
inline-block):
有高宽属性,如果没有设置高宽,元素形状大小由包含的内容决定,不会独占一行,例如 input、button
4、隐藏元素(display:
none):
具有该属性值的元素不会显示出来也不占据布局空间
5、其他例如 display:
table-cell 等属性值可以看做以上属性的扩展,会具有某些特性
6、低于 IE8 ,不支持 inline-block ,但是IE 可以通过一些属性来触发元素的块状布局属性(hasLayout),
最常见的就是 zoom:
1;(放大为1倍,就是没有放大,因此这个属性没有其他副作用),
zoom:
1 结合 display:
inline 可以在低版本IE下达到 display:
inline-block; 的效果
元素布局文档流:
1、默认情况下,相邻的文档元素根据先后顺序从左到右,从上到下,按照 display 属性来布局元素(分行或不分行);
2、脱离文档流的元素:
定位属性 position 的属性值为 absolute、fixed 的元素会脱离文档流
3、如果元素没有定义高度,元素所包含的内容会把元素撑开,但是脱离文档流的元素不会占据父元素的布局空间因此无法撑开父元素高度,浮动元素仍占据父元素的布局空间,但无法撑开父元素的高度
定位(position):
1、默认定位(position:
static):
这是默认值,根据先后顺序从左到右,从上到下显示,不做任何偏移
2、相对自身偏移(position:
relative):
根据先后顺序从左到右,从上到下布局后,再根据 top、left 的值做偏移,偏移是以自身 static 时的位置的左上角做参照的
3、绝对定位(position:
absolute):
具备该属性值的元素将脱离文本流,不再按从左到右,从上到下顺序布局,其同辈元素不再影响其布局位置,该元素以 position 属性值不为 static 的祖先元素的左上角为参照,根据 top、left 的值做偏移,如果没有符合条件的祖先元素,则以body元素的左上角作参照,另外,position:
absolute 的元素会自动获得高宽属性(span等行内元素)。
4、固定定位(position:
fixed):
以浏览器视窗左上角做参照根据 top、let 的值做偏移,不会随滚动条移动,低于 IE8 不支持。
5、top、left 是在元素间的相对位置确定后对自身元素位置的修正,不会再影响文档流布局,即 position:
static、position:
relative 的元素不会因为 top、lef 影响父元素的表现(滚动条、撑开的高度)和同辈元素的布局(同辈元素位置)
6、position 的 top left 偏移 与 margin-top 、margin-left :
margin 可以与 position 叠加,margin 会影响元素块的布局位置,potision 的 top left 偏移不会改变元素块的布局位置,比较一下下面 2 个例子,可以看到,例子2 在偏移后, 其偏移之前所占据的排版空间仍然被他占用。
例1:
left;width:
100px; height:
800px; background:
#765432;">
left; position:
relative; margin-left:
-20px;width:
50px;height:
200px;background:
#558823;">
left;width:
100px; height:
800px; background:
#765432;">
例2:
left;width:
100px; height:
800px; background:
#765432;">
left; position:
relative; left:
-20px;width:
50px;height:
200px;background:
#558823;">
left;width:
100px; height:
800px; background:
#765432;">
浮动(float):
1、不浮动(float:
none):
这是元素的默认浮动值
2、左浮动(float:
left):
向左浮动
3、右浮动(float:
right):
向右浮动
4、继承(float:
inherit):
使用父元素的 float 属性值,低于 IE8 不支持
5、清除左浮动(clear:
left):
元素左侧不允许出现浮动元素
6、清除右浮动(clear:
right):
元素右侧不允许出现浮动元素
7、清除两侧浮动(clear:
both):
元素两侧不允许出现浮动元素
8、清除浮动对于 block 元素才有意义,使block 元素与浮动元素之间折行布局
9、浮动元素对自身的影响:
浮动元素将按 inline-block 形式布局(haslayout),即使将他设置为 display:
inline;,因此,默认宽度自动扩展为100%的元素浮动之后,宽度由元素内容撑大,原来没有高宽属性的元素也变得可以定义高宽;如果出现重叠,浮动元素将叠加在非浮动的同辈元素之上(像是具有更大的z-index值);在IE 67 ,子元素如果是浮动的,则其 margin-bottom 值被忽略;IE 6 下最靠边的一个浮动元素具有双边距,即 float:
left ,则最左边的浮动元素具有双倍 margin-left,float:
rigth 则最右边的浮动元素具有双倍 margin-right,加上 display:
inline 可以消除双边距BUG,而且浮动元素仍是块状布局。
10、浮动元素对同辈元素的影响:
浮动元素的布局是基于文档流的,不会完全脱离文档流,按元素节点在文档中出现的顺序,依次向float定义的方向浮动,直到遇到父元素边界或另一个浮动元素,浮动元素的垂直边距(margin)不会叠加;
可以认为父元素内存在正常文档流和浮动文档流(包括左浮动和右浮动),两条文档流出现交叉的时候,浮动文档流将被打断,但默认布局文档流不会被打断(IE6 7 会被打断),因此, display:
block 的非浮动子元素看起来像是默认具有 clear:
right 效果(block 的分行效果仍生效)。
因此,如果浮动元素在非浮动元素之前开始布局(按节点顺序),两条文档流就出现了重叠,如果没有设置z-index(注意 z-index 仅作用于 position 不是 static 的元素,且只影响同辈元素的层级关系),而且非浮动元素的 position 不是 static,则非浮动元素被浮动元素遮盖(IE 6 7 下不会,默认文档流被打断,而浮动元素不会导致分行,因此他们会布局在同一行),如果非浮动元素 position 是 static ,则浮动元素在上覆盖掉非浮动元素;
在IE 6 下,如果一个左浮动的元素紧跟着一个非浮动按 block 布局的元素,这两个元素不会重叠,而是布局在一行,而且两个元素之间有 3px 的间隔,消除3px BUG 方法是设置右侧的元素 position:
relative;left:
-3px;
在同辈的浮动元素中,同向浮动的元素布局是有先后次序的;
不管浮动方向是否一致,如果父元素宽度不够,浮动元素会折行布局(不同浮动方向的元素不会因为父元素宽度不够而导致部分叠加);
浮动元素不会对父元素外的元素产生影响。
11、浮动元素对父元素的影响:
浮动元素的父元素丢失 block 高度,即使定义了高度,也无法影响其同辈浮动元素及其浮动的子元素的布局,默认情况下,如果父元素没有定义高度,则父元素的内容会撑开父元素,达到自适应 block 高度的效果,浮动元素无法撑开其父元素的block 高度,因此,如果父元素的同辈元素有浮动属性,父元素内的子元素也有浮动属性,父元素也没有清除两侧浮动,则浮动的子元素和父元素的同辈浮动元素的关系看起来像是同辈的浮动元素一样,即,浮动元素会与非浮动且不脱离文档流的兄弟元素(及其后代元素)中所包含的浮动元素形成一个浮动文档流,这可能不是你想要的,于是,你需要做一些修补来使父元素的高度能够确定其 block 范围从而影响布局。
12、如何使浮动元素撑开父元素的高度:
将父元素设置成浮动可以使其默认高、宽自适应于其内容、插入一个空的子节点并设置该空节点为clear:
both 、设置父元素的 overflow 样式属性(不能是 visible)、设置父元素为 display:
inline-block ,
这几种方式可能带来你不想要的副作用,在低于IE 8 的IE 浏览器可以使用 zoom:
1 来实现而且没有副作用,
在 IE8 以上和firefox浏览器,使浮动元素撑开父元素高度又没有副作用反而变得不太可能,下面是一种方式使用伪元素来实现的修补
.clearfix:
after {
content:
"";
display:
block;
clear:
both;
height:
0px;
visibility:
hidden;
border:
0px none;
}
父元素应用 clearfix 类后可以被浮动的子元素撑开高度,其中伪元素的 content:
""、display:
block 和 clear:
right 或 clear:
both 是必需的,另外几个样式是为了让伪类不被显示出来
这个方法会使父元素具有 clear:
right;的效果,但是,如果同样地设置 before 伪元素却不能使父元素具有 clear:
left 的效果;
.clearfix:
before {
content:
"";
display:
block;
height:
0px;
clear:
both;
visibility:
hidden;
border:
0px none;
}
因此,使父元素能被浮动子元素撑开又保持 block 块状布局的解决办法是,设置 .clearfix:
after 和 .clearfix{ clear:
both; zoom:
1; }
使父元素满足下面的条件的解决方法似乎没有(有知道的麻烦告知一下):
保持 display:
block,clear:
left( not both);
能被浮动子元素撑开高度
没有副作用(不增加额外元素,不使用 overflow,不使用 float, 可以利用伪元素)
给父元素设置 overflow(或 overflow-left 、 overflow-y) 是不错的选择,因为无论属性值是 auto 、scroll 、hidden 都可以达到修复目的,但是 visible 不行,默认情况下设置 overflow:
auto 即可。
13、position 对 float 的影响:
float可以说是定义同辈元素之间的位置关系,浮动元素相对于父元素,其位置的定义是确定不变的的:
基于position:
static/relative时的位置,向左侧或右侧靠近(一个可能的错误的认识是,浮动元素会向左上角或右上角浮动),因此,position:
static 和 position:
relative 与 float 的效果可以叠加, 但 position:
absolute、position:
fixed 这两个定位属性依赖于自身元素之外的参照,将使 float 的效果无法表现出来。
14、浮动元素对文本的影响:
浮动概念的基础是图文混排,因此同辈元素的在排版时如果浮动元素与非浮动元素之间发生覆盖,无论是谁覆盖谁,非浮动的元素内的文字将会被挤走,如下例:
.elm{ width:
100px; height:
50px;background:
green; border:
1px solid red; }
.lf{float:
left; }
========================= 一些测试 =========================
/*
.clearfix:
after {
content:
"";
display:
block;
height:
0px;
clear:
both;
visibility:
hidden;
border:
0px none;
}
*/
.clearfix {zoom:
1; clear:
both; overflow-y:
auto;scroll; }
.elm{width:
100px; height:
50px;background:
green; border:
1px solid red; }
.lf{float:
left;}
.rf{float:
right;}
.box{border:
1px solid black; width:
400px; background-color:
red; }
.pos{position:
relative; top:
-10px;left:
-10px;}
6
no float
6
-1
0
6
6
both; margin:
0px;" />
6
no float
6
both; margin:
0px ;" />
inline-block;background-color:
red;">
xxx
yyy
ZZZ
常用转义符(
转义符大全:
常见的各种定位模板:
学会DIV+CSS布局的学习文档下载: