第五章 css盒模型

猫咪朵朵

已于 2024-10-09 11:10:59 修改

阅读量672

点赞数 29

文章标签： css 前端

于 2024-10-09 11:02:04 首次发布

本文链接：https://blog.csdn.net/2301_80634189/article/details/142750303

版权

5.1盒模型定义

概念：盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。
盒模型的组成：
（1）content（内容区）
（2）padding（填充区）
（3）border（边框区）
（4）margin（外边界区）

5.2css元素的高度和宽度

1. 盒模型的宽度
盒模型的宽度 =左外边距 ((margin- \lg deft)+左边框 ( border - left ) +左内边距( padding- left) +内容宽度 ( width) +右内边距 ( padding- right) +右边框 ( border- right) +右外边距 ( margin- right)。
2. 盒模型的高度
盒模型的高度=上外边距 ( margin- top) +上边框 ( border- top) +上内边距 ( padding- top) +内容高度 ( height) +下内边距 ( padding- bottom) +下边框 ( border- bottom) +下外边距(margin-botom)。
注意：如果为行级元素设置宽度高度，需要为元素设置display属性

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第五章</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			div{
				width: 40px;
				height: 30px;
				border: 10px #00ff00 solid;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

5.3边距设置和边框设置

margin- border-padding模型是最常见的盒子模型，它们各自的四条边同时设置时，均按上下左右的顺序（顺时针）

5.3.1外边距设置

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

语法：margin-方向：length|percent|auto

length:长度值和长度单位

percent：基于父对象的高度

auto：自动提取边距值，是默认值

说明：设置上，外边距始终透明，内联元素必须要设定元素高宽属性，或者设定position属性为absolute

5.3.2外边距的合并

1.行级元素外边距合并

行级元素的盒子相遇，盒子与盒子之间的距离等于两个盒子外边距的总和

2.块级元素外边距合并

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

5.3.3内边距设置

元素的内边距用来控制边框和内容区之间的空白距离，并非实体，用padding属性表示

5.3.4边框设置

边框四条边分别为border-方向，它的属性与内外边距属性类似，既可以使用复合属性，也可以使用单边属性，border属性通常有3种：样式（border-style），宽度（border-width）,颜色（border-color）

1.边框颜色

div{
				width: 40px;
				height: 30px;
				margin: 20px;
				padding:20px;
				border-top: 10px #00ff00 solid;
				border-right: 10px #ff0000 solid;
				border-bottom: 10px #0000ff solid;
				border-left: 10px #000000 solid;
			}

2.边框样式

border-style是一个复合属性，可以同时取1-4个值，取值方式与外边距相似

div{
				width: 40px;
				height: 30px;
				margin: 20px;
				padding:20px;
				border-top: 10px #00ff00 solid;
				border-right: 10px #ff0000 dashed;
				border-bottom: 10px #0000ff dotted;
				border-left: 10px #000000 double;
			}

3.边框宽度

border-width也是一个复合属性，可以直接输入长度，但不可以为负值，或者选择系统预设属性

div{
				width: 40px;
				height: 30px;
				margin: 20px;
				padding:20px;
				border-top: 10px #00ff00 solid;
				border-right: thin #ff0000 dashed;
				border-bottom:medium #0000ff dotted;
				border-left: thick #000000 double;
			}

5.3.5新增边框属性

1.圆角边框

border-radius：设置边框四个角有弧度成为圆角，需要设置相关参数

div{
				width: 40px;
				height: 30px;
				margin: 20px;
				padding:20px;
				border-top: 10px #00ff00 solid;
				border-right: thin #ff0000 dashed;
				border-bottom:medium #0000ff dotted;
				border-left: thick #000000 double;
				border-radius:25px;
			}

2.阴影边框

box-shadow:向四个添加1-多个阴影，需要设置相关参数

div{
				width: 40px;
				height: 30px;
				margin: 20px;
				padding:20px;
				border-top: 10px #00ff00 solid;
				border-right: thin #ff0000 dashed;
				border-bottom:medium #0000ff dotted;
				border-left: thick #000000 double;
				border-radius:25px;
				/*右偏移量，下偏移量，模糊距离，颜色*/
				box-shadow: -15px 20px 50px #ff00ff;
			}

3.图片绘制边框

border-image：设置所有边框用图片显示，需要嵌入相关图片，但部分浏览器不支持此属性

示例：

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

5.4css元素定位

所谓定位，简单的来说就是将盒子定在某一个位置。所以定位其实也是按照规则进行摆盒子，其规则为：定位 = 定位模式 + 边偏移。

语法：position:relative | absolute | static | fixed。

5.4.1static定位

static 没有特别的设定，是默认值，称静态定位。

示例：

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

	</body>
</html>

5.4.2relative定位

relative是相对定位，生成相对定位元素，并用于其正常位置进行定位，参考自身静态位置通过 top(上),bottom（下）,left（左）,right（右）定位，其它盒子不受影响。

.son1{
				
				border:2px double red;
				background-color:yellow;
				width:200px;
				
				height:80px;
				position:relative;
				top:10px;
				left:30px;
				}

5.4.3absolute定位

absolute 脱离文档流，是绝对定位，通过 top,bottom,left,right 定位。

1.相对于浏览器的绝对定位。

.son1{
				
				border:2px double red;
				background-color:yellow;
				width:200px;
				
				height:80px;
				position:absolute;
				top:10px;
				left:30px;
				}

2.相对于父盒子绝对定位

.father{
				border:2px solid red;
				
				width:300px;
				
				height:250px;
				
				position: relative;
				}
				.son1{
				
				border:2px double red;
				background-color:yellow;
				width:200px;
				
				height:80px;
				position:absolute;
				top:10px;
				right:30px;
				}

5.4.4fixed定位

fixed类似于absolute，但在固定定位中，盒子的位置不随滚动条的移动而改变位置，相对于浏览器窗口是固定不变的。

.father{
				border:2px solid red;
				
				width:300px;
				
				height:250px;
				
				}
				.son1{
				
				border:2px double red;
				background-color:yellow;
				width:200px;
				
				height:80px;
				position:fixed;
				top:10px;
				right:30px;
                }

5.5css浮动

使用浮动（float）和清除（clear）属性设置，可以解决各种页面错位现象

5.5.1盒子的浮动添加

语法：float：left | right | none

参数： left元素浮动到左边，即向左侧靠拢，则右边可以有文字环绕； right 元素浮动到右边，即向右侧靠拢，左边可以有文字环绕；默认值 none 就是标准流通常的显示状态。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>5.12</title>
		<style type="text/css">
				
				.father{
				
				background-color:#FFCCFF;
				
				border:2px solid red;
				
				padding: 5px;
				}
				.father div{
				
				width:100px;
				height:20px;
				padding: 10px;
				margin:10px;
				border:2px dashed blue;
				background-color:#CCFFFF;
		      }
		.father p{
		
		border:2px dotted green;
		
		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>

如果把子盒子1的 float属性修改，可实现子盒子1的左浮动，下面元素依次上移填充。效果如图所示。代码如下：<div style="float:left;">左浮动盒子 1<v>

如果把三个子盒子的float属性同时修改为右浮动，可实现多盒子处于同一行内，并有文字环绕的效果如图所示。代码如下：<div style="float: right;">右浮动盒子1</div>
<div style="float: right;">右浮动盒子2</div>
<div style="float: right;">右浮动盒子3</div>

5.5.2盒子的浮动清除

元素浮动后，下面的元素内容会自动上移，结果就会受到上面浮动元素的影响，如果想
要清除这种影响，需要使用clear属性完成。
由于浮动元素可以清除，是相对定位属性的优势，因而浮动属性成为控制分栏布局的最
好工具
语法：clear: left I right I both I none
参数：left清除左边浮动元素，即不允许左边有浮动对象；right清除右边浮动元素，即
不允许右边有浮动对象；Both同时清除左右两边的浮动元素，即不允许左右两边有浮动对
象；默认值none。

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

<!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="8Opx" height="4Opx" />
					</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>
					</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>