devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：AllinToyou | 2024-05-27 09:28:00

赞

踩

padding 内容区

布局

        文档流简介 

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>布局-文档流</title>
  6. 		<style>
  7. 			/* 块元素	在页面中独占一行
  8. 							默认宽度：是父元素的全部
  9. 							默认宽度：根据内容成长
  10. 										 */
  11. 			.box1{
  12. 				width: 100px;
  13. 				background-color: yellow;
  14. 			}
  15. 			.box2{
  16. 				width: 100px;
  17. 				background-color: red;
  18. 			}
  19. 			/* 行内元素	不会独占一行，只占自己的大小
  20. 						行内元素在水平上自左向右，一行不够，自动换行
  21. 							默认宽度和高度都是被内容撑开
  22. 							*/
  23. 			span{
  24. 				background-color: #bfa;
  25. 			}
  26. 		</style>
  27. 	</head>
  28. 	<body>
  29. 		<!-- 文档流		网页是一个多层结构
  30. 						通过css可以分别为每一层设置样式
  31. 						作为用户来讲只能看见最顶上的一层
  32. 							我们创建的元素默认都在文档流中进行排序
  33. 						状态		在文档流中
  34. 								不在文档流中（脱离文档流）
  35. 						-->
  36. 		<div class="box1">我是div1</div>
  37. 		<div class="box2">我是div2</div>
  38. 		
  39. 		<span>我是span 1</span>	
  40. 		<span>我是span2</span>
  41. 		<span>我是span 1</span>
  42. 		<span>我是span2</span>
  43. 		<span>我是span 1</span>
  44. 		<span>我是span2</span>
  45. 		<span>我是span 1</span>
  46. 		<span>我是span2</span>
  47. 		<span>我是span 1</span>
  48. 		<span>我是span2</span>
  49. 	</body>
  50. </html>

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

以下是边框的样式设置

border：宽度、样式、颜色

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>盒模型</title>
  6. 		<style>
  7. 			.box1{
  8. 				/* 内容区（content）：元素中的所有子元素和文本内容的设置都是在内容区排列
  9. 							包含：width: 内容去宽度
  10. 								  height：内容区的高度*/
  11. 				width: 200px;
  12. 				height: 200px;
  13. 				background-color: #bfa;
  14. 			}
  15. 			/* 边框（border）：属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
  16. 						设置边框：需要设置三种样式
  17. 								边框的宽度：border-width
  18. 								边框的颜色：border-color
  19. 								边框的样式：border-style
  20. 									*/
  21. 			.box2{
  22. 				width: 200px;
  23. 				height: 200px;
  24. 				background-color: aqua;
  25. 				border-width: 10px;
  26. 				border-color: red;
  27. 				border-style: solid;
  28. 			}
  29. 			/* border-width：一般为3px
  30. 							语法：上，右，下，左
  31. 								  上，左右，下
  32. 								  上下，左右*/
  33. 				/* border-left-width
  34. 				 border-top-width
  35. 				 border-right-width
  36. 				 border-bottom-width*/
  37. 			.box3{
  38. 				width: 200px;
  39. 				height: 200px;
  40. 				background-color: aqua;
  41. 				border-width: 10px，20px，3px，10px;
  42. 				border-color: red;
  43. 				border-style: solid;
  44. 								
  45. 				}
  46. 				/* border-color:语法		与width相同
  47. 				 border-xxx-color
  48. 								默认使用字体颜色，不设置时*/
  49. 				/* border-style：语法	与width相同
  50. 										dotted:点状虚线
  51. 										solid：实线
  52. 										dashed：虚线
  53. 										double：双线
  54. 								默认值没有，none*/
  55. 				/* 简写：可以同时设置边框的所有样式，没有顺序要求
  56. 					border
  57. 					border-xxx:存在left、top、bottom、right*/
  58. 			.box4{
  59. 				width: 100px;
  60. 				height: 100px;
  61. 				background-color: black;
  62. 				border: 3px red solid;
  63. 			}
  64. 				 
  65. 		</style>
  66. 	</head>
  67. 	<body>
  68. 		<!-- 盒模型、盒子模型、框模型
  69. 				css将页面中的所有元素都设置为一个矩形的盒子
  70. 				布局就是将盒子摆放到合适的位置
  71. 				组成部分
  72. 					内容区（content）
  73. 					内边距（padding）
  74. 					边框（border）
  75. 					外边距（margin）-->
  76. 					
  77. 		<div class="box1">盒子内容区</div>
  78. 		<div class="box2">边框</div>
  79. 		<div class="box3"></div>
  80. 		<div class="box4"></div>
  81. 	</body>
  82. </html>

内边距的设置 

padding：上、右、下、左

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>内边距</title>
  6. 		<style>
  7. 			.box1{
  8. 				width: 200px;
  9. 				height: 200px;
  10. 				background-color: #bfa;
  11. 				border: 3px red solid;
  12. 				/* 
  13. 				 内边距（padding）
  14. 						内容与边框之间的距离
  15. 						一共有四个方向的内边距
  16. 						padding-top:
  17. 						padding-left: 
  18. 						padding-bottom: 
  19. 						padding-right: */
  20. 				/* 内边距的设置会影响盒子的大小
  21. 				背景颜色会延申到内边距上 */
  22. 				padding-top: 100px;
  23. 				padding-left: 100px;
  24. 				padding-right: 100px;
  25. 				padding-bottom: 100px;
  26. 			}
  27. 			/* padding: 简写  与border-width写法一样 */
  28. 			.inner{
  29. 				width: 100%;
  30. 				height: 100%;
  31. 				background-color: yellow;
  32. 			}
  33. 			/* 盒子的计算：内容区，内边距，边框共同计算 */
  34. 		</style>
  35. 	</head>
  36. 	<body>
  37. 		<div class="box1">
  38. 			<div class="inner"></div>
  39. 		</div>
  40. 	</body>
  41. </html>

外边距的设置

margin：上、右、下、左 

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>外边距</title>
  6. 		<style>
  7. 			.box1{
  8. 				width: 200px;
  9. 				height: 200px;
  10. 				background-color: #bfa;
  11. 				border: 10px red solid;
  12. 				/* 外边距（margin）
  13. 					外边距不会影响盒子可见框
  14. 					但是外边距会影响盒子的位置
  15. 						一共有四个方向的外边距
  16. 						margin: top;上外边距，设置一个正值，元素会向下移动: 
  17. 						margin-bottom: 下外边距，设置一个正值，其下边的元素会移动
  18. 						margin-left: 左外边距，设置一个正值，元素会向右移动
  19. 						margin-right:
  20. 						 元素在页面中，自左向右的顺序排列，
  21. 						 所以默认情况如果我们设置的左和上外边距，则会移动元素自身
  22. 										而向下和右都会移动其他元素
  23. 						简写：margin: 可以同时设置  上右下左*/
  24. 			margin-bottom: 100px;
  25. 			margin-left: 100px;
  26. 			margin-top: 100px;
  27. 			margin-right: 100px;
  28. 			}
  29. 			.box2{
  30. 				width: 220px;
  31. 				height: 220px;
  32. 				background-color: antiquewhite;
  33. 			}
  34. 		</style>
  35. 	</head>
  36. 	<body>
  37. 		<div>
  38. 			<div class="box1"></div>
  39. 			<div class="box2"></div>
  40. 		</div>
  41. 	</body>
  42. </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
                         等于父元素内部宽度

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>水平布局</title>
  6. 		<style>
  7. 			.outer{
  8. 				width: 800px;
  9. 				height: 200px;
  10. 				border: 10px red solid;
  11. 			}
  12. 			.inner{
  13. 				width: auto;
  14. 				height: 200px;
  15. 				background-color: aqua;
  16. 				margin-right: 100px;
  17. 				margin-left: 200px;
  18. 				
  19. 				/* 元素水平方向的布局
  20. 					水平方向的位置，元素在其父元素水平方向的位置由以下几个属性共同决定
  21. 						margin-left: 
  22. 						border-left: 
  23. 						padding-left: 
  24. 						width: 
  25. 						padding-right: 
  26. 						border-right: 
  27. 						margin-right: 
  28. 					一个元素在其父元素中，水平布局需要满足以下等式
  29. 						margin-left:+border-left: +padding-left: +padding-right: +border-right: +margin-right
  30. 						 等于父元素内部宽度
  31. 						 200+100=800
  32. 						 差值margin-right自动增加500
  33. 			
  34. 					 width: 
  35. 					 margin-left
  36. 					 margin-right: 
  37. 						 以上三个可以设置为auto
  38. 						 三个都是auto时，width最大，
  39. 						 width固定，左右外边距auto，则两边宽度相同
  40. 					让盒子居中
  41. 					常用写法：
  42. 					width: xxxpx;
  43. 					margin: 0 auto;*/
  44. 			}
  45. 		</style>
  46. 	</head>
  47. 	<body>
  48. 		<div class="outer">
  49. 			<div class="inner">
  50. 				
  51. 			</div>
  52. 		</div>
  53. 	</body>
  54. </html>

垂直方向布局 

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

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>垂直方向布局</title>
  6. 		<style>
  7. 			.outer{
  8. 				background-color: aqua;
  9. 				/* 默认情况下，父元素的高度被内容撑开 */
  10. 			}
  11. 			.inner{
  12. 				width: 100px;
  13. 				background-color: olive;
  14. 				height: 300px;
  15. 				margin-bottom: 100px;
  16. 			}
  17. 			.box1{
  18. 				width: 200px;
  19. 				height: 200px;
  20. 				background-color: yellow;
  21. 				overflow: auto;
  22. 			}
  23. 			/* 子元素在父元素的内容区中排序
  24. 				if子元素的大小大于父元素，则子元素会从父元素中溢出*/
  25. 			.box2{
  26. 				width: 100px;
  27. 				height: 400px;
  28. 				background-color: greenyellow;
  29. 			}
  30. 			/* 利用overflow属性处理溢出现象
  31. 				可选值：
  32. 					visbile：默认值
  33. 					hidden:超出部分会裁剪
  34. 					scroll：滚动条，观看完整内容
  35. 					auto：根据需要生成滚动条
  36. 					*/
  37. 			/* overflow-x水平方向处理
  38. 			 overflow-y垂直方向处理*/
  39. 		</style>
  40. 	</head>
  41. 	<body>
  42. 		<!-- <div class="outer">
  43. 			<div class="inner">
  44. 				
  45. 			</div> -->
  46. 			<div class="box1">
  47. 				<div class="box2"></div>
  48. 			</div>
  49. 		</div>
  50. 	</body>
  51. </html>

行内元素盒模型 

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

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>行内元素盒模型</title>
  6. 		<style>
  7. 			/* 行内元素盒模型
  8. 					行内元素不支持宽度和高度
  9. 					可以设置padding，但垂直方向不会影响布局
  10. 					可以设置border，垂直方向的border不会影响页面的布局
  11. 					可以设置margin，垂直方向的margin不会影响布局*/
  12. 			.s1{
  13. 				background-color: yellow;
  14. 				/* padding: 100px; */
  15. 				
  16. 				/* border: 100px solid red; */
  17. 				margin: 100px;
  18. 			}
  19. 			.box1{
  20. 				width: 200px;
  21. 				height: 200px;
  22. 				background-color: aquamarine;
  23. 			}
  24. 			a{
  25. 				width: 100px;
  26. 				height: 100px;
  27. 				background-color: orange;
  28. 				/* display: 用来设置元素显示的类型
  29. 						inline：将元素设置为行内元素
  30. 						block：将元素设置为块元素
  31. 						inline-block：将元素设置为行内块元素
  32. 										特点：即可以设置宽度和高度，又不会独占一行
  33. 						table：将元素设置为一个表格
  34. 						none：元素不在该页面显示
  35. 					visibility：用来设置元素的显示状态
  36. 								visible：默认值，元素在页面中正常显示
  37. 								hidden：元素在页面中隐藏，不显示，但是依然占据页面的位置
  38. 								
  39. 										*/
  40. 				display: none;
  41. 			
  42. 			}
  43. 		</style>
  44. 	</head>
  45. 	<body>
  46. 		<a href="javescript">超链接</a>
  47. 		<span class="s1">我是span</span>
  48. 		<div class="box1"></div>
  49. 		
  50. 	</body>
  51. </html>

 默认样式

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

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/630972
推荐阅读