《CSS权威指南》读书笔记6

最新推荐文章于 2024-04-29 21:14:52 发布

托怀明月

最新推荐文章于 2024-04-29 21:14:52 发布

阅读量261

点赞数

分类专栏： CSS 文章标签： css 读书笔记

本文链接：https://blog.csdn.net/sinat_38378976/article/details/70665359

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

第十章浮动与定位

一.浮动

1.浮动元素

首先，会用某种方式将浮动元素从文档的正常流中删除，不过它还是会影响布局，因为其他内容会环绕这个浮动的元素（不管是图像还是元素），例如：

p.aside{float:right;width:15em;margin:0 1em 1em;padding:0.25em;border:1px solid;}

*浮动元素周围的外边距不会合并。

另外，float：none 用于防止元素浮动

2.浮动的详细内幕

1)浮动元素的包含块（containing block）

是其最近的块级祖先元素。此外，浮动元素会生成一个块级框，而不论这个元素本身是什么。

2)几点规则：

《CSS权威指南》304页左右

3.实用行为

1)浮动元素高于其父元素

如图：浮动图像超出了其父元素的底端。

CSS2.1中澄清，浮动元素会延伸，从而包含其所有后代浮动元素

2)负外边距

负外边距可能导致浮动元素移到其父元素的外面。例如：

或者浮动一个比其父元素更宽的浮动元素，例如：

4.浮动元素、内容和重叠

CSS2,.1的明确规则：

行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素”之上”显示。
块框与一个浮动元素重叠时，其边框、背景都在该浮动元素”之上”显示，而内容在浮动元素“之上”显示。
例如：

5.清除

例如：使用clear来防止h3元素左边有浮动元素（但时允许浮动元素出现在h3元素的右边）

h3{clear:left;}

*如果希望一个清除元素的顶端和一个浮动元素的底端之间有一定空间，可以为浮动元素本身设置一个下外边距。

二.定位

1.基本概念

1)定位的类型

2)包含块

*元素可以定位到其包含块的外面，这与浮动元素使用负外边距浮动到其父元素内容区外面很类似，这也说明，“包含块”一词实际上应该是“定位上下文”。

3)偏移属性

*还可以将，正值会导致向内偏移，使边界朝着包含块的中心移动，而负值会导致向外偏移。
*偏移定位元素的外边距边界时，带来的影响是元素的所有一切都会在定位的过程中移动，所以可以为定位元素设置外边距、边框和内边距。

2.宽度和高度

1)设置宽度和高度

一般情况下，已经描述了元素四个边的放置位置，那么元素的高度宽度将由这些偏移隐含确定，例如：

top:0;bottom:0;left:0;right:50%;

这里写图片描述

不过，如果向元素增加了外边距、边框和内边距，例如：

top:0;bottom:0;left:0;right:50%;width:50%;height:100%;padding:2em;

2)限制宽度和高度

min-width，min-height，max-width，max-height这些值不能为负

3.内容溢出和剪裁

1)溢出

2)内容剪裁

*rect（….）的值不是边偏移，而是距元素左上角的距离，如果向剪裁矩形涵盖元素左上角20*20像素的正方形，可以定义如下：

rect(0,20px,20px,0)

4.元素可见性

如果元素设置为visibility:hidden，则会置为“不可见”，处于不可见状态时，元素还是会影响文档的布局。这与display：none有区别，对于后者，元素不仅不显示，还会从文档中删除。

5.绝对定位

1)包含块与绝对定位元素

元素绝对定位时，会从文档流中完全删除，然后相对于其包含块定位，其边界根据偏移属性（top，left等）放置。定位元素不会流入其他元素的内容，反之亦然。这说明，绝对定位元素可能覆盖其他元素，或被其他元素覆盖（可以影响覆盖顺序）。
绝对定位元素的包含块是最近的position值不为static的祖先元素
要注意，如果文档可滚动，定位元素会随着它滚动。只要绝对定位元素不是固定定位元素的后代，情况都是如此。

2)绝对定位元素的放置和大小

3)自动边偏移

例1：top属性设置为auto

对于top属性，定位元素的顶端要相对于其未定位前本来的顶端位置对齐。换句话说，假设span的position值为static，想象一下它会放在哪里，这就是其静态位置。结果如图：

如果left与right属性都设置为auto，结果如图：

*由于其已经定位，其正常流空间关闭，这回导致定位元素与正常流内容重叠。即左边界置于其静态位置。

4)非替换元素的放置和大小

考虑到一个定位元素的宽度和水平放置，可以表示为一个等式：
left+margin-left+border-left-width+padding-left+width
+padding-right+border-right-width+margin-right+right=包含块的width

①如果left、right、width都设置为auto：左边界位于其静态位置，width设置为“收放刚好合适”，即该元素的内容区宽度恰好只能包含其内容（没有多余空间），例如：

②假设左右外边距都设置为auto，而left、width、right都不是auto，例如：

这与正常流中的auto外边距居中行为基本上是一样的。

③假设外边距不为auto，例如：

规则指出，这种情况下，用户代理会忽略right的值（从左向右读的语言中），并重置right的值，好像声明了如下规则：

结果如下：

④如果某个外边距保持为auto，则会改变这个外边框，假设将样式改为：

效果与上图相同，只不过这是通过将有外边距重新计算为12em得到的，而不是覆盖属性right的值。

*一般的，如果只有一个属性设置为auto，就会修改这个属性来满足那个等式。

⑤对于垂直轴，举例：

对此，外边距为auto可以得到垂直居中的效果，举例：

*水平布局中，如果值设定为auto、right或left都可以根据其静态位置放置，但在垂直布局中，只有top可以取静态位置，出于某些
原因，bottom做不到。

⑥还是对于垂直，如果一个绝对定位元素的大小在垂直方向上过度受限，将忽略bottom，举例：对于以下情况，bottom的声明值会被计算值5em覆盖

5)替换元素的放置和大小

替换元素有固有的高度和宽度，因此其大小不会改变。因此，没有“适当收放”的概念。

①水平方向上，几点规则：

举例：假设图像的固有宽度为100px，下面两个元素有相同的宽度和位置。

与非替换元素一样，如果值受限过度，用户代理会忽略right的值（对于从左向右读的语言），在下例中，right的声明值会被计算值50px覆盖：

<div style="position:relative;  width:300px;">
  <img src="frow.gif"  alt="a frowny face"  style="position:absolute; top:0; left:50px; right:125px; width:200px;margin:0;">
</div>

②垂直方向上的规则

举例：

6)Z轴上的放置

较高值的z-index的元素离读者更近。也称叠放。

一旦为一个元素指定了z-index值（不是auto），该元素就会建立在自己的局部叠放上下文。这意味这，元素的所有后代相对于该祖先元素都有其自己的叠放顺序。举例：

*注意p#two的子元素，尽管b元素在其父元素前面，em在后面，但是它们都在p#three的前面。因为z-index值36和-42都是相对于p#two，而不是相对于总的文档。p#two及其所有子元素都有共同的z-index值7，而在这个p#two上下文中各元素又有其自己的次级z-index。

6.固定定位（fixed）

固定元素的包含块是视窗。
固定定位时，元素会完全从文档流中去除。
固定定位会在屏幕上放置一个“永久性”元素，如一个小的链接列表，还可以创建一个包含版权和其他信息的永久性页脚，不论文档如何滚动。

7.相对定位（relative）

当元素使用相对定位时，它会从其正常位置移走，不过原来所占的空间并不会消失。

当一个相对定位元素过度受限，例如：

strong{position:relative;top:10px;bottom:20px;}

CSS2.1指出，此时一个值会重置为另一个值的相反数，因此bottom=-top。同理，right=-left（从左向右读的语言中）