Python全栈开发学习--HTML--CSS定位--Day4

CSS定位概述

在网页布局中，对于所有的页面元素，我们都可以使用position属性来精确的指定页面元素的具体显示位置。对于复杂的网页来说，我们需要对元素进行定位以得到我们想要的效果。

div、h1、p等 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。在了解position定位属性如何使用之前，我们先学习一个属性display，该属性的作用是设置元素如何被显示。

一、 display

回顾一下我们之前所学习的元素分类，我们大致可以将所有的元素分为三类

1.1 块级元素（block）

• 独占一行，设置了宽度后，后面剩余的宽度还是会占一行，只是不显示
• 块元素会独占一行，自上向下排列
• 默认宽度是父标签的100%，默认高度被内容撑开
• 可以设置width和height属性
• 可以设置margin和padding属性
• 常见块级元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

1.2 内联元素（inline）

• 不独占一行，后面可以继续跟同类型标签，两个span元素会被解析在同一行。
• 内联元素只占自身大小，从左向右排列，如果一行中不不足以容纳，则会换到下一行，依旧自左向右排列
• 默认宽度被内容撑开，默认高度被内容撑开，不可设置宽高
• 支持左右的margin，不支持上下的margin
• 支持上下左右padding，垂直方向不会影响页面布局
• 可以设置边框，垂直方向不会影响页面布局
• 常见内联元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

1.3 行内块元素（inline-block）

• 不独占一行
• 支持宽高
• 不设置宽度的时候宽度由内容撑开
• 常见行内块元素有：<img>、<input>

1.4 display属性值

属性值	描述
none	此元素不会被显示，不会占用位置。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-grou	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）

二、 position

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。元素的定位属性主要包括定位模式和边偏移两部分。

语法格式：选择器 { position：定位模式， <top、left、bottom、right、z-index...> ：属性值；}

2.1 定位属性

2.1.1 top

顶部偏移量，定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

基本语法： top：length
注意：

• length：长度值 | 百分比
• 必须定义position的属性值为absolute、relative才有效。

div { position:relative; top:6px; }   

2.1.2 bottom

底部偏移量，定义了定位元素下外边距边界与其包含块下边界之间的偏移。
基本语法： bottom：length
注意：

• length：长度值 | 百分比
• 必须定义position的属性值为absolute、relative才有效。

div { position:relative; bottom:6px; }   

2.1.3 right

右边偏移量，定义了定位元素右外边距边界与其包含块右边界之间的偏移。
基本语法： right：length
注意：

• length：长度值 | 百分比
• 必须定义position的属性值为absolute、relative才有效。

div { position:relative;right:6px; }   

2.1.4 left

左边偏移量，定义了定位元素左外边距边界与其包含块左边界之间的偏移。

基本语法： left：length
注意：

• length：长度值 | 百分比
• 必须定义position的属性值为absolute、relative才有效。

div { position:relative;left:6px; }   

2.1.5 z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。如果属性值越大，表示离用户更近，繁殖属性值越小则表示离用户更远。

基本语法： z-index：number
注意：

• number：堆叠层数，可以为负数，默认值为0
• 必须定义position的属性值为absolute、relative才有效。

div { position:relative;z-index:-1; }   

2.1.5 overflow

属性规定当内容溢出元素框时发生的事情。该属性设置当文本内容超出盒模型边框所采取的处理方式，

基本语法： overflow：value
注意：

• value：采取的处理方式
  （1）visible 默认值。内容不会被修剪，会呈现在元素框之外。
  
  （2）hidden 内容会被修剪，并且其余内容是不可见的
  。
  （3）scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  
  （4）auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
  
  （5）inherit 规定应该从父元素继承 overflow 属性的值。
• 必须定义position的属性值为absolute、relative、fixed才有效。

div { position:relative;overflow:scroll; }   

2.2 定位模式

2.1.1 static（自动定位）

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响

2.1.2 fixed （固定定位）

div{
	position:fixed;
}

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：

注意：

1. 固定定位的元素跟父级没有任何关系，只认浏览器。
2. 固定定位不占有位置，不随着滚动条滚动。
3. 固定定位如果没有内容，必须设置宽高，如果有内容，宽高由内容撑开

2.1.3 absolute （绝对定位）

div{
	position:absolute;
}

absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
如果想为元素设置绝对定位，需要设置position:absolute，这条语句的作用将元素从文档流中拖出来,将不占用原来元素的空间，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。如果不存在就逐级向上排查，直到相对于body元素，即相对于浏览器窗口。

注意：

1. 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置
2. 若其父级有定位，会根据父级边缘位置进行定位
3. “子绝父相” 是最常用的布局方式，意思是 子级是绝对定位的话， 父级要用相对定位。
4. 标准文档流中的盒子水平居中只需要设置 margin：auto 即可，但是对于绝对定位就没有效果
5. 绝对定位的盒子水平/垂直居中方法
   5.1 首先 left 50%，移动父盒子的一半大小
   5.2 然后走自己外边距负的一半值（margin-left:-值）就可以实现水平居中了。（垂直居中同理）

2.1.4 relative （相对定位）

div{
	position:relative;
}

相对定位元素的定位是相对其正常位置。
如果想为元素相对定位，需要设置position:relative;，它还是会占用该元素在文档中初始的页面空间，通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

注意： 每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。

2.1.4 sticky（粘性定位）

div{
	position:sticky;
}

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

2.3 定位总结

定位模式	是否脱标占有位置	使用边偏移	偏移方式
静态static	不脱标，正常模式	不可以	正常偏移
相对定位relative	脱标，占有位置	可以	相对自身初始的文档流位置移动
绝对定位absolute	完全脱标，不占有位置	可以	相对于父级的定位边缘移动位置
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置

三、 float

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

语法

float：value

value取值：

• left：元素向左浮动
• rigth：元素向右浮动
• none：默认值。元素不浮动，并会显示在其在文本中出现的位置。

规则
（1）当元素的float属性取值为left或right时，元素属于浮动定位;
（2）若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动；
（3）浮动盒子的顶边不得高于上一个盒子的顶边；
（4）浮动盒子在摆放时，要避开常规流盒子；常规流盒子在摆放时，无视浮动盒子；
（5）常规流盒子的自动高度计算时，无视浮动盒子
（6）清除浮动：clear:both(左或右)。

注意：浮动元素会脱离文档流，不占据原来的位置。浮动的元素总是找离它最近的父级元素对齐，但是不会超出内边距的范围。

下面通过几个图例加深印象：

四、元素对齐

4.1 元素对齐

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。设置到元素的宽度将防止它溢出到容器的边缘。

 margin:  0px auto;
 width: 50%;

注意： 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

4.2 文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align： center;

text-align:center;

4.3 图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中。

img {
    display: block;
    margin: auto;
    width: 50%;
}

4.4 左右对齐

（1）position

我们可以使用 position: absolute; 属性来对齐元素

/*右对齐*/
{
    position:absolute;
    right:0px;
    width:300px;
}

当使用 position 来对齐元素时, 通常 body元素会设置 margin 和 padding 所以在使用之前应该先清除这两个属性

* {
    margin: 0;
    padding: 0;
}

（2）float

我们也可以使用 float 属性来对齐元素

/*右对齐*/
{
 float: right;
 }

4.5 竖直居中

（1）padding

/*垂直居中*/
{
    padding: 50%;
}

（2）position 和 transform

/*垂直水平居中*/
{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

特别鸣谢菜鸟教程所提供的内容支持