CSS盒子模型

最新推荐文章于 2024-10-13 00:39:53 发布

无区新手

最新推荐文章于 2024-10-13 00:39:53 发布

阅读量2.4k

点赞数 1

分类专栏： HTML+CSS

HTML+CSS 专栏收录该内容

33 篇文章 4 订阅

订阅专栏

1.<div>标记

div是英文division的缩写，意为“分割、区域”。<div>标记简单而言就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。<div>与</div>之间相当于一个“盒子”，可以设置外边距、内边距、宽和高，同时内部可以容纳段落、标题、表格、图像等各种网页元素，也就是说大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>。

<div>标记非常强大，通过与id、class等属性配合设置CSS样式，可以替代大多数的块级文本标记。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div标记</title>
<style type="text/css">
.one{
	width:450px;
	height:30px;
	line-height:30px;
	background:#FCC;
	font-size:18px;
	font-weight:bold;
	text-align:center;
}
.two{
	width:450px;
	height:100px;
	background:#0F0;
	font-size:14px;
	text-indent:2em;
}
</style>
</head>
<body>
<div class="one">
	用div标记设置的标题文本
</div>
<div class="two">
	<p>div标记中嵌套的p标记中的文本</p>
</div>
</body>
</html>

注意：

（1）<div>标记最大的意义在于和浮动属性float配合，实现网页的布局，这就是常说的DIV+CSS网页布局。

（2）<div>可以替代块级元素如<h>、<p>等，但是它们在语义上有一定的区别，例如<div>和<h2>的不同在于<h2>具有特殊的含义，语义较重，代表着标题，而<div>是一个通用的块级元素，主要用于布局。

2.盒子的宽与高

网页是由多个盒子排列而成的，每个盒子都有固定的大小，在CSS中使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height的属性值可以为不同单位的数值或相对于父元素的百分比，实际工作中最常用的是像素值。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型的宽度与高度</title>
<style type="text/css">
.box{
	width:200px;
	height:80px;
	background:#CCC;
	border:8px solid #00f;
}
</style>
</head>
<body>
<p class="box">盒子模型的宽度与高度</p>
</body>
</html>