第一部分盒子模型和PS基本操作

猛女永不落泪

已于 2023-12-02 16:27:44 修改

阅读量287

点赞数 11

分类专栏： Web前端基础笔记文章标签： javascript 前端 html

于 2023-11-29 20:50:03 首次发布

本文链接：https://blog.csdn.net/weixin_71027798/article/details/134698866

版权

Web前端基础笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

0057 盒子模型-内边距

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			div{
				width: 500px;
				height: 300px;
				background: yellow;
				text-align: justify;
				/* padding: 30px;
				padding: 20px 30px;
				padding: 10px 20px 30px; */
				padding: 10px 20px 30px 40px;
				/* 内边距
				 
				 1个值，4个方向一样
				 2个值，上下，左右
				 3个值，上，左右，下
				 4个值，上右下左，顺时针方向
				 */
			}
		</style>
	</head>
	<body>
		<div>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam quod corrupti blanditiis inventore, expedita delectus assumenda cumque eos qui, dolor doloribus officia sit minima dicta in unde odio. Similique, ullam!
		</div>
	</body>
</html>

0058 盒子模型-内边距特性

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			/* 
			1. 背景色蔓延到内边距
			2. 可以设置单一方向吗？
				padding-方向：top bottom left right
			 */
			*{
				padding: 0;
			}
			div{
				width: 300px;
				height: 300px;
				/* padding: 30px 0 0 0 ; */
				padding-top: 10px;
				background: yellow;
			}
			ul{
				padding-left: 0;
			}
		</style>
	</head>
	<body>
		<div>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam quod corrupti blanditiis inventore, expedita delectus assumenda cumque eos qui, dolor doloribus officia sit minima dicta in unde odio. Similique, ullam!
		</div>
		<ul>
			<li>1111</li>
			<li>2222</li>
			<li>3333</li>
		</ul>
	</body>
</html>

0059 盒子模型-边框

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			/* border:1px solid gray */
			.box1{
				width: 100px;
				height: 100px;
				background: yellow;
				border: 10px solid red;
				
				/* 样式:solid double dashed dotted */
				
				/* 背景色也能蔓延到边框 */
			}
			.box2{
				width: 100px;
				height: 100px;
				background: blue;
				border-top: 5px solid red;
				border-left: yellow dashed 10px;
			}
			.box3{
				width: 100px;
				height: 100px;
				background: green;
				border-width: 10px 20px 30px 40px;
				border-color: yellow blue black red;
				border-style: solid double dashed dotted;
				/* border 
				
					border-width
					border-style
					border-color
				*/
			}
				
		</style>
	</head>
	<body>
		<div class="box1">
			
		</div>
		<div class="box2"></div>
		<div class="box3"></div>
	</body>
</html>

0060 盒子模型-外边距

Margin属性

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			*{
				margin: 0;
			}
			div{
				width: 200px;
				height: 200px;
			}
			.box1{
				background: red;
				border: 1px solid yellow;
				/* margin: 50px;
				float: left; */
				/* margin: 50px 100px; */
				/* margin: 50px 100px 200px; */
				/* margin: 10px 20px 30px 40px; */
				margin-top: 10px;
			}
			.box2{
				margin-top: -100px;
				background: green;
				border: 1px solid blue;
			}
			.box3{
				background: black;
				margin: 10px auto;
			}
			/* 1.margin-方向 四个方向
			2.背景色蔓延？没有
			3.*{margin:0;} 
			4.外边距负值？支持
			5.屏幕居中？margin:0 auto;横向居中*/
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3">大家好</div>
	</body>
</html>

0061 盒子模型-外边距特性

示例代码1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			/* 
			特性问题
			 
				1. 兄弟关系，两个盒子垂直外边距与水平外边距问题?
					-垂直方向，外边距取最大值
					-水平方向，外边距会进行合并处理
				2. 父子关系，给子加外边距，但作用于父身上了，怎么解决？
			 */
			.box1,.box2,.box3,.box4{
				width: 200px;
				height: 200px;
			}
			.box1{
				background: red;
				margin-bottom: 100px;
			}
			.box2{
				margin-top: 50px;
				background: yellow;
			}
			.box3{
				float: left;
				background: blue;
				margin-right: 100px;
			}
			.box4{
				float: left;
				background: green;
				margin-left: 50px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		
		<div class="box3"></div>
		<div class="box4"></div>
	</body>
</html>

示例代码2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			.box1{
				width: 500px;
				height: 500px;
				background: yellow;
				overflow: hidden;
				/* float: left; */
				/* padding-top: 100px; */
				/* border: 1px solid transparent; */
			}
			.box2{
				width: 200px;
				height: 200px;
				background: red;
				margin-top: 100px;
				/* float: left; */
			}
			
			/* 1. 子margin-top===>父的padding-top,注意高度计算.
			2. 给父盒子设置边框
			3. 加浮动
			4. overfloat:hidden,BFC,*/
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
</html>