第四章 CSS布局与定位(上)

最新推荐文章于 2025-08-27 09:18:52 发布

原创最新推荐文章于 2025-08-27 09:18:52 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

Web前端开发专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了CSS中的盒子模型，包括内容、边距、边框等组成部分，以及如何通过overflow属性处理溢出内容。此外，还讲解了三种定位机制：文档流、浮动定位和层定位。在文档流中，区分了block、inline和inline-block元素的特点，并展示了如何使用display属性进行元素类型转换。实例展示了如何使用CSS实现导航栏的布局，通过设置inline-block和margin属性使链接元素水平居中排列。

一.布局与定位概述

1.盒子模型

页面元素大小

边框

与其他元素的距离

2.定位机制

文档流

浮动定位

层定位

二.盒子模型

页面上区域、图片、导航、列表、段落，都可以是盒子

1.组成元素: 1.content内容

2.height高度

3.width宽度

4.padding内边距

padding-left:40px;

padding-right:40px;

5.border边框

border-left:40px;

border-right:40px;

6.margin外边距

2.overflow属性

hidden 超出部分不可见

scroll 显示滚动条

auto 如果有超出部分，overflow属性取值

3.border属性

border-width:px、thin、medium、thick

border-style:dashed（横线）、dotted（点组成）、double、solid(实线)

border-color:颜色

border:width、style、color

4.margin属性

px、em等...

垂直方向合并,水平方向不合并

-水平居中图片，文字水平居中 text-align=center

-div水平居中 margin:0,auto

三.CSS的定位机制

1.概述有了盒子之后怎么放在页面之中？找到他的位置、确定他的位置。

2.分类文档流、浮动定位、层定位

一.文档流定位

元素分类:block、inline、inline-block

元素类型转换：display属性

1.block元素特点（<div>、<p>、<h1>..<h6>、<ol>、<ul>、<table>、<form>）

独占一行

元素的height、width、margin、padding都可以设置

将元素显示为block元素

display:block;

}

2.inline元素特点（<span>、<a>）

不单独占用一行

width、height不可以设置

width就是它包含的文字或图片的宽度，不可改变

display:inline;

3.inline-block元素特点

不单独占用一行

元素的height、width、margin、padding都可以设置

例如：<img>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>mysite</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		#nav{
			width: 300px;
			margin: 100px auto;
			font-size:0;
		}
		a{
			display: inline-block;
			width:80px;
			height: 30px;
			font-size: 14px;
			text-align: center;
			line-height: 30px;
			text-decoration: none;
			border-bottom: 1px solid #ccc;
		}
		a:hover{
			color: white;
			background-color:#ccc;
			border:1px solid;
			border-left-color:orange;
			border-top-color:orange;
			border-right-color:orange;
		}
	</style>
</head>
<body>
	<div id="nav">
		<a href="#">链接1</a>
		<a href="#">链接2</a>
		<a href="#">链接3</a>
	</div>
</body>
</html>