CSS盒子模型

举报
微风洋洋 发表于 2022/03/23 09:50:07 2022/03/23
【摘要】 CSS盒子模型在CSS中算是比较重要的部分了,他已经开始涉及到网页布局和设计了,对于这一块内容要引起重视,多加练习。

📜个人简介

⭐️个人主页:微风洋洋🙋‍♂️
🍑博客领域:编程基础💡,后端💡,大数据,信息安全
🍅写作风格:干货,干货,还是tmd的干货
🌸精选专栏【JavaScript】【HTML+CSS】【Java学习笔记】【Java必刷题】
🚀支持洋洋:点赞👍、收藏⭐、留言💬

好久不见,甚是想念!
大家好🙋‍♂️
我是微风洋洋
今天这篇文章就是来和大家详细聊聊CSS盒子模型,希望大家读完有所收获,那我辛苦码字也就值了🎈🎈🎈

盒模型是CSS控制页面布局的一个非常重要的概念,页面上的所有元素,包括文本、图像、超级链接、div块等,都可以被看作盒子。

由盒子将页面中的元素包含在一个矩形区域内,这个矩形区域则称为“盒模型”。

网页页面布局的过程可以看作在页面空间中摆放盒子的过程。通过调整盒子的边框、边界等参数控制各个盒子,实现对整个网页的布局。

盒模型由内到外依次分为内容(content)、填充(padding)、边框(border)和边界(margin)4部分。

盒子的实际大小为各部分之和,下图所示的盒子宽度为:左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

在这里插入图片描述



一、盒模型的组成

🍑内容

内容(content)是盒子里的“物品”,是盒模型中必须有的部分,可以是网页上的任何元素,如文本、图片、视频等各种信息。

定义盒模型语法格式如下:

width: auto | length;

height: auto | length;

overflow: auto | visible | hidden | scroll;

举个例子👇

代码

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style type="text/css">
	* {
	font-size: 16px;
	}
	.box1 {
	height: 60px;
	width: 200px;
	background-color: #3CC;
	}
	
	.box2 {
	height: 60px;
	width: 70%;
	overflow: auto;
	background-color: #CCC;
	}
	</style>
	</head>
	<body>
	<div class="box1">第一个盒子高度是固定的,但盒子里信息过多,超出内容属性所限定的大小,盒子的高度将自动放大</div>
	<p>
	
	<div class="box2">第二个盒子高度和第一个盒子一样,是固定的,但设置了overflow属性为auto,出现滚动条,盒子高度不变。</div>
	</body>
	</html>
	

效果
在这里插入图片描述


🍑边界

边界(margin)是盒模型与其他盒模型之间的距离,使用margin属性定义。示例演示了边界设置.

定义盒模型边界语法格式如下:

margin: auto | length;

举个例子👇

代码
在这里插入图片描述

效果
在这里插入图片描述


🍑填充

填充(padding)用来设置内容和盒子边框之间的距离,可用padding属性设置。

定义盒模型填充语法格式如下:

padding: length;

举个例子👇

代码

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style type="text/css">
	div {
	height: 20px;
	width: 150px;
	background-color: #999;
	margin: 10px;
	}
	
	div#p1 {
	padding: 20px;
	}
	
	div#p2 {
	padding: 10px 20px 30px 40px;
	}
	</style>
	</head>
	<body style="font-size: 14px">
	<div id="p1">填充设置1</div>
	<div>无填充设置</div>
	<div id="p2">填充设置2</div>
	</body>
	</html>
	

效果

在这里插入图片描述

🍑边框

边框(border)是盒模型中介于填充(padding)和边界(margin)之间的分界线。

(1)边框样式

(2)边框宽度

(3)边框颜色

举个例子👇

代码

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8>
	<style type="text/css">
	div {
	width: 200px;
	background-color: #EFEFEF;
	margin: 10px;
	padding: 10px;
	}
	
	.b1 {
	border-style: inset;
	border-width: 10px;
	border-color: rgb(100%, 0%, 0%);
	}
	
	.b2 {
	border-style: double;
	border-width: thick;
	border-color: black;;
	}
	
	.b3 {
	border: groove thin rgb(255, 255, 0);
	}
	
	.b4 {
	border: #000 medium dashed;
	}
	</style>
	</head>
	<body>
	<div class="b1">边框设置1</div>
	<div class="b2">边框设置2</div>
	<div class="b3">边框设置3</div>
	<div class="b4">边框设置4</div>
	</body>
	</html>
	

效果

在这里插入图片描述



二、盒的类型

CSS中的盒子可分为block类型与inline类型,使用display属性来定义。

直接来看个例子吧,这个例子看懂了,盒的类型你也就明白了👇

代码

	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset=utf-8>
	<title>block、inline、inline-block对比</title>
	<style>
	div.div1 {
	display: block; /*div默认值*/
	width: 120px;
	height: 40px;
	margin: 2px;
	background-color: green;
	}
	div.div2 {
	display: inline; /*修改为inline类型*/
	width: 120px;
	height: 40px;
	margin: 2px;
	background-color: blue;
	}
	div.div3 {
	display: inline-block; /*inline-block类型*/
	width: 120px;
	height: 40px;
	margin: 2px;
	background-color: red;
	}
	div.div4 {
	display: inline-block;
	margin: 2px;
	background-color: grey;
	}
	</style>
	</head>
	
	<body>
	<div class="div1">block类型</div>
	<div class="div1">block类型</div>
	<hr/>
	<div class="div2">inline类型</div>
	<div class="div2">inline类型</div>
	<hr/>
	<h3>inline-block类型,设置width和height属性</h3>
	<div class="div3">inline-block类型</div>
	<div class="div3">inline-block类型</div>
	<hr/>
	<h3>inline-block类型,无width和height属性</h3>
	<div class="div4">inline-block类型</div>
	<div class="div4">inline-block类型</div>
	</body>
	</html>
	

效果

在这里插入图片描述

🔺 block类型是独占一行,而inline是可一个多个在一行,拓展的inline-block则是把block转换成与inline相似



三、CSS3新增的与盒相关的属性

🍑overflow-x与overflow-y属性

指定了盒的宽度与高度后,可能出现盒子无法承载其中内容的情况,为了避免内容溢出,使用overflow属性来指定如何显示盒中容纳不下的内容。

举个例子👇

代码

	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset=utf-8>
	<title>overflow</title>
	<style>
	span {
	display: block;
	width: 180px;
	height: 100px;
	background-color: #CCC;
	overflow-x: auto;
	overflow-y: auto;
	}
	</style>
	</head>
	<body>
	<span>这个示例将span元素定义为block类型,同时设置了overflow-x和overflow-y的属性。如果取消这两个属性的设置,指定的区域无法承载,将出现溢出……
	</span>
	</body>
	</html>
	

效果

在这里插入图片描述


🍑text-overflow属性

text-overflow属性用于指定盒子中文本溢出的显示方式,可以在盒的末尾显示一个代表省略的符号"…"。

举个例子👇

代码

	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset=utf-8>
	<title>text-overflow</title>
	<style>
	div {
	white-space: nowrap; /*确保水平方向溢出*/
	width: 300px;
	height: 30px;
	overflow-x: hidden; /*水平滚动条需要隐藏*/
	text-overflow: ellipsis; /*text-overflow效果*/
	border: 1px solid grey;
	}
	</style>
	</head>
	<body>
	<div>text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效
	</div>
	</body>
	</html>
	

效果

在这里插入图片描述


🍑box-shadow属性

box-shadow属性让盒在显示时产生阴影效果。

box-shadow属性的指定方式如下。

box-shadow: xlength ylength r color

举个例子👇

代码

	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset=utf-8>
	<title>box-shadow</title>
	<style>
	div {
	width: 200px;
	height: 100px;
	background-color: blue;
	box-shadow: 10px 10px 5px grey;
	/*box-shadow: 10px 10px 0px grey;
	box-shadow: 0px 0px 5px grey;
	box-shadow: -10px -10px 5px grey;*/
	}
	</style>
	</head>
	<body>
	<div></div>
	</body>
	</html>
	

效果

在这里插入图片描述


🍑box-sizing属性

使用box-sizing属性,可以指定用width属性与height属性指定的宽度值与高度值是否包含元素的填充区域(padding)与边框(border)的宽度与高度,从而实现更为精确的定位。

举个例子👇

代码

	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset=utf-8>
	<title>box-sizing</title>
	<style>
	div {
	width: 300px;
	border: solid 30px blue;
	padding: 30px;
	background-color: #ccc;
	margin: 20px auto;
	}
	
	div#div1 {
	box-sizing: content-box;
	}
	
	div#div2 {
	box-sizing: border-box;
	}
	</style>
	</head>
	<body>
	<div id="div1">在第一个div元素的box-sizing属性中指定content-box属性值</div>
	<div id="div2">在第二个div元素 的box-sizing属性中指定border-box属性值</div>
	</body>
	</html>
	

效果

在这里插入图片描述


下面这个例子使用了box-sizing属性,每个盒子的总宽度为浏览器宽度的50%,实现了一个精确的布局👇

代码

	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset=utf-8>
	<title>box-sizing</title>
	<style>
	div {
	width: 50%;
	height: 200px;
	float: left;
	padding: 20px;
	box-sizing: border-box;
	}
	
	div#div1 {
	border: solid 20px blue;
	}
	
	div#div2 {
	border: solid 20px green;
	}
	</style>
	</head>
	<body>
	<div id="div1">使用box-sizing属性的目的是对元素的总宽度做一个控制</div>
	<div id="div2">利用border-box属性值会使得页面布局更加方便</div>
	</body>
	</html>
	

效果

在这里插入图片描述

四、总结

CSS盒子模型在CSS中算是比较重要的部分了,他已经开始涉及到网页布局和设计了,对于这一块内容要引起重视,多加练习。


如果觉得对你有一丢丢启发的话,不妨 点赞👍、收藏⭐、留言💬支持一下,你的支持将是我继续创作的最大动力。下一篇将介绍CSS网页布局,到时不见不散❤️❤️❤️

关注,即可提高学习效率。Perfect!

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。