Web前端学习之路（三）CSS浮动与定位

最新推荐文章于 2021-09-11 11:59:29 发布

LionMain

最新推荐文章于 2021-09-11 11:59:29 发布

阅读量316

点赞数

分类专栏： Web前端文章标签： CSS 浮动定位

本文链接：https://blog.csdn.net/LionMain/article/details/97925629

版权

Web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、DIV

DIV是层叠样式表中的定位技术，全称DIVision，有时把div称为图层，更多的时候称之为“块”。

DIV大小

属性	属性值	作用
width	n px	设置宽度
height	n px	设置高度

溢出处理效果

属性名：overflow

属性值：

visible：默认值，内容不会被修剪，会呈现在元素框外。
hidden：超出的部分被隐藏。
scroll：不论是否需要，都显示滚动条。
auto：按需显示滚动条以便查看其余的内容。

作用：对溢出部分进行处理。

轮廓

属性名：outline

属性值：宽度样式颜色

dashed：虚线轮廓
dotted：点状轮廓
solid：实线
double：双线

作用：绘制于元素周围的一条线，位于边框边缘的外围。

边框

属性名：

border-left：左边框
border-right：右边框
border-top：上边框
border-bottom：下边框
border：全边框

属性值：宽度样式轮廓

solid：实线
none：无边框
double：双线边框

作用：设置边框的宽度、颜色、虚线、实线等样式css属性。

PS. 上述属性值只是举个例子，并不完全。

二、盒子模型

盒子模型，简单点用一张图来说明：

content：本体，由width、height组成
padding：内边距，由padding-top、padding-right、padding-bottom、padding-left组成。
border：边框，由border-top、border-right、border-bottom、border-left组成。
margin：外边距，由margin-top、margin-right、margin-bottom、margin-left组成。

我们通常这样子来设置盒子大小：

/*内边距*/
padding: 10px 30px 50px 70px;
/*边框*/	
border: 10px 20px 30px 40px;
/*外边距*/
margin: 10px 30px 50px 70px;

四个属性值依序分别对应着上、右、下、左四个方向，当然，如果想简写的话，也是可以的，这里就不多加赘述。

接下来，我们要提到一个很重要的属性：box-sizing。

box-sizing有两个属性值：

content-box：在宽度和高度之外绘制元素的内边距和边框
border-box：从己设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

说得简单点就是使用content-box属性，整个盒子的大小会改变，相反，使用border-box则不会。

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			/*大小*/
		    width: 250px;	/*宽度*/
		    height: 250px;	/*高度*/
		    overflow: hidden;
		}

		#div1{
			background-color: red;
			padding-right: 20px;
		}
		#div2{
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div id="div1">div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素
	</div>

	<div id="div2">div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素div元素
	</div>
</body>
</html>

运行结果：

如果在样式中添加上box-sizing: border-box;，那么运行测试结果则为：

三、CSS定位机制

两个概念

行级元素：行内元素和其他行内元素都在同一条水平线上排列，都是同一行的。

举例：a、label、img、span等

块级元素：块级元素在默认情况下会独占一行。

举例：div、h标签、li、table等。

定位机制

定位机制可分为文档流和脱标流，脱标流又分为浮动和定位。

文档流

文档流，也称为标准流、标准文档流

特点：

空白折叠现象
高矮不齐，底边对齐
自动换行，一行写满，换行写

脱标流

浮动

float属性值：

left：元素向左浮动
right：元素向右浮动
none：默认值，元素不浮动

float特性

崩溃、破坏、崩塌：父一级的块级元素的高度发生了破坏。

简单点说就是，当父级元素没有设置高度的时候，父级元素的高度由子级元素的总高度决定，这时，假如子级元素加以float属性时，就会脱离文档流，最后的结果就是施加float属性的子级元素的高度不会影响到父级元素，于是，父级元素的高度就发生了崩塌。
包裹：父级的宽度会自适应子级的宽度。

清除浮动

#clearDiv::after{
    /*使clearDiv中有content的存在，但是没有内容*/
    content: "";
    /*将clearDiv中己有content进行隐藏*/
    visibility: hidden;
    /*将行高恢复为0*/
    height: 0px;
    /*将content设置为块级元素*/
    display: block;
    /*清除浮动*/
    clear: both;
}

定位

position属性值：

属性值	说明
static	无定位
fixed	固定
absolute	绝对定位
relative	相对定位

无定位

特性：默认值，遵循正常的文档流，不会受到top、bottom、left、right的影响。

固定定位

参考：浏览器窗口

特性：相对于窗口，即使窗口滚动它也不会移动。

绝对定位

参考：己定位的最近的祖先元素

特性：元素脱离文档流。元素的初始位置占据的空间不会被保留。

相对定位

参考：元素本身

特性：不会使元素脱离文档流。元素的初始位置占据的空间会被保留。

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#div1{
			background-color: red;
			width: 100px;
			height: 100px;
			position: relative;
			top: 100px;
			left: 100px;
		}
		#div2{
			background-color: orange;
			width: 100px;
			height: 100px; 
			position: absolute;
			top: 100px;
			left: 100px;
		}
		#div3{
			background-color: yellow;
			width: 100px;
			height: 100px;
			position: fixed;
			top: 250px;
			left: 10px;
		}
		#div4{
			background-color: green;
			width: 500px;
			height:  100px;
			position: static;
		}
		p{
			width: 500px;
		}
	</style>
</head>
<body>
	<div id="div1">
			<div id="div2">div1下的2</div>
	</div>
	<div id="div3"></div>
	<div id="div4">
			<div id="div2">div4下的2</div>
	</div>
    <!--创造浏览器滚动的条件-->
	<p>p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素
	p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素
	p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素p元素</p>
</body>
</html>

测试结果：

LionMain

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端学习之路（三）CSS浮动与定位

一、DIVDIV是层叠样式表中的定位技术，全称DIVision，有时把div称为图层，更多的时候称之为“块”。DIV大小属性属性值作用widthn px设置宽度heightn px设置高度溢出处理效果属性名：overflow属性值：visible：默认值，内容不会被修剪，会呈现在元素框外。hidden：超出的部分被隐藏。scroll：不...
复制链接

扫一扫