html盒子模型，内容区（content）、 内边距（padding）、边框（border）、外边距（margin）及行与块级元素的转换

最新推荐文章于 2024-04-23 14:30:57 发布
最新推荐文章于 2024-04-23 14:30:57 发布
阅读量1.6k 收藏 3
点赞数
文章标签： 大数据 html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/await_9/article/details/125728373
版权

布局

        文档流简介 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>布局-文档流</title>
		<style>
			/* 块元素	在页面中独占一行
							默认宽度：是父元素的全部
							默认宽度：根据内容成长
										 */
			.box1{
				width: 100px;
				background-color: yellow;
			}
			.box2{
				width: 100px;
				background-color: red;
			}
			/* 行内元素	不会独占一行，只占自己的大小
						行内元素在水平上自左向右，一行不够，自动换行
							默认宽度和高度都是被内容撑开
							*/
			span{
				background-color: #bfa;
			}
		</style>
	</head>
	<body>
		<!-- 文档流		网页是一个多层结构
						通过css可以分别为每一层设置样式
						作为用户来讲只能看见最顶上的一层
							我们创建的元素默认都在文档流中进行排序
						状态		在文档流中
								不在文档流中（脱离文档流）
						-->
		<div class="box1">我是div1</div>
		<div class="box2">我是div2</div>
		
		<span>我是span 1</span>	
		<span>我是span2</span>
		<span>我是span 1</span>
		<span>我是span2</span>
		<span>我是span 1</span>
		<span>我是span2</span>
		<span>我是span 1</span>
		<span>我是span2</span>
		<span>我是span 1</span>
		<span>我是span2</span>
	</body>
</html>

盒子模型由以下几个部分组成
                    内容区（content）：存放内容
                    内边距（padding）：内容与边框的距离
                    边框（border）：盒子的边界
                    外边距（margin）：盒子与盒子之间的位置

以下是边框的样式设置

border：宽度、样式、颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒模型</title>
		<style>
			.box1{
				/* 内容区（content）：元素中的所有子元素和文本内容的设置都是在内容区排列
							包含：width: 内容去宽度
								  height：内容区的高度*/
				width: 200px;
				height: 200px;
				background-color: #bfa;
			}
			/* 边框（border）：属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
						设置边框：需要设置三种样式
								边框的宽度：border-width
								边框的颜色：border-color
								边框的样式：border-style
									*/
			.box2{
				width: 200px;
				height: 200px;
				background-color: aqua;
				border-width: 10px;
				border-color: red;
				border-style: solid;
			}
			/* border-width：一般为3px
							语法：上，右，下，左
								  上，左右，下
								  上下，左右*/
				/* border-left-width
				 border-top-width
				 border-right-width
				 border-bottom-width*/
			.box3{
				width: 200px;
				height: 200px;
				background-color: aqua;
				border-width: 10px，20px，3px，10px;
				border-color: red;
				border-style: solid;
								
				}
				/* border-color:语法		与width相同
				 border-xxx-color
								默认使用字体颜色，不设置时*/
				/* border-style：语法	与width相同
										dotted:点状虚线
										solid：实线
										dashed：虚线
										double：双线
								默认值没有，none*/
				/* 简写：可以同时设置边框的所有样式，没有顺序要求
					border
					border-xxx:存在left、top、bottom、right*/
			.box4{
				width: 100px;
				height: 100px;
				background-color: black;
				border: 3px red solid;
			}
				 
		</style>
	</head>
	<body>
		<!-- 盒模型、盒子模型、框模型
				css将页面中的所有元素都设置为一个矩形的盒子
				布局就是将盒子摆放到合适的位置
				组成部分
					内容区（content）
					内边距（padding）
					边框（border）
					外边距（margin）-->
					
		<div class="box1">盒子内容区</div>
		<div class="box2">边框</div>
		<div class="box3"></div>
		<div class="box4"></div>
	</body>
</html>

内边距的设置 

padding：上、右、下、左

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内边距</title>
		<style>
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				border: 3px red solid;
				/* 
				 内边距（padding）
						内容与边框之间的距离
						一共有四个方向的内边距
						padding-top:
						padding-left: 
						padding-bottom: 
						padding-right: */
				/* 内边距的设置会影响盒子的大小
				背景颜色会延申到内边距上 */
				padding-top: 100px;
				padding-left: 100px;
				padding-right: 100px;
				padding-bottom: 100px;
			}
			/* padding: 简写  与border-width写法一样 */
			.inner{
				width: 100%;
				height: 100%;
				background-color: yellow;
			}
			/* 盒子的计算：内容区，内边距，边框共同计算 */
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="inner"></div>
		</div>
	</body>
</html>

外边距的设置

margin：上、右、下、左 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距</title>
		<style>
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				border: 10px red solid;
				/* 外边距（margin）
					外边距不会影响盒子可见框
					但是外边距会影响盒子的位置
						一共有四个方向的外边距
						margin: top;上外边距，设置一个正值，元素会向下移动: 
						margin-bottom: 下外边距，设置一个正值，其下边的元素会移动
						margin-left: 左外边距，设置一个正值，元素会向右移动
						margin-right:
						 元素在页面中，自左向右的顺序排列，
						 所以默认情况如果我们设置的左和上外边距，则会移动元素自身
										而向下和右都会移动其他元素
						简写：margin: 可以同时设置  上右下左*/
			margin-bottom: 100px;
			margin-left: 100px;
			margin-top: 100px;
			margin-right: 100px;
			}
			.box2{
				width: 220px;
				height: 220px;
				background-color: antiquewhite;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
	</body>
</html>

 水平布局

让盒子居中
                    常用写法：
                    width: xxxpx;
                    margin: 0 auto;

 元素水平方向的布局
                    水平方向的位置，元素在其父元素水平方向的位置由以下几个属性共同决定
                        margin-left: 
                        border-left: 
                        padding-left: 
                        width: 
                        padding-right: 
                        border-right: 
                        margin-right: 
                    一个元素在其父元素中，水平布局需要满足以下等式
                        margin-left:+border-left: +padding-left: +padding-right: +border-right: +margin-right
                         等于父元素内部宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平布局</title>
		<style>
			.outer{
				width: 800px;
				height: 200px;
				border: 10px red solid;
			}
			.inner{
				width: auto;
				height: 200px;
				background-color: aqua;
				margin-right: 100px;
				margin-left: 200px;
				
				/* 元素水平方向的布局
					水平方向的位置，元素在其父元素水平方向的位置由以下几个属性共同决定
						margin-left: 
						border-left: 
						padding-left: 
						width: 
						padding-right: 
						border-right: 
						margin-right: 
					一个元素在其父元素中，水平布局需要满足以下等式
						margin-left:+border-left: +padding-left: +padding-right: +border-right: +margin-right
						 等于父元素内部宽度
						 200+100=800
						 差值margin-right自动增加500
			
					 width: 
					 margin-left
					 margin-right: 
						 以上三个可以设置为auto
						 三个都是auto时，width最大，
						 width固定，左右外边距auto，则两边宽度相同
					让盒子居中
					常用写法：
					width: xxxpx;
					margin: 0 auto;*/
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="inner">
				
			</div>
		</div>
	</body>
</html>

垂直方向布局 

利用overflow属性处理溢出现象
                可选值：
                    visbile：默认值
                    hidden:超出部分会裁剪
                    scroll：滚动条，观看完整内容
                    auto：根据需要生成滚动条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向布局</title>
		<style>
			.outer{
				background-color: aqua;
				/* 默认情况下，父元素的高度被内容撑开 */
			}
			.inner{
				width: 100px;
				background-color: olive;
				height: 300px;
				margin-bottom: 100px;
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: yellow;
				overflow: auto;
			}
			/* 子元素在父元素的内容区中排序
				if子元素的大小大于父元素，则子元素会从父元素中溢出*/
			.box2{
				width: 100px;
				height: 400px;
				background-color: greenyellow;
			}
			/* 利用overflow属性处理溢出现象
				可选值：
					visbile：默认值
					hidden:超出部分会裁剪
					scroll：滚动条，观看完整内容
					auto：根据需要生成滚动条
					*/
			/* overflow-x水平方向处理
			 overflow-y垂直方向处理*/
		</style>
	</head>
	<body>
		<!-- <div class="outer">
			<div class="inner">
				
			</div> -->
			<div class="box1">
				<div class="box2"></div>
			</div>
		</div>
	</body>
</html>

行内元素盒模型 

display: 用来设置元素显示的类型
                        inline：将元素设置为行内元素
                        block：将元素设置为块元素
                        inline-block：将元素设置为行内块元素
                                        特点：即可以设置宽度和高度，又不会独占一行
                        table：将元素设置为一个表格
                        none：元素不在该页面显示
                    visibility：用来设置元素的显示状态
                                visible：默认值，元素在页面中正常显示
                                hidden：元素在页面中隐藏，不显示，但是依然占据页面的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行内元素盒模型</title>
		<style>
			/* 行内元素盒模型
					行内元素不支持宽度和高度
					可以设置padding，但垂直方向不会影响布局
					可以设置border，垂直方向的border不会影响页面的布局
					可以设置margin，垂直方向的margin不会影响布局*/
			.s1{
				background-color: yellow;
				/* padding: 100px; */
				
				/* border: 100px solid red; */
				margin: 100px;
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: aquamarine;
			}
			a{
				width: 100px;
				height: 100px;
				background-color: orange;
				/* display: 用来设置元素显示的类型
						inline：将元素设置为行内元素
						block：将元素设置为块元素
						inline-block：将元素设置为行内块元素
										特点：即可以设置宽度和高度，又不会独占一行
						table：将元素设置为一个表格
						none：元素不在该页面显示
					visibility：用来设置元素的显示状态
								visible：默认值，元素在页面中正常显示
								hidden：元素在页面中隐藏，不显示，但是依然占据页面的位置
								
										*/
				display: none;
			
			}
		</style>
	</head>
	<body>
		<a href="javescript">超链接</a>
		<span class="s1">我是span</span>
		<div class="box1"></div>
		
	</body>
</html>

 默认样式

默认样式：
                浏览器会元素设置一些默认样式
                默认样式会影响页面布局
                通常情况下，写网页时，必须去除默认样式
                margin：0
                padding：0
                list-style：none（去除项目符号）
           

 

 

Alt.9
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解盒模型大小取决于它的padding，margin，border数值
11-21
盒模型规定了元素框处理元素内容width与height值、内边距padding、边框border 和 外边距margin 的数值大小。边框内的空白是内边距padding，边框外的空白是外边距margin，如下所示，这个盒模型元素框的宽度值=内容区域的宽度+2（内边距+外边距+边框），也就是该示例中的元素宽度为170px，需要注意的是在 css 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。（浏览器查看的时候记得打开控制台F12，点击对应的元素查看） <!DOCTYPE html> <html lang=
CSS第三章：3.详解盒子模型 box-module（内容区边框、内间距padding、外间距margin）
要思考，要努力
04-28 698
一、内容区、边框1.请移步此文档：box-module 内容区及边框详解 二、盒装型 · padding 内间距1.内边距简介：· 内容区和边框之间的距离是内间距 · 一共有4个方向的内间距： padding-top padding-right padding-bottom padding-left · 内容区中的颜色会延伸到内边距上 2.HTML代码： 3.CSS代码： 4.显示效果： 5.文档中，padding方法的其他参数的使用方法： 三、盒装型 · margin 外边距 1.外边距
html常见盒子居中小结
热门推荐
a785975139的博客
12-04 4万+
html常见盒子居中小结     在写界面时，经常被元素居中的问题困扰。经过一番查阅资料和摸索，鄙人实践出了一套常见元素居中的办法，现在记录下来，以便日后参考。     元素在标准文档流和非标准流中的表现有所不同，所以居中方法也要分开来进行说明。     一、标准文档流 标准文档流里，元素被分为块级元素和行内元素。常用的块级元素有div、h1~h7、li等，它们能够设置宽和高；如果不显示设
CSS盒子模型及属性
annotation_PLZ的博客
07-24 1586
盒⼦模型 是⽹⻚设计中经常⽤到的⼀种思维模型，由四个部分构成，从内⽽外分别为内容区（ content ）、内边距（ padding ）、边框（ border ）和外边距（ margin ）,CSS为这四部分提供了⼀系列相关属性，通过对这些属性的设置可以丰富盒⼦的表现效果。...
DOM操作元素文本内容：innerHTML、innerText、value
YY的博客
10-19 1618
DOM操作元素文本内容：innerHTML、innerText、value
html表格只设外边框，只设内边框
qq_50846089的博客
05-31 6797
表格只设外边框，只设内边框的情况
html--盒子的边框属性（border）
weixin_47295886的博客
07-12 1万+
border的属性+属性值==边框
css border边距 在盒子内部呈现，不占用外部Px
大宅广的博客
11-14 2万+
box-sizing: border-box; border: solid 1px white; 绿色边框即为 边距内部呈现效果；
CSS基础笔记六，DIV盒子模型（content内容，内边距paddins，边框border，外边距margin）
qq_55006020的博客
06-28 1274
盒子模型分为四个区域内容，可以往里面安放的元素内边距padding（可以用像素填充，也可以用百分比，还可以指定上下左右的不同的款式），简写模式，1个值的情况下 就是上下左右 四个值是上右下左边框border边框的样式 有实线（solid），虚线（dashed），双实线（double），点线（dotted）border-width 指定边框的宽度边框可以设置圆角（border-rddius） 用百分比或者像素边框的不同方位 border-left/top/rigth/bottom。
看完不迷糊的 CSS 盒子模型介绍
01-18
网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS...
css盒子模型详解加示例
12-13
一个盒子的构成：盒子中的内容：content盒子的边框：border盒子边框与内容之间的距离：称为填充—padding内边距（内补丁）如果有多个盒子存在，盒子与盒子之间的距离：称为边界—margin，外边距（外补丁） ...
盒子模型
01-20
所谓的盒子模型就是把HTML页面的元素看作一个矩形盒子，矩形盒子是由内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成。 盒子模型示意图如下： 2. 盒子模型相关样式属性 盒子的内容宽度...
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
12-14
本文介绍的是利用CSS3的新属性box-sizing，解决div宽度设置width:100%后再设置padding或margin超出父元素的问题，有需要的朋友们可以参考借鉴。 语法 box-sizing: content-box|border-box|inherit; 值一、content-...
ELK日志系统的搭建
adminstate的博客
04-23 1035
ELK日志系统搭建
【Hadoop】-HDFS的存储原理[4]
weixin_63106307的博客
04-20 1397
HDFS的存储原理是将大文件切分成固定大小的数据块，并在集群中的不同节点上存储数据块的，以提高数据的可靠性和性能。同时，HDFS采用流式的数据读写方式，减少了寻址的开销，提高了数据的传输效率。
ElasticSearch 入门学习
最新发布
灰熊
04-23 748
ElasticsSearch 是一个分布式的实时文档存储，每个字段可以被索引与搜索也是一个分布式实时分析搜索引擎也是一个能胜任上百个服务节点的扩展，并支持 PB 级别的结构化或者非结构化数据。
深入理解Java消息中间件-RabbitMQ
u011532237的博客
04-21 823
RabbitMQ是基于高级消息队列协议（AMQP）实现的一款开源消息代理软件，旨在提供高可用性、安全、互操作性强的企业消息系统。它由Erlang编写，因而继承了Erlang语言高并发、高可靠性的特点。
大数据——Zookeeper ZBA协议（四）
大数据爱好者的博客
04-20 887
对于分布式框架而言，基本上都会遵循CAP三大理论CAP(CAP理论是从客户端角度出发的！！！C(Consistency)：一致性。在一段时间内，访问这个集群获取到的数据是相同的。注意，此时，在一个时间段内，不要求每一台服务器的数据都一样，只要保证客户端获取到的数据一样就行A(Availability)：可用性。当客户端对集群中的节点发起请求的时候，节点能够在合理的时间内(一般理解为立刻)进行响应 - 时效性。注意，此处的可用性和服务器的高可用不是一回事儿！！！
大数据技术应用实训室解决方案
whwzzc的博客
04-22 1064
大数据实验实训课程体系的设计依据主要围绕培养目标、培养方案和课程体系建设三个方面来展开。大数据实验实训课程的设计旨在培养具备大数据理论知识和实践技能的专业人才。具体而言，这些人才应该能够熟练掌握大数据处理和分析的核心技术，具备独立设计和实施大数据应用的能力。同时，他们还应具备创新思维和团队协作精神，能够适应大数据行业的快速发展和变化。通过实训课程的训练，学生能够熟悉主流的大数据平台和工具，了解大数据应用的最新趋势和场景，为未来的职业发展打下坚实的基础。
概括什么是盒子模型,盒子模型的要素(内容、内边距padding、边框border、外边距mar
09-15
盒子模型是一种用来描述网页元素呈现形式的概念。它将每个网页元素视为一个矩形盒子，包含内容、内边距、边框和外边距四个要素。 盒子模型的要素包括： 1. 内容（Content）：指的是元素所包含的HTML标记或文本内容。它决定了盒子模型的实际大小。 2. 内边距（Padding）：指的是内容与边框之间的空白区域。内边距的大小可以通过CSS进行设置，常用于调整元素的内部间距和边界。 3. 边框（Border）：指的是包围内容和内边距的线条或图案。边框的样式、宽度和颜色可以通过CSS进行定义，常用于营造元素的边界效果。 4. 外边距（Margin）：指的是边框与周围元素之间的空白区域。外边距的大小可以通过CSS进行设置，常用于调整元素与其他元素之间的间距和位置关系。 通过合理设置这四个要素，可以达到控制网页元素布局、样式和与其他元素间距的目的。盒子模型在网页设计和布局中扮演着重要的角色，能够帮助开发者更好地控制网页布局的外观与行为。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值