CSS中元素定位方法的详细求解

本文主要介绍CSS中元素定位方法的详细解决方案，这是CSS入门学习中的基础知识，需要的朋友可以参考一下。
1。盒模型

框模型是浏览器为页面中的每个HTML元素生成的矩形框。

这些页面按照视觉格式化模型排列在页面上，页面布局主要由三个属性控制：位置属性、显示属性和浮动属性，其中位置属性控制页面上元素之间的位置关系。显示属性控制元素是层叠的或并排的，或者根本不出现在页面上。浮点属性提供了使元素成为多列布局的控制方式。
盒子属性分为三组：

边框（边框）。您可以设置边框的宽度、样式和颜色。
内部边距（填充）。您可以设置框内容区域和边框之间的距离。
外边缘（边），可以设置盒与相邻元素之间的距离。

理解框属性是可能的：外部距离是将其他元素向外推的框架，而内缘是将元素从边界推送的内容。

CSS分别指定边界、内边界和外边界的简写属性。在每个简短声明中，属性值的顺序是上、右、下、左（顺时针方向）。
例如：保证金：5px 10px 12px 8px；

注：有4个值之间的空间，而不是其他符号（如逗号）。甚至，你不需要4的价值。
全部写出来mdash；mdash；如果没有写的价值，那么对方的使用价值。

例如：保证金：12px 10px 6px；
描述：最后一个值（左）丢失，和价值（10px）对侧（右）的使用，即保证金：12px 10px 6px 10px。

例如：保证金：12px 10px；
描述：在一个价值缺乏（下左），采用上（12px）和右（10px），即利率：12px 10px 12px 10px；

例如：保证金：12px；
描述：只有一个值是书面的，然后4方去此值。即：保证金：12px 12px 12px 12px；
1.1框的边框

边框有3个相关属性：

宽度
你可以使用像薄、中、厚这样的文本值，你可以使用它。
除百分比和负值外的任何绝对值。

风格
没有，隐藏，虚线，虚线，固体，双，槽，
文本值，如脊、插图和起始值。

颜色
任何颜色值可以使用，包括RGB、HSL、十六波段的颜色值，和颜色的关键词。

1.2箱的利润

内部边距（填充）用于设置框内容区域和边框之间的距离。不设置内部边距，内容将位于边框的旁边。
1.3箱外缘

外部边距（边距）用于设置框和相邻元素之间的距离。

这是推荐使用此规则作为样式表的第一条规则：* { margin: 0；padding: 0；}

描述：这个规则设置默认外距离和所有元素的内边缘为零。当这个规则放在风格形式，所有默认的外缘和内缘会消失。然后，您可以添加的外缘的元素，真的需要外的距离，不同的浏览器有不同的默认的内边缘和外边缘，尤其是复杂的元素，如表格和列表。在这种情况下，使用此规则中的默认值，然后将其添加到的需求，会在浏览器相同的效果。
1.4叠加外缘

在垂直方向上的外部距离是叠加的，这是你必须知道的事情之一。

在CSS中，两个或多个盒的相邻边（多个），也称为

在CSS中，在两个或多个相邻（父或子元素或兄弟元素）的普通流中的块元素的垂直方向上的边缘被叠加，这种方法形成的外部距离可以称为外层距离的叠加（折叠的边缘）。
1.5外缘单位

根据经验，这通常需要搭配不同的单位设置了距离文本元素。例如，一个段落的左、右边缘可用于文字像素段，始终包含元素保持一个固定的边界间距不到更大或更小的大小的影响，上部和下部的空间，他们可以作为一个单元来增加或减少间隔与数量的变化。

实例：

CSS代码将内容复制到剪贴板。
P {字体大小：1em；保证金：75em 30px；}。

2。浮动和清除

浮动和清除是用来组织页面布局的剑，刀片是浮动和明确的属性。

2.1浮动

浮动时，您可以想象从常规文档流中取出元素。在常规文档流中的浮动元素之后，紧跟在空间中的原始元素将允许与浮动元素平起平坐。

如果浮动元素后面有两个段落，而你只想让第一个段落与浮动元素平行（即使下一个放置的第二个，也不想把它补起来），你可以使用清除属性删除第二个，然后它会乖乖地呆在下面的浮动元素中。

最常见的浮动效应：

在传统出版物中围绕图片书写文字的效果
将原始块级元素叠加在一起，将其捆绑在一起，从而实现列的布局。

三种浮体的2.2种方法

注：这三种方法既有优点也有缺点，请参见使用情况。

方法：父元素添加溢出：隐藏

方法二：同时浮动元素

方法三：添加非浮动清除元件

三.位置

CSS布局的核心是位置属性，它应用于元素框，可以相对于常规文档流中的位置重新定位。位置属性有4个值：静态的、相对的、绝对的、固定的，默认值是静态的。
3.1静态定位

静态

在静态定位的情况下，每个元素都在常规文档流中。要突破这个布局元素，必须将框的位置属性更改为其他三个值。
3.2相对定位

相对

相对定位是相对于文档流（或默认位置）的初始位置，在设置之后，可以使用顶部、右侧、底部和左侧属性来改变其位置。在大多数情况下，只有顶部和左边可以用来达到我们想要的效果。

使用相对定位的关键是考虑到元素的原始空间，因为相对位置元素只相对于初始位置移动。这页没有变化。也就是说，元素占据的空间没有移动，其他元素还没有移动。

3.3绝对定位

绝对的

绝对定位将把元素从文档流中取出，并将其定位到与其他元素相对的位置（默认是位置上下文主体）。位置也可以通过设置左上角和左偏移值来确定。
3.4固定位置

固定的

从文档流完全删除的角度来看，固定位置类似于绝对定位，但不同的是定位元素的定位是固定的上下文视口（浏览器窗口或手持设备屏幕），因此它不随页面滚动移动。

提示：固定位置不常见，最常见的是使用它创建不随页面移动的导航元素。

3.5位置背景

位置上下文是指由位置元素相对偏移的元素。

事实上，只要在外部距离和单元内边缘设置，页面的布局可以在大多数情况下，静态定位实现。许多初学者开始接触CSS将位置设置属性错误，最后发现这些元素从文档流中除去不很好的控制。因此，不要轻易修改元素的默认位置属性，除非你真的需要这样做。

4。显示属性

所有元素都有一个位置属性和一个显示属性。

显示属性有三个值：块、内联和非。

块级元素，如段落、标题、列表等，被堆叠并显示在浏览器上。
里面的元素，例如，跨度，和IMG，在浏览器中显示并排，和下一行显示只在前一行没有空间。

将块级元素转换为内部元素（或相反的元素）：

CSS代码将内容复制到剪贴板。
*默认是块*
显示：内联；}

*默认是内联*
{显示：块；}

当元素的显示设置为非时，元素和包含在其中的元素将不会显示在页面上。它们的原始空间不会被回收，好像相关的标记根本就不存在。

相对元素是可见性属性，属性值是：可见（默认）和隐藏。如果设置为隐藏，则元素被隐藏，但它占用的页面空间将被保留。