CSS浮动与定位、块级元素与内联元素

橘猫吃不胖～

已于 2024-04-21 22:53:38 修改

阅读量2.1k

点赞数 1

分类专栏： CSS 文章标签： css css3 html

于 2021-10-21 23:15:00 首次发布

本文链接：https://blog.csdn.net/m0_46612221/article/details/120873517

版权

CSS 专栏收录该内容

25 篇文章

订阅专栏

CSS浮动与定位、块级元素与内联元素

1 DIV的概念
2 页面布局步骤
3 CSS的定位机制
4 浮动属性
5 定位属性position
- 5.1 相对定位relative
- 5.2 绝对定位absolute、fixed
6 visibility、display
7 块级元素与内联元素

1 DIV的概念

DIV全称division，意为“区分”，使用DIV的方法跟使用其他标签的方法一样。
如果单独使用DIV而不加任何CSS，那么它在网页中的效果和使用<P></P>是一样的。
DIV本身就是容器性质的，不但可以内嵌table，还可以内嵌文本和其它的HTML代码。

注意：<div>标签可以用来组合其它的HTML元素，但不能嵌套在段落元素中，例如，<p>aa<div>bb</div>cc</p>的结果是不确定的。

2 页面布局步骤

确定版心，确定网页的主体内容，在页面中水平居中显示
分析页面中的模块
控制页面中各个模块

3 CSS的定位机制

CSS的定位与显示属性可以把一个HTML元素定位在网页中的任何位置，定位与布局密切相关。

普通流方式
普通流方式是指由元素在html文件中的位置决定（由标签在文件中的位置来决定）。
块级元素（如p、h、div）（块级框）从上到下一个接一个的排列，行内元素（如span、strong元素）在行中水平布置。
除非特殊的指定，否则所有的框都在普通流中定位
浮动方式
浮动方式是指元素在页面中可以左右移动，直到碰到包含框或其他浮动框。
绝对定位
绝对定位是指直接将元素定位到页面的任何位置（通过设置元素在页面中的位置坐标来实现）。

4 浮动属性

4.1 浮动的含义

浮动是指元素脱离原有的标准文档流，移动到其父元素中指定的位置。

4.2 浮动的实现

浮动可以通过在元素的CSS中添加float属性来实现，其属性值有三个，分别是：

属性值	含义
`left`	向左浮动
`right`	向右浮动
`none`	不浮动(默认值)

例如：

<div class="d1"></div>

.d1 {
  width: 100px;
  height: 100px;
  background-color: pink;
  float: right;
}

在这里插入图片描述

为什么说浮动元素不占空间？

以两个div为例，正常是俩个div都会显示出来，占据2空间。加入浮动后，div就会叠加显示在一个位置，此时要想让两个div正常显示一般要使用到margin-left浮动div的宽度，或者也是使用浮动。
如果不设置，div叠加在一个位置时，只是位置叠加，但div中的内容不会被覆盖，如果后面的div没有指定宽度则自动横向填充完整，文字过多则会跑到第一个div下面形成文字环绕效果。
如果指定宽度则会去掉被覆盖的宽度显示，其它的文字到浮动div下面显示，即产生文字环绕效果。

4.3 常见的浮动布局

1、一列固定宽度并自动居中：margin设置为auto，格式：margin: auto;

例如：

<div class="d1">橘猫吃不胖</div>

.d1 {
  /* 设置长宽为100的正方形 */
  width: 100px;
  height: 100px;
  /* 设置背景颜色为橙色 */
  background-color: coral;
  /* 列自动居中 */
  margin: auto;
}

在这里插入图片描述
2、一列自适应宽度：相对于浏览器而言，盒子的宽度会随浏览器宽度的改变而改变，这时要用到宽度的百分比，当一个盒模型不设置宽度时，它默认是相对于浏览器显示的。

例如：

<div class="d1">橘猫吃不胖</div>

.d1 {
  /* 设置高为100 */
  height: 100px;
  /* 设置背景颜色为橙色 */
  background-color: coral;
  /* 列自动居中 */
  margin: auto;
}

在这里插入图片描述
3、两列自动居中：采用盒子嵌套方式实现，让外层的盒子自动居中。

例如：

<div class="d1">
  <div class="d1-1"></div>
  <div class="d1-2"></div>
</div>

.d1 {
  /* 设置盒子长200像素，宽100像素，并且自动居中 */
  width: 200px;
  height: 100px;
  margin: auto;
}
.d1-1 {
  /* 设置长宽都为100的正方形 */
  width: 100px;
  height: 100px;
  background-color: red;
  /* 向左浮动 */
  float: left;
}
.d1-2 {
  /* 设置长宽都为100的正方形 */
  width: 100px;
  height: 100px;
  background-color: pink;
  /* 向左浮动 */
  float: left;
}

在这里插入图片描述

4.4 清除浮动clear

当属性设置浮动时，它所在的物理位置离开了原有的文档流，它会对页面中其他元素的排版产生影响。为了使文档流能识别浮动，或者让浮动后面的元素不受影响，可以使用clear属性消除浮动，它的取值如下：

属性值	含义
`left`	清除左侧的浮动影响
`right`	清除右侧的浮动影响
`both`	清除左右两侧的浮动影响

例如，HTML页面中代码如下：

<div class="d1"></div>
<div class="d2">橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~橘猫吃不胖~</div>

未加入clear属性，效果如下：

.d1 {
  width: 100px;
  height: 100px;
  background-color: pink;
  float: left;
}

在这里插入图片描述
加入了clear属性，效果如下：

.d2 {
  clear: left;
}

在这里插入图片描述

但是，我们平时clear:both使用比较多，left和right这两个属性值几乎不怎么使用，是因为left和right这两个值没有什么用，凡是clear:left或者clear:right起作用的地方，一定可以使用clear:both替换。

clear属性只有块级元素才有效的，而::after等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置display属性值的原因。

.clear::after {
  content: "";
  display: table;
  clear: both;
}

利用伪元素或者直接使用clear:both，有时候也会产生一些意想不到的问题：

<div class="father">
  <img src="xxx">
  <div class="animal">
    小猫 1，小猫 2，
    <div class="clear"></div>
    小猫 3，小猫 4，小猫 5，小猫 6，小猫 7，小猫 8，小猫 9，...
  </div>
</div>

img {
  width: 64px;
  height: 64px;
  float: left;
}

.father {
  border: 1px solid black;
  overflow: hidden;
}

.animal {
  margin-left: 70px;
}

.clear {
  clear: both;
}

在这里插入图片描述
由于clear:both的作用本质是让自己不和float元素在一行显示，并不是真正意义上的清除浮动，因此float元素一些不好的特性依然存在，于是，会有这样的现象。

如果clear:both元素前面的元素就是float元素，则margin-top负值即使设成-9999px，也不见任何效果。
clear:both后面的元素依旧可能会发生文字环绕的现象。

5 定位属性position

5.1 相对定位relative

元素以它所在的普通流中的位置为起始点进行定位(设置坐标)。如果一个元素进行相对定位，它将以它所在的位置（即它在普通流中的位置）为初始点，然后，可以通过设置垂直或水平位置，让这个元素相对于它的初始点进行移动。

格式为：

position: relative;
top: 到顶部的距离;
left: 到左边的距离;
bottom: 与底部的距离;
right: 与右边的距离;

例如：

<div class="d1"></div>
<div class="d2">
    <div class="d3"></div>
</div>

.d1 {
  /* 长100 宽100 背景粉色 */
  width: 100px;
  height: 100px;
  background-color: pink;
}
.d2 {
  /* 长200 宽200 背景黄色 */
  width: 200px;
  height: 200px;
  background-color: palegoldenrod;
}
.d3 {
  /* 长100 宽100 背景紫色 */
  width: 100px;
  height: 100px;
  background-color: plum;
  /* 设置相对定位 距离顶部20 左部30 */
  position: relative;
  top: 20px;
  left: 30px;
}

在这里插入图片描述

5.2 绝对定位absolute、fixed

绝对定位元素可以把元素精确定位到页面中的某个地方。

注意：

元素绝对定位后，它与普通文档流就没有关系，不占据普通文档流的空间，普通文档流中其他元素的布局就像绝对定位的元素不存在时一样。
绝对定位的元素的位置是相对于最近的父元素而言的。
绝对定位必须是在父元素使用相对定位的情况下才能正常使用。父元素div必须套上relative（不加这个就会根据body的左上角作为原点）。
应用场景一般DIV框随变动，里面也会跟着改变。一般都是相对定位接合绝对定位一起使用，如果想把一个图层置于另一个图层上面或者是弹窗就用到绝对定位，将图层固定到屏幕的固定位置就得用position:fixed了。
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。而且页面中元素的z-index(层级)为0

格式为：

position: absolute;
top: 与顶部的距离;
left: 与左边的距离;
bottom: 与底部的距离;
right: 与右边的距离;

例如：

<div class="d1"></div>
<div class="d2">
    <div class="d3"></div>
</div>

.d1 {
  /* 长100 宽100 背景粉色 */
  width: 100px;
  height: 100px;
  background-color: pink;
}
.d2 {
  /* 长200 宽200 背景黄色 */
  width: 200px;
  height: 200px;
  background-color: palegoldenrod;
}
.d3 {
  /* 长100 宽100 背景紫色 */
  width: 100px;
  height: 100px;
  background-color: plum;
  /* 设置相对定位 距离顶部20 左部30 */
  position: absolute;
  top: 20px;
  left: 50px;
}

在这里插入图片描述
相对定位和绝对定位需要配合top、right、bottom、left 使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右。

fixed:元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

6 visibility、display

属性	含义	属性值
visibility	设置元素是否可见	visible：元素可见(默认值) hidden：不可见
display	设置元素的显示方式	none：不显示 block：块状显示 inline：显示在一行

visibility与display隐藏元素的区别：

visibility：hidden；隐藏元素后，保留元素所占有的物理空间
display：none；隐藏元素后，不保留元素所占有的物理空间

7 块级元素与内联元素

7.1 块级元素

块级元素（block-level element）：占据了全部的宽度，在前后都有换行符。块级元素无论内容是什么都会独占一行，多个块级元素换行显示。

常见的块级元素有：<h1></h1>、<p></p>、<div></div>、<ul></ul>、<table></table>、<form></form>，它们的宽度（width）、高度（height）、内边距（padding）、外边距（margin）都是可以控制的。

块级元素和display为block的元素不是一个概念，例如，<li>元素的默认display值为list-item，<table>元素默认的display值是table，但是他们都是块级元素。

使用clear属性可以清除块级元素浮动带来的影响，例如：

<div class="outside clear">
  <img src="https://img.aidotu.com/down/jpg/20200828/fb815d57e9b9374079659e6467e6f2af_219154_2048_2897.jpg" class="inside"/>
</div>

.outside {
  padding: 10px;
  background-color: orange;
}
.inside {
  width: 150px;
  height: 200px;
  background-color: pink;
  float: left;
}

在这里插入图片描述
使用clear: both，可以清除看到清除之后的效果：

.clear:after {
  content: "";
  display: block;
  clear: both;
}

在这里插入图片描述

7.2 内联元素

内联元素（inline）：只需要必要的宽度，不强制换行，只占用自身的大小，不会占用一行。

例如：<span></span>、<a></a>，它们的宽度（width）、高度（height）、内边距（padding-top、padding-bottom）、外边距（margin-top、margin-botom）都是不能改变的。

内联元素的“内联”特指“外在盒子”，和dislplay为inline不是一个概念，inline-block和inline-table都是“内联元素”，因为它们的“外在盒子”都是内联盒子。

7.2.1 内联盒模型

下面是一段html代码：

<p>这是一行普通的文字，这里有个 <em>em</em> 标签。</p>

内容区域是指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子。但是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因此，对于这些元素，内容区域可以看成元素自身。我们可以把下面选中背景色的区域看做是内容区域。
在这里插入图片描述
“内联盒子”不会让内容成块显示，而是排成一行，该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类，例如，红线圈起来的是内联盒子，蓝线圈起来的是匿名内联盒子。

行框盒子：下面图片中，每一行就是一个“行框盒子”（红线标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。
在这里插入图片描述
包含盒子，例如<p>这是一行普通的文字，这里有个 <em>em</em> 标签。</p>，p标签就是一个包含盒子。

7.2.2 幽灵空白节点

“幽灵空白节点”指的是：在HTML5文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样，因此，称之为“幽灵空白节点”。

我们可以举一个最简单的例子证明“幽灵空白节点”确实存在，代码如下：

<div><span></span></div>

div { 
  background-color: #cd0000; 
} 
span { 
  display: inline-block; 
}

在这里插入图片描述
通过上述代码的表现我们可以看到，div的高度并不是0，内部的<span>元素的宽高都是 0，标签之间也没有换行符之类的，但是确实看到了红色的背景色。如果我们认为在<span>元素的前面还有一个宽度为0的空白字符，一切好像可以解释了，这就是幽灵空白节点。

“幽灵空白节点”实际上也是一个盒子，不过是个假想盒，名叫“strut”，中文直译为“支柱”，是一个存在于每个“行框盒子”前面，同时具有该元素的字体和行高属性的0宽度的内联盒。