3.5div标签与盒子模型

最新推荐文章于 2023-02-08 10:53:47 发布

不戴眼镜的眼镜男

最新推荐文章于 2023-02-08 10:53:47 发布

阅读量420

点赞数 1

分类专栏：前端文章标签： div标签与盒子模型

本文链接：https://blog.csdn.net/BossHAO/article/details/100994978

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

3.5div标签与盒子模型

描述：div标签与盒子模型
1.以往使用页面布局，使用的是iframe框架或者frameset框架
但是在浏览各大网站的源码时，发现基本上不在使用以上两个框架了！
引出：页面布局 — div标签
2.div标签
2.1 它本质上是一个容器，里面可以编写任何其他标签，甚至可以嵌套div标签。
2.2 特点：独占一行它是一个块级元素，宽度自动和页面的宽度一致。
2.3如果没有设置div的高度和宽度，会根据浏览器的解析，自动设置成：
高度:0px 宽度:100%
如果div内有元素，而且没有设置该div的高度，会根据内容的高度来设定！
3.盒子模型
3.1 笼统的说： HTML当中任何的标签，都是以盒子模型来表示的！
3.2 必须借助浏览器的F12功能来查看以及学习！
3.3 盒子模型：
margin 外边距 border 边框 pading内边距 (content)内容 pading 内边距 border边框 margin外边距
3.4 关于内外边距的方向：上下左右
margin-top : 外边距的高度 (外边高)
margin-bottom：外边距的底
margin-left：左外边距
margin-right:右外边距
padding-top
padding-bottom
padding-left
padding-right

3.5 简写方式
margin:10px 20px 30px 40px; 顺序：top right bottom left 顺时针
margin:10px 20px ; 顺序： top bottom 10px left right 20px
margin:10px 顺序：上下左右的外边距都是10像素
padding同上！

3.6 作用: 可以在指定位置进行小范围的移动！(和定位有些相似)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div标签与盒子模型</title>
		<style type="text/css">
			#div1{
				border: 1px solid red;
				/*设置外边距*/
				/*margin-top: 10px; 
				margin-left: 30px;
				margin-right: 20px;
				margin-bottom: 10px;*/
				margin:10px 20px 10px 30px;
			}
			#div2{
				border:1px solid blue;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<!--div标签，嵌套一个无序列表-->
		<div id="div1">
			<ul>
				<li>JAVASE</li>
				<li>数据结构</li>
				<li>多线程</li>
			</ul>
		</div>
		<div id="div2">
			
		</div>
		
	</body>
</html>