第五章CSS盒模型-CSDN博客

本文链接：https://blog.csdn.net/qhwtt/article/details/142820430

5.1盒模型的定义

5.2 CSS元素的高度和宽度

盒模型的宽度=左外边距(margin-le盒模型的高度=上外边距(margin-top)+上边框(border-top)+上内边距(padding+内容高度(height)+下内边距(padding-bottom)+下边框(border-bottom)+下外边top)
距(margin-bottom)。ft)+左边框(border-left)+左内边距(padding-left)+内容宽度(width)+右内边距(padding-right)+右边框(border-right)+右外边距(margin-right)。

5.2.1 盒模型的宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 60px;
				height: 40px;
				border: 10px #ff0000 solid;
				
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
	</body>
</html>

5.1.2 盒模型的高度

当设计者布局一个网页时网页最终的宽度和高度会超出预计的数值，这是因为盒模型的宽度或高度计算误差造成的，指定一个css元素的高度和宽度属性时，只是设置内容区域的宽度和高度。

 
<! -- 示例 5.2 程序 -->
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例 5.2</title>
<style type="text/css">
.ap{
    width:200px;
    height:100px;
    border:2px solid red;
    margin:10px;
    background-color:lightblue;
}
</style>
</head>
<body>
<div class="ap">这是 div 块级元素，可设置宽度和高度</div>
<span class="ap">这是 span 行级元素，不能设置宽度和高度</span>
</body>
</html>

5.3 边距设置和边框设置

margin-border-padding 模型是最常用的盒子布局形式。对于任何一个盒子，都可以分别通过设置四条边各自的外边距(margin)、边框(border)和内边距(padding)，实现各种各样的排版效果，而且它们各自的四条边在多参数同时设置时，均按照上一右→下一左的顺序(顺时针)。

5.3.1 外边距设置

margin:设置外边距

margin: 30px;

外边距是指元素与元素之间的距离，外边距设置属性，可分别设置margin-top、margin-nght、margin-bottom、margin-left，也可以用 margin 属性一次性设置所有外边距

1.上外边距
语法:margin-top:length l percent l auto

参数:length 包括长度值和长度单位，包括绝对单位和相对单位。percen是基于父对多的高度。auto值为自动提取边距值，是默认值。
说明:设置对象上外边距，外边距始终透明。内联元素要使用该属性，必须先设定元的 height 属性或 width 属性，或者设定 position 属性为 absolute。
2、右外边距
语法:margin-right:length l percent l auto
参数:同 margin-top。
说明:同 margin-top。
3.下外边距
语法:margin-bottom:length l percent l auto
参数:同 margin-top。
说明:同 margin-top。
4.左外边距
语法:margin-left:length l percent l auto
参数:同 margin-top。
说明:同 margin-top。

5.3.1.1 上外边距

5.3.1.2 右外边距

5.3.1.3 下外边距

5.3.1.4 左外边距

5.3.1.5 外边距

5.3.2 外边距的合并

通常，盒子与盒子之间的外边距相遇会互相影响，必须对margin 属性深入了解，才能精确地控制盒子的位置。
1.行级元素外边距合并
行级元素的盒子相遇，盒子与盒子之间的距离等于两个盒子外边距的总和。

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例 5.5</title>
<style type="text/css">
margin: 50px;
.hbl {
    background-color: yellow;
    margin-right: 20px;
    padding: 30px;
}
.hb2 {
    background-color: lightpink;
    margin-left: 30px;
    padding: 30px;
}
</style>
</head>
<body>
<span class="hb1">黄色 </span><span class="hb2">粉红色 </span>
</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		* {
			margin: 50px;
			}
		.div1{
			background-color: yellow;
			margin-bottom: 30px;
			padding: 30px;
			}
			.div2{
				background-color: lightpink;
				margin-top: 30px;
				padding: 30px;
				}
		</style>
	</head>
	<body>
		<div class="div1">黄色 div</div>
		<div class="div2">粉红色 div</div>
	</body>
</html>

5.3.2.1 行级元素外边距合并

行级元素的盒子相遇，盒子和盒子之间的距离等于二者总和

5.3.2.2 块级元素外边距合并

块级元素的盒子相遇，盒子之间的距离等于中外边距的较大者。

5.3.3 内边距设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				width:800px;
				height:300px;
			}
			div{
				width:800px;/*宽度*/
				height:300px;/*高度*/
				border:10px #ff0000 solid;/*边框*/
				margin:10px;/*外边距*/
				
				padding:10px;/*内边距*/
			}
		</style>
	</head>
	<body>
		<div><img src="img/烟花.jpg"/></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

5.3.4 边框设置

盒模型的边框设置可以通过CSS的border属性来实现。

border属性的语法是：border: border-width border-style border-color;

其中，border-width用于设置边框的宽度，可以设置为具体的像素值（如border-width: 1px），也可以使用预定义的关键字（如border-width: thin，medium，thick）。

border-style用于设置边框的样式，可以设置为实线（solid），虚线（dashed），点线（dotted），双线（double）等等。

border-color用于设置边框的颜色，可以设置为具体的颜色值（如border-color: red），也可以使用预定义的颜色名。

如果要分别设置每个边框的样式、宽度和颜色，可以使用border-top、border-right、border-bottom和border-left属性来分别设置。

另外，也可以使用border-radius属性来设置边框的圆角

5.3.4.1上边框

border-top: 语法有（border-style）（border-width）（border-color）

该属性是复合属性，需要设置参数，来完成。

/*例如*/border-top:...px;

5.3.4.2右边框

border-right: 语法有（border-style）（border-width）（border-color）

该属性是复合属性，需要设置参数，来完成。

/*例如*/border-right:...px;

5.3.4.3下边框

border-bottom: 语法有（border-style）（border-width）（border-color）

/*例如*/border-bottom:...px;

5.3.4.4 左边框

border-left: 语法有（border-style）（border-width）（border-color）

该属性是复合属性，需要设置参数，来完成。

/*例如*/border-left:...px;

5.3.4.5 边框样式

5.3.4.6 边框宽度

5.3.4.7 边框颜色

在CSS中，边框颜色是通过border-color 属性来设置的，该属性可以使用任何类型的颜色值，包括用颜色命名的值、十六进制参数或RGB值。但是如果对象的border-style 设置为none或者border-width设置为0，本属性将失去作用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/* 设置照片的高宽 */
			img{
				width: 250px;
				height: 200px;
			}
			div{
				width: 250px;
				/* 高 */
				height: 200px;
				/* 宽 */
				border: 10px #ff0000 solid;
				/* 边框 */
				margin: 60px;
				/* 外边距 */
				padding: 30px;
				/* 内边距 */
				border-top: 10px #ff0000 solid;
				/* 上边框 */
				border-right: thin #00ff00 dashed;
				/* 右边框 */
				border-bottom: medium #0000ff dotted;
				/* 下边框 */
				border-left: thick #ffc0cb double;
				/* 左边框 */
				border-radius: 40px;
				/* 圆角边框 */
				box-shadow: -20px 10px 30px #dbdbf8;
				/* 阴影边框 右偏移量 下偏移量 宽度 颜色 */
				
			}
		</style>
	</head>
	<body>
		<div><img src="img/99.jpg"/></div>
		<div><img src="img/99.jpg"/></div>
		<!-- 表格与内容 -->
	</body>
</html>

5.3.5 新增边框属性

5.3.5.1圆角边框

border-radius:10px;

5.3.5.2阴影边框

/*阴影边框，右偏移量(负数就是往左偏移)，下偏移量（负数就是往上偏移），宽度，颜色*/
				box-shadow:-5px 5px 10px #ff123f;

5.3.5.3图片绘制边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片边框的设置</title>
		<style type="text/css">
			div{
				margin: 100px;
				border: 50px solid blue;
				border-image: url(img/蓝色星星.jpg)5 10 round;
			}
		</style>
	</head>
	
	<body>
		<div>利用border-image属性设置图片边框铺满效果。上下向内偏移5像素，左右向内偏移10像素</div>
	</body>
</html>

5.4 CSS元素的定位

利用position:"";进行定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习题</title>
		<style type="text/css">
			.father{
				border:2px solid #ff0000;
				width:300px;
				height:250px;
			}
			.son1{
				border:2px double #ff0000;
				background-color:#ffff00;
				width:200px;
				height:80px;
			}
			.son2{
				border:2px double #ff0000;
				width:200px;
				height:25px;
				margin-top:50px;
				position:static;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：无定位
			<div class="son1">子盒子1：无定位的盒子</div>
			<h2>静态定位的盒子</h2>
			<div class="son2">子盒子2：无定位的盒子</div>
		</div>
	</body>
</html>

5.4.1 static 定位

默认就是静态的

            .son2{
				border:2px double #ff0000;
				width:200px;
				height:25px;
				margin-top:50px;
				position:static;
			}

5.4.2 relative定位

相对定位，相对自己原本的位置移了多少多少像素。不会改变其他盒子，只针对自己，如果数值太大还是会影响的。

			.son1{
				border:2px double #ff0000;
				background-color:#ffff00;
				width:200px;
				height:80px;
				position:relative;
				top:10px;left:40px;
			}

5.4.3 absolute定位

.son1{
				border:2px double #ff0000;
				background-color:#ffff00;
				width:200px;
				height:80px;
				position:absolute;
				top:10px;left:40px;
			}

5.4.3.1 相对浏览器绝对定位

在浏览器中的位置是绝对的，脱离文档流。默认情况下会从浏览器左上角开始定位自己的位置，不会随着网页内其他内容的移动而移动。

但是定位默认位置可以设置到其他位置，但是这个定位只会出现在屏幕内的定位，会随着网页滚轮上下移动而移动，不会定在那里。

根据下列代码可以将相对定位设置为其他位置，只需要bottom（下）top（上）right（右）left

            .son1{
				border:2px double #ff0000;
				background-color:#ffff00;
				width:200px;
				height:80px;
				position:absolute;
				bottom: 30px;right: 40px;
				/* top:10px;left:40px; */
			}

5.4.3.2 相对父盒子绝对定位

只需要给父盒子也设置相对定位，就可以使盒子的相对定位从浏览器转移到父盒子。

            .father{
				border:2px solid #ff0000;
				width:800px;
				height:250px;
				position: relative;
			}
			.son1{
				border:2px double #ff0000;
				background-color:#ffff00;
				width:200px;
				height:80px;
				position:absolute;
				bottom: 30px;right: 40px;
				/* top:10px;left:40px; */
			}

5.4.4 fixed定位

和相对定位类似，但更优秀，不会随着页面滚轮的移动而移动。

使用--position:fixed;--进行定位

代码形式如下所示。（代码完整的请看元素的定位的定位下）

			.son1{
				border:2px double #ff0000;
				background-color:#ffff00;
				width:200px;
				height:80px;
				position:fixed;
				bottom: 30px;right: 40px;
				/* top:10px;left:40px; */
			}

5.5 CSS元素的浮动

在CSS的盒模型布局上，除了使用定位避免按照标准流的方式进行排版的限制性问题还可以使用浮动来避免。而使用浮动(foat)和清除(clear)属性设置，可以解决各种页面错位的现象

5.5.1 盒子的浮动添加

一般情况下，页面中的块状元素在水平方向上宽度会自动延伸，直到父元素的边界;而在垂直方向上会按照元素在页面中出现的先后次序依次排列，即所说的标准流排列，如图
5-19 所示。任何元素都可以浮动，浮动元素会变成一个块状元素，元素的水平浮动就是通过其oat属性的设置，使元素向其父元素的左侧或右侧靠拢，间接设置一个元素的文本环绕方式，从而改变原来的竖直排列方式。此时元素的宽度不再延伸，大小将由其内容的宽度而定。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.17</title>
		<style type="text/css">
			.father{
				background-color:#FFCCFF;
				border: 2px solid #ff0000;
				padding: 5px;
			}
			.father div{
				width: 100px;
				height: 20px;
				padding: 10px;
				margin: 10px;
				border: 2px dashed #0000ff;
				background-color: #CCFFFF;
			}
			.father p{
				border: 2px dotted #008000;
				background-color: #FFFF99;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<h2>父盒子</h2>
		<div style="float:right">右浮动盒子1</div>
		<div>标准流盒子2</div>
		<div>标准流盒子3</div>
		<p>css中，有一个float属性，默认为none，也就是标准流通常的情况。若果将float属性的值设置为left或right，元素就会向其父级元素的左侧或右侧靠近，同时默认的情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度确定。</p>
		</div>
	</body>
</html>

5.5.2 盒子的浮动清除

元素浮动后，下面的元素内容会自动上移，结果就会受到上面浮动元素的影响，如果想要清除这种影响，需要使用 clear 属性完成。
由于浮动元素可以清除，是相对定位属性的优势，因而浮动属性成为控制分栏布局的最好工具。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.17</title>
		<style type="text/css">
			.father{
				background-color:#FFCCFF;
				border: 2px solid #ff0000;
				padding: 5px;
			}
			.father div{
				width: 100px;
				height: 20px;
				padding: 10px;
				margin: 10px;
				border: 2px dashed #0000ff;
				background-color: #CCFFFF;
			}
			.father p{
				border: 2px dotted #008000;
				background-color: #FFFF99;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<h2>父盒子</h2>
		<div style="float:right">右浮动盒子1</div>
		<div style="float:right">标准流盒子2</div>
		<div style="float:right">标准流盒子3</div>
		<p clear:"both">css中，有一个float属性，默认为none，也就是标准流通常的情况。若果将float属性的值设置为left或right，元素就会向其父级元素的左侧或右侧靠近，同时默认的情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度确定。</p>
		</div>
	</body>
</html>

5.6 综合案例——昵心美食空间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>昵心美食空间</title>
		<style type="text/css">
			*{
				margin: 0px auto;
				background-color: #FFFF99;
			}
			.all{
				width: 700px;
				height: 650px;
				border: 2px dashed #FF0000;
			}
			.banner{
				width: 700px;
				height: 70px;
			}
			.menu{
				width: 690px;
				height: 40px;
				border: 1px solid #999;
			}
			.main{
				width: 700px;
				height: 450px;
				margin: 5px 0px;
				position: relative;
			}
			.left{
				width: 150px;
				height: 440px;
				border: 1px solid #999;
				float: left;
			}
			.middle{
				width: 384px;
				height: 450px;
				margin: 0px 5px;
				float: left;
			}
			.one{
				width: 380px;
				height: 155px;
				border: 1px solid #999;
			}
			.two{
				width: 250px;
				height: 100px;
				border: 5px double #FF0000;
				margin-top: 20px;
				margin-bottom: 20px;
				border-radius: 25px;
			}
			.three{
				width: 380px;
				height: 135px;
				border: 1px solid #999;
			}
			.right{
				width: 150px;
				height: 440px;
				border: 1px solid #999;
				float: left;
			}
			.bottom{
				width: 700px;
				height: 70px;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="banner"></div>
			<div class="menu"></div>
			<div class="main">
			<div class="left"></div>
			<div class="middle">
			<div class="one"></div>
			<div class="two"></div>
			<div class="three"></div>
		</div>
		<div class="right"></div>
		</div>
		<div class="bottom"></div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>昵心美食空间</title>
		<style type="text/css">
			*{
				background-color:#ffff99;
			}
			a{
				color:red;
			}
			.all{
				width:700px;
				height:650px;
				margin:10px auto;
				padding:5px;
				background-image:url(img/bg1.JPG);
			}
			.banner{
				width:700px;
				height:70px;
			}
			.menu{
				width:690px;
				height:40px;
				padding:5px;
			}
			.main{
				width:700px;
				height:450px;
				margin:5px 0px;
				position: relative;
			}
			.left,.right{
				width:150px;
				height:440px;
				border:1px solid #999;
				float: left;
			}
			.middle{
				width:384px;
				height:450px;
				margin:0px 5px;
				float: left;
				font-size:20px;
				font-family:"楷体";
				font-weight:700;
				color:#0000ff;
			}
			.one{
				width:380px;
				height:155px;
				border:1px solid #999;
			}
			.two{
				width:255px;
				height:100px;
				border:5px double red;
				margin-top:20px;
				margin-bottom:20px;
				border-radius:25px;
			}
			.three{
				width:380px;
				height:135px;
				border:1px solid #999;
			}
			.bottom{
				width:700px;
				height:70px;
			}
		</style>
	</head>
	<body>
		<div class="all">
		<div class="banner">
		<img src="img/banner.jpg" width="700px" height="70px"/>
		</div>
		<div class="menu">
		<img src="img/menu.jpg" width="690px" height="40px"/>
		</div>
		<div class="main">
		<div class="left">
		<marquee direction="up">
		<img src="img/mm_1.jpg" width="150px" height="140px"/>
		<img src="img/mm_2.jpg" width="150px" height="140px"/>
		<img src="img/mm_3.jpg" width="150px" height="140px"/>
		</marquee>
		</div>
		<div class="middle">
		<div class="one">
		<img src="img/font.jpg" width="25px" height="25px"/>为您推荐
		<br><br>
		<img src="img/x_1.jpg" width="80px" height="40px"/>
		<img src="img/x_2.jpg" width="80px" height="40px"/>
		<img src="img/x_3.jpg" width="80px" height="40px"/>
		<img src="img/x_4.jpg" width="80px" height="40px"/>
		<img src="img/x_5.jpg" width="80px" height="40px"/>
		<img src="img/x_6.jpg" width="80px" height="40px"/>
		</div>
		<center>
		<div class="two">
		<h1>心昵美食空间</h1>
		</div>
		</center>
		<div class="three">
		<img src="img/font.jpg" width="25px" height="25px"/>团购信息<br/>
		<a href="#">1.火锅团购</a><br>
		<a href="#">2. 烧烤团购</a><br>
		<a href="#">3. 自助餐团购</a><br>
		<a href="#">4. 新春特惠</a><br>
		</div>
		</div>
		<div class="right">
		<marquee direction="up">
		<img src="img/good_1.jpg" width="150px" height="140px"/>
		<img src="img/good_2.jpg" width="148px" height="140px"/>
		<img src="img/good_3.jpg" width="148px" height="140px"/>
		</marquee>
		</div>
		</div>
		<div class="bottom">
		<hr color="#0000ff">
		<center style="font-family:'楷体'";>版权所有&copy;昵心美食空间<br/>
		地址:江门市大学路XXX号 邮编:500000 电话:0750-9999999</center>
		</div>
		</div> 
	</body>
</html>