第五章CSS盒模型

最新推荐文章于 2024-11-12 22:56:44 发布

吴白白白摆

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量952

点赞数 39

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_81609959/article/details/142750258

版权

5.1盒模型的定义

W3C组织建议把所有网页上的对象都放在一个盒子(box)中，设计者可以通过创建定义来控制这个盒子的各种属性，这些对象包括段落、列表、标题、图片及层。

5.2 CSS元素的高度和宽度

当设计者布局一个网页时，网页最终的宽度和高度会超出预计的数值，这是因为盒模型的宽度或高度计算误差造成的。指定一个CSS元素的宽度和高度属性时，只是设置内容区域的宽度和高度。而浏览器实际大小的元素，还必须添加内边距、外边距和边框。而增加或减少内边距、外边距和边框，不会影响内容区域的尺寸，只会增加盒模型的总尺寸。

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		*{
			margin: 0px;
		    padding: 0px;
		}
		div{
			width: 40px;
			height: 30px;
			border: 10px #00f000 solid;
		}
	</style>
</head>

5.2.1 盒模型的宽度

盒模型的宽度=左外边距(margin-len)+左边框(border-let)+左内边距(padding-lef)+内容宽(width)+右内边距(padding-right)+右边框(border-right)+右外边距(margin- right)。

5.1.2 盒模型的高度

盒模型的高度=上外边距(margin-top)+上边框(bonder-op)+上内边距(paddingp)+内容高(height)+下内边距(mdding-boom)+下边框(bondier-botom)+下外边距(margin-bottom)。

5.3 边距设置和边框设置

5.3.1 外边距设置

5.3.1.1 上外边距

语法:margin-top:lengthl percent l auto

参数:lemgth包括长度值和长度单位，包括绝对单位和相对单位。percent是基于父对多的高度。auto值为自动提取边距值，是默认值。

说明:设置对象上外边距、外边距始终透明。内联元素要使用该属性，必须先设定元的height 属性或widh属性，或者设定position属性为absolute。

5.3.1.2 右外边距

语法:margin-right:length | percent lauto
参数:同margin-top。
说明:同margin-top。

5.3.1.3 下外边距

语法:margin-bottom:length | percent l auto
参数:同 margin-top。
说明:同 margin-top。

5.3.1.4 左外边距

语法:margin-left:length | percentl | auto
参数:同 margin-top。
说明:同margin-top。

5.3.1.5 外边距

语法:margin:length | percent | auto

参数:iengh 包括长度值和长度单位，包括绝对单位和相对单位。pereent是基于父对多的高度，左右外边距允许使用负数。auto值为自动提取边距值，是默认值。

说明:设置对象四边的外边距，包括margin-top(上外边距)、margin-right(右外边距)、margin-botom下外边距)、margin-lef(左外边距)，外边距始终是透明的

5.3.2 外边距的合并

5.3.2.1 行级元素外边距合并

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.5</title>
		<style type="text/css">
			*{
				margin : 50px ;
			}
			.hb1{
				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><span class="hb2">粉红色 span</span>
	</body>
</html>

5.3.2.2 块级元素外边距合并

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.6</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.3 内边距设置

div{
				width: 40px;
				height: 30px;
				border: 10px #00f000 solid;
				margin: 20px;
				padding: 20px;
			}

5.3.4 边框设置

border: 10px #00f000 solid;

5.3.4.1上边框

语法:border-top:border-style l border-width l border-color
参数:该属性是复合属性。需要通过参数设置来实现。

border-top: 10px #00f000 solid;/*上边框*/

5.3.4.2右边框

浜法:border-right:border-style l border-widthl border-color

参数:该属性是复合属性。需要通过参数设置来实现。

border-right: 10px #000000 solid;/*右边框*/

5.3.4.3下边框

谣法:border-bottom:border-stylelborder-width l border-color

参数:该属性是复合属性。需要通过参数设置来实现。

	border-bottom: 10px #00f000 solid;/*下边框*/

5.3.4.4 左边框

语法:border-left:border-style l border-width l border-color

参数:该属性是复合属性。需要通过参数设置来实现。

	border-left: 10px #ff0000 solid;/*左边框*/

5.3.4.5 边框样式

border-top: 10px #00f000 solid;/*上边框*/
border-bottom: 10px #00f000 dashed;/*下边框*/
border-left: 10px #ff0000 dotted;/*左边框*/
border-right: 10px #000000 double;/*右边框*/

5.3.4.6 边框宽度

	border-top: 10px #00f000 solid;/*上边框*/
	border-bottom: thin #00f000 dashed;/*下边框*/
	border-left: medium #ff0000 dotted;/*左边框*/
	border-right:thick #000000 double;/*右边框*/

5.3.4.7 边框颜色

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

5.3.5 新增边框属性

5.3.5.1圆角边框

	border-radius: 25px;

5.3.5.2阴影边框

正为右负为左，正为下负为上，

/*右偏移量，下偏移量，阴影宽度，颜色*/
				box-shadow: -15px 20px 5px #ff00ff;

5.3.5.3图片绘制边框

5.4 CSS元素的定位

5.4.1 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;
			}
			.sonl{
				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="sonl">子盒子1:无定位的盒子
		<h2>静态定位的盒子</h2>
		</div>
		<div class="son2">子盒子2:无定位的盒子
		</div>
		</div>
	</body>
</html>

5.4.2 relative定位

相对原来位置偏移

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

5.4.3 absolute定位

5.4.3.1 相对浏览器绝对定位

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

5.4.3.2 相对父盒子绝对定位

父盒子设置了相对定位

.father{
				border :2px solid red;
				width : 300px;
				height : 250px;
				position:relative;
			}
			.sonl{
				border : 2px double red;
				background-color : yellow;
				width :200px;
				height: 80px;
				position:absolute;
				bottom:20px;
				left:30px;
			}

5.4.4 fixed定位

无视页面滑动，位置不变

	.sonl{
				border : 2px double red;
				background-color : yellow;
				width :200px;
				height: 80px;
				position:fixed;
				bottom:20px;
				left:30px;
			}

5.5 CSS元素的浮动

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

5.5.1 盒子的浮动添加

语法:float:leftl rightl none
参数:let 元素浮动到左边，即向左侧靠拢，则右边可以有文字环绕;right 元素浮动到右边、即向右侧靠拢，左边可以有文字环绕;默认值mone 就是标准流通常的显示状态。、

<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>css 中,有一个 foat 属性,默认为 none,也就是标准流通常的情况。若果将 foat 属性的值设置为 ]eft 或 nght,元素就会向其父级元素的左侧或右侧靠近,同时默认的情况下,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度确定。</p>
		</div>
	</body>

5.5.2 盒子的浮动清除

语法:clear:left l rightl both l none
参数:len 清除左边浮动元素，即不允许左边有浮动对象;ght清除右边浮动元素，即不允许右边有浮动对象;Both同时清除左右两边的浮动元素，即不允许左右两边有浮动对象;默认值 none。

<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 style="clear:both;">css 中,有一个 foat 属性,默认为 none,也就是标准流通常的情况。若果将 foat 属性的值设置为 ]eft 或 nght,元素就会向其父级元素的左侧或右侧靠近,同时默认的情况下,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度确定。</p>
		</div>
	</body>

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/bgl.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 ;
			}
			.tow{
				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 ;
			}
			.boftom{
				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="tow">
				<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 ="boftom">
				<hr color= " #0000FF" >
				<center sbyle="font-famiy:'楷体'";>版权所有&copy;昵心美食空间<br/>
				地址:江门市大学路XXX号邮编:500000 电话:0750-9999999</center>
				</div>
				</div>
	</body>
</html>