【CSS】 CSS 定位

╰+攻爆jí腚メ 2022-03-30 10:55 379阅读 0赞

css 定位和浮动

**　　\*\*\*\*\*\*\*本章大量内容copy自w3school\*\*\*\*\*\*\*\*\***

定位对于html界面还是很重要的，因为定位会直接影响到用户的视图。对于css而言，定位也比较灵活。

浮动是一种定位的方式，它可以让一些元素根据顺序一个个浮到相关区域的左或者右边，是个灵活的定位方式。

引用一段来自w3school的话：

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。 另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

■　　块级和行内元素

在css中，可以用display属性来设置某种框是行内框还是块级框。设置display:inline or block即可。如果把display属性设置成none的话就以为着这个框在浏览器中不出现，不占用空间了。

之前在提到div和span的区别时也有提到过块级和行内元素的区别。但其实他们之间的区别不仅仅是在显示时是新开一行显示还是同一行中显示。更多的，所谓块级元素，它可以设置如width，height等属于“块”的属性。此外，它可以把它的属性应用到整个“一块区域”上。举例来说，比如<a>这个标签，因为a默认是个行内元素，其可点击部分只有文字（以及文字周围一小部分，可以设置background-color来查看），它也不能设置width，但是当我们把它display设置成block之后，就可以设置它的width,height,padding等属性，同时它的可点击部分扩大到我们设置的整个宽width高height的块区域中。

另一方面，如果在div之类的块级元素里面直接写文字的话，尽管这些文字不是<p>或者其他什么块级标签，但是浏览器会给这些文字自动创建各自的一个“无名块级框”，默认把这些文字当成一个块级元素来处理。

■　　css的定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

■　　position属性

position属性用于手动指定元素位置。可选的值有

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static　　默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit 规定应该从父元素继承 position 属性的值。

关于和position属性配合使用的其他一些属性是：

\*z-index用来设置哪个元素覆盖在哪个元素上面，z-index的值越小就越靠后，被值较大的元素所覆盖。z-index的默认值是和其父元素一样的。

■　　相对定位

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。和绝对定位不同的是，绝对定位的参数的原点是父元素的位置，而不是本元素该出现的位置。比如若设置

#box_relative {
        
      position: relative;
      left: 30px;
      top: 20px;
    }

效果就是：

![CSS 相对定位实例][CSS]

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

■　　绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

比如设置

#box_relative {
        
      position: absolute;
      left: 30px;
      top: 20px;
    }

效果如下：

![CSS 绝对定位实例][CSS 1]

绝对定位的元素的位置相对于*最近的已定位祖先元素*，如果元素没有已定位的祖先元素，那么它的位置相对于*最初的包含块*。

■　　浮动

如果想要把某个块级元素按行内元素那样排列，除了把其display设置成inline，还可以设置浮动。某种意义上来说，浮动和把display设置成inline有类似之处。两者都是通过一定的方法把一些块级元素元素排列到一个行内而不是竖直地排布。但是需要注意的是，两者本质上是不同的。浮动的要义是“让块级元素像行内元素一样排列”而不是把块级元素变成行内元素。所以想要横向排列块级元素的同时还要保留块级元素的一些特征（比如宽高等），那么就不能简单地把其display设置成inline而是turn to 浮动比较好。

● 浮动的两个关键点：

1.浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

2.设置浮动的框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

● 浮动的设置：

float:left or right（注意浮动没有center这个选项）

● 浮动的操作：

当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

![CSS 浮动实例 - 向右浮动的元素][CSS _ -]

当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

![CSS 浮动实例 - 向左浮动的元素][CSS _ - 1]

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

![CSS 浮动实例 2 - 向左浮动的元素][CSS _ 2 -]

\* 关于浮动还有clear属性等等，感觉一时半会儿理解不过来，先写到这里把。

[CSS]: /images/20220330/7ba1e610cfa34d848a3a426568d1c256.png
[CSS 1]: /images/20220330/90a60bb30a62453e940cb10313061994.png
[CSS _ -]: /images/20220330/8f3c65d5df57420ea0382315326b1c93.png
[CSS _ - 1]: /images/20220330/0a240971871645de8314f7c5a019969a.png
[CSS _ 2 -]: /images/20220330/c225d92552e84df89a4f4acbb912bbb2.png