css盒子模型

最新推荐文章于 2024-09-10 17:10:14 发布

忆昔年.

最新推荐文章于 2024-09-10 17:10:14 发布

阅读量118

点赞数

分类专栏：前端 CSS

本文链接：https://blog.csdn.net/rt5476238/article/details/85238198

版权

前端同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

这是css中的一个重点。

在网页中，一切皆盒子。。。
盒子一般用块元素表示
块元素和行内元素有哪些?

一个盒子通常分为四部分：
内容(content)
边框线(border)
外边距(padding)
内边距(margin)
盒模型

一、设置边框：

大部分的浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none

边框（border）的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
而且没有任何的顺序要求
border一指定就是同时指定四个边，不能分别指定

border-top
border-right
border-bottom
border-left

可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>边框</title>
	<style type="text/css">
			/*为元素设置边框
			要为一个元素设置边框必须指定三个样式
			border-width:边框的宽度
			border-color:边框颜色
			border-style:边框的样式
			*/
		.box{
			/*使用width来设置盒子内容区的宽度
			使用height来设置盒子内容区的高度
			width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，
			盒子可见框的大小由内容区，内边距和边框共同决定*/
			width: 200px;
			height: 200px;
			background-color: #bfa;
			border: red solid 10px;/*设置边框*/
			border-right: none;
			/*给四边分别设置边框*/
			border-top:red solid 10px;
			border-right:red solid 10px;
			border-bottom:red solid 10px;
			border-left:red solid 10px;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

二、设置内边距

内边距（padding），指的是盒子的内容区与盒子边框之间的距离，一共有四个方向：

padding-top
padding-right
padding-bottom
padding-left

内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
盒子的大小由内容区、内边距和边框共同决定
盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
盒子可见框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内边距</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 200px;
			background-color: #bfa;
			/*设置边框*/
			border: 10px red solid;
			/*设置上内边距*/
			padding-top: 100px;
			/*设置右内边距*/
			padding-right: 100px;
			padding-bottom: 100px;
			padding-left: 100px;
			/*
			使用padding可以同时设置四个边框的样式，规则和border-width一致
			*/
			/*padding: 100px;*/
			/*padding: 100px 200px;*/
			/*padding: 100px 200px 300px;*/
			padding: 100px 200px 300px 400px;
		}
		/*创建一个子元素box2占满box1,查看内边距效果*/
		.box2{
			width: 100%;
			height: 100%;
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="box1">
		<div class="box2"></div>
	</div>
</body>
</html>

三、设置外边距

外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置
盒子有四个方向的外边距：

margin-top
margin-right
margin-bottom
margin-left

由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>外边距</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 200px;
			background-color: #bfa;
			border: 10px solid red;
			/*设置上外边距，即盒子的上边框与其他盒子的距离*/
			/*margin-top: 100px;*/
			/*左外边距*/
			/*margin-left: 100px;*/
			/*设置右和下外边距*/
			/*margin-right: 100px;
			margin-bottom: 100px;*/
			/*
			外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动
			*/
			/*margin-left: -100px;
			margin-top: -100px;
			margin-bottom: -100px;*/
			/*margin-bottom: -100px;*/

			/*
			margin还可以设置为auto，auto一般只设置给水平方向的margin
			如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
			垂直方向外边距如果设置为auto，则外边距默认就是0
			如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中
			所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中
			*/
			/*margin-left: auto;
			margin-right: auto;*/
			/*margin-top: auto;*/
			/*
			外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,
			规则和padding一样
			*/
			/*margin: 10px 20px 30px 40px;*/
			margin: 0 auto;
		}
		.box2{
			width: 200px;
			height: 200px;
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
</body>
</html>