day14学习前端CSS 盒子模型Box Model

最新推荐文章于 2025-12-05 07:37:55 发布

原创最新推荐文章于 2025-12-05 07:37:55 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #学习 #css3

本文详细介绍了HTML中的标准流布局，包括块级、行内和行内块元素，以及display属性的作用。接着讨论了如何通过浮动和定位实现元素的脱流布局，展示了浮动在创建多列布局中的应用。最后，探讨了定位的概念，包括absolute、relative和fixed定位，并给出了实际示例。此外，还提及了盒子模型在布局中的重要性。

标准流布局

标准流布局：没有设置任何布局样式，使用标签自己的特性

块级布局标签：一个标签占一行：<h1>~<h6>、<p>等
行内标签：一行可以显示多个标签，设置宽高无效：<a>、<span>
行内块标签：一行可以显示多个标签，设置宽高有效：<img>、<input>

Display

block - 块级
inline - 行内
none - 隐藏标签
inline-block - 行内块

脱流（脱离标准流布局）

脱流使用的是浮动、定位两种方式
所有标签脱流以后，布局都是以行内块样式布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 块级布局标签 -->
		<p>第一段</p>
		<p>第二段</p>
		
		<!-- 行内标签 -->
		<span style="width: 1000px; height: 100px">京东</span>
		<span>淘宝</span>
		<!-- 设置宽度高度不生效 -->
		<input type="submit" value="登录" style="width: 500px;height: 100px;">
		<input type="text">
	
	</body>
</html>

浮动基本用法

浮动：float

left（左浮动）
right（右浮动）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: aquamarine;
			}
			#d1{
				float: left;
			}
			#d2{
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<div id="d2"></div>
	</body>
</html>

浮动的应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 将所有标签内外边距取消 */
			*{
				margin: 0;
				padding: 0;
			}
			/* 网页有宽度，没有高度 */
			.d1,.d2,.d3{
				width: 100%;
				border: 2px solid red;
			}
			.d1{
				height: 20px;
			}
			.d2{
				height: 120px;
			}
			.d3{
				height: 360px;
			}
			.left,.middle,.right{
				height: 100%;
				border: 2px solid blue;
			}
			.left,.right{
				width: 12%;
				float: left;
			}
			.middle{
				width: 50%;
				float: left;
			}
			.left{
				/* 修改左外边距 */
				margin-left: 13%;
			}
		</style>
	</head>
	<body>
		<!-- 顶部 -->
		<div class="d1"></div>
		<!-- 搜索栏 -->
		<div class="d2"></div>
		<!-- 分类、广告 -->
		<div class="d3">
			<!-- 分类 -->
			<div class="left"></div>
			<!-- 广告 -->
			<div class="middle"></div>
			<!-- 黄页 -->
			<div class="right"></div>
		</div>
		
	</body>
</html>

定位

定位：
定位就是设置一个标签到参考对象上、下、左、右的间距

定位对应的属性：
left、right、top、bottom

定位的前提：

选好参考对象

position:属性 - 专门用于选定参考对象的属性

absolute 绝对定位 – 在盒子中存在一个真实的元素，但是这个元素不占据任何空间
relative 相对定位 – 在盒子中存在一个真实元素，此元素可以任意移动位置，但是其原位置不能被其他元素占用
fixed 固定定位 – 盒子中存在一个真实元素，此元素也不占据任何空间，其位置不受盒子大小的影响
固定定位一般用于返回顶部、浮窗
位于哪里参照物就是哪个（如位于<body>标签下参照物就是整个网页）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div:nth-child(1){
				width: 120px;
				height: 50px;
				background-color: red;
				position: absolute;
			}
			div:nth-child(2){
				width: 100px;
				height: 1000px;
				background-color: green;
				position: relative;
				margin-left: 500px;
			}
			div:nth-child(3){
				width: 50px;
				height: 50px;
				background-color: black;
				position: fixed;
				/* 修改此元素距离右边框、下边框的距离 */
				right: 50px;
				bottom: 50px;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
		<p>第一段</p>
	</body>
</html>