前端学习之CSS（04）布局

最新推荐文章于 2025-07-27 15:25:04 发布

原创最新推荐文章于 2025-07-27 15:25:04 发布 · 291 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css

css 专栏收录该内容

4 篇文章

订阅专栏

本文深入讲解CSS布局核心概念，包括盒子模型、边距、填充、溢出处理及边框样式，探讨不同属性如何影响网页元素的尺寸与位置，提供实用案例帮助理解。

CSS布局与定位

概述
内容

盒子模型
页面元素的大小
边框
与其他元素的距离
定位机制
文档流
浮动定位
层定位

盒子模型

注：页面上的区域、图片、导航、段落，都可以是盒子，占据着一定的空间。

盒子模型组成

content内容
height高度
width宽度
border边框
padding内边距：边框和内容之间的空白距离。
margin外边距：两个边框之间的距离。
图例：
一个盒子的实际宽度、高度 = content+padding+border+margin
案例：
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#box{
				width:100px;
				height: 100px;
				padding: 20px;
				border: 1.5px solid;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			内容内容内容内容内容内容内容内容内容
			内容内容内容内容内容内容
		</div>
	</body>
</html>

效果：
在这里插入图片描述

overflow属性

取值：
hidden：超出部分不可见
scroll：显示滚动条
auto：如果有超出部分的话，显示滚动条。
案例：

border属性

border-width：px、thin（细）、medium（中）、thick（粗）
border-style：dashed（横虚线）、dotted（点虚线）、solid（实线）、double（双实线）
border-color：颜色
border：width style color
案例
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.box{
				width:100px;
				height: 50px;
				border-top: double red;
				border-bottom: medium solid blue;
				border-left: thick dashed yellow;
				border-right: thick dotted green;
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			内容内容内容
			内容内容内容
		</div>
	</body>
</html>

效果：
在这里插入图片描述

padding和margin

对浏览器默认的设置清零

*{
	padding: 0;
	margin: 0;
}

取值：px，%（相对于外层盒子的宽度和高度）

内边距	外边距	方向
padding: 5px;	margin: 10%;	上右下左
padding-top: 5px;	margin-top: 10%;	上
padding-right: 5px;	margin-right: 10%;	右
padding-bottom: 5px;	margin-bottom: 10%;	下
padding-left: 5px;	margin-left: 10%;	左

top和bottom，right和left默认相等，如下
margin: 1px;（margin: 1px 1px 1px 1px;）
margin: 1px 2px;（margin: 1px 2px 1px 2px;）
margin: 1px 2px 3px;（margin: 1px 2px 3px 2px）
margin的合并：垂直方向合并，水平方向不合并。

水平居中

图片文字水平居中：text-align: center;
div水平居中：margin: # auto;（左侧和右侧取值设为auto，浏览器根据外层区域的宽度以及当前div区域的宽度自动将div区域水平居中）

案例

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#imglist{
				text-align: center;
				font-size: 5px;/*增加图片间文字间隙*/
			}
			#imglist img{
				height: 100px;
				width: 100px;
				margin: 5px auto;
				border: 2px dotted gray;
				padding: 5px;
			}
		</style>
	</head>
	<body>
		<div id="imglist">
			<img src="image/huoying.jpg" >
			<img src="image/huoying.jpg" >
			<img src="image/huoying.jpg" >
		</div>
	</body>
</html>