CSS浮动与定位、块级元素与内联元素
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宽度的内联盒。