第十章浮动和定位

最新推荐文章于 2023-01-02 21:27:42 发布

lovedlyl

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量309

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/lovedlyl/article/details/50686905

版权

css 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

第十章浮动和定位

1.浮动 float
值：left right none inherit
初始值：none
继承性：无
应用于：所有元素
说明：
1.浮动元素会从文档流中删除，但依然影响页面布局。
2.一个元素浮动后，周围元素会“环绕”该元素，如img。
3.浮动元素的外边距不会与周围元素的外边距发生合并。

4.浮动元素内幕：（以下所称边界为内容边界，不含padding）
a.浮动元素会自动生成一个块级框。
即使行内非替换元素也是如此，只要它浮动，就会生成一个块级框。
就会像像块级元素那样表现和摆放（如div一样），不过不同的是周围元素
会围绕该元素。所以对浮动元素设置display:block没有必要。

b.规则
水平方向：
如果左浮动，不能超过包含块的左边界；如果右浮动，不能超过包含块的右边界。
左浮动时，如果左边有一个左浮动元素，则其左边界紧挨前一个元素的右边界，或者如果超出包含块，则其上边界紧挨前一个浮动元素的下边界；向右浮动同理。
左浮动元素的右边界，不会在其右边右浮动元素的的右边；右浮动同理。

垂直方向：
不同于气球，浮动元素不能向上一直浮动，最多到包含块内部顶端。
浮动元素不能比原始文档流中之前的浮动元素或块级元素更高。
如果原文档流中一个浮动元素出现了另一个元素，则浮动元素的顶端不能比包含该元素生成的任何行框更高。
如果相邻元素同时浮动，且它们宽度之和大于包含块宽度，则位于后面的元素会自动下移，以免超出包含块。

极端：
浮动元素会置于尽可能高的位置。
左浮动元素尽量向左浮动；右浮动元素尽量向右浮动。

c.如果浮动元素在溢出包含块，这时可以将包含块设置为浮动，就可使包含块自动完全包裹浮动元素。

d.浮动元素超出包含块外边界的情况：1.浮动元素设置了负外边距 2.浮动元素更宽或更高

e.当浮动元素与其他元素重叠时，行内元素：其边框，背景和内容都会在浮动元素之上。
                            块级元素：边框和背景都位于浮动元素之下，只有内容位于浮动元素之上。

f.清除 clear
值：left right both none inherit
初始值：none
应用于：块级元素（被浮动元素影响的块级元素）
继承性：无
说明：
1.实质是在元素上下外边界增加“清楚区域”（值不确定），并不影响元素真实外边距。
2.大多数情况下，要确保清除元素（设置clear属性的元素）的顶端与浮动元素间有一定空间，可为浮动元素设置一个下外边距。
原理：下外边界会增加浮动元素框的大小，设置clear属性的清除元素必须推到浮动框下面你的某个点。
浮动框大小的增加会使这个点下移。

2.定位 position
值：static relative absolute fixed inherit
初始值：static
应用于：所有元素
继承性：无
说明：
static：正常流中默认的定位方式，行内元素生成一个或多个行框，置于父元素中。
relative：元素仍处于文档流中，保持未定位前的形状，原本占据的文档空间仍被占据，如果指定偏移量，只是相对于自身偏移。
absolute：从文档流中删除，就像此元素不存在一样。即使是行内元素也会生成块级框，这点和float相同。
          相对于前代第一个定位非static的元素发生偏移，如果没有这样的元素，则相对于整个页面偏移。
fixed：从文档流中删除，相对于整个页面可视窗偏移，页面滚动时相不影响可视位置。

1.包含块
对于浮动float，包含块是最近的块级祖先元素，而对于定位略复杂：
a.在html中，一般将<html>作为根元素，不过有些浏览器也将<body>作为根元素。在大多数浏览器中，初始包含块是一个视窗的矩形。
b.对于非根元素，如果position为static或relative，包含块则是最近的块级框，表格单元，或行内块祖先框。
c.对于非根元素，如果position为absolute，包含块则是最近的，position不为static的祖先元素（块级和行内元素都可）
如果这个祖先元素是块级元素，则相对于此块级元素的边框界定
如果是行内元素，向上相对于此行内元素第一个行框的上边界和左边界；向下则相对于最后一个行框的下边界和右边界界定。

2.偏移 top right bottom left
值：<length> <percentage> auto inherit
初始值：auto
应用于：定位元素（即position不为static的元素）
继承性：无
百分数：top和bottom相对于包含块的height；left和right相对于包含块的width。
说明：
a.这些值都是元素的外边距相对于包含块的偏移，如果为正，向外偏移，如果为负，向内偏移。
b.尽管设置一个元素的高度和宽度有时很重要，但对于定位元素来讲，可以通过同时设置top right bottom left
实现隐式设置高度和宽度。如果定位元素包含padding或margin可以将width和height设置为auto实现。
比如：要使定位元素占据包含块的左半部分，可以这样设置
top:0;bottom:0;left:0;right:50%

3.限制高度和宽度 min-width min-height max-width max-height
值：<length> <percentage> inherit
初始值：？
应用于：除非替换行内元素和表元素以外的所有元素
百分数：相对于包含块的width和height
说明：
1.都不能为负值
2.IE/WIN7之前不支持这些属性
3.这些属性同样对float适用，比如可以设定浮动元素宽度相对于父元素为多少，但不小于某值。

4.溢出 overflow
如果一个元素设定为特定大小，但内容不能被包含块完全包裹，就会出现溢出现象。
值：visible hidden scroll auto inherit
初始值：visible
应用于：块级元素和替换元素
继承性：无
说明
visible：即使元素溢出，元素内容依然可见，但不改变元素框的形状。
scroll：在元素边界裁剪，并生成滚动条，但在打印时，效果依然同visible。
hidden：裁剪内容，但不生成滚动条。
auto：有必要时生成滚动条，但不同浏览器实现不同
滚动条：不同浏览器中，样式和尺寸实现不同。

5.裁剪 clip
值：rect(top, right, bottom, left)
初始值：auto
应用范围：绝对定位元素
说明：
1.每个值之间的逗号后面最好使用空格。
2.各个值不是偏移量，而是距元素左上角的距离。比如，如果要裁剪元素左上角20 x 20px的正方形，则为：
rect(0, 20px, 20px, 0)
3.可为负值，使裁剪区域延伸到元素外，但不能超出上边界和左边界。
4.兼容性不强，建议不使用。

6.元素可见性 visibility
值：visible hidden collapse inherit
初始值：visible
应用于：所有元素
说明：
1.hidden：元素只是“透明”，不会从文档流中删除，而使用display:none时，则同时从文档流中删除。
2.如果visible设置为hidden的子元素设置为visible，尽管父元素和兄弟元素不可见，它也可见。

7.绝对定位 absolute
a.绝对定位元素会从文档流中删除，也不会流入其他元素。即绝对定位元素可能覆盖其他元素，也可能被其他元素覆盖。
b.自动偏移：如果top设置为auto，那么top最终的呈现形式为元素没有设置为absolute时的效果。
           left和right同样适用这一规则，不过绝对定位后元素从文档流中删除，所以会在此位置上与其他元素内容重叠。

8.Z轴上的放置 z-index
值：<integer> auto inherit
初始值：auto
应用于：定位元素
继承性：无
说明：
1.值越大，越靠近读者
2.如果希望某个元素在所有元素前面，可以设置一个超大值，如10000

9.相对定位 relative
不会从文档流中删除该元素，如果发生偏移，原位置保持空白。
重置：如果top为10px，bottom为20px时发生冲突，CSS2.1会将bottom重置为-10px；left和right也是如此。