CSS---盒子模型笔记

最新推荐文章于 2021-11-03 20:20:30 发布

Go· again

最新推荐文章于 2021-11-03 20:20:30 发布

阅读量142

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_43766304/article/details/104700500

版权

web 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

在这里插入图片描述

写给自己：笔记在代码注释中，把上面的图案记下来，才能学好盒子模型。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS盒子模型</title>
	
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: #00FFFF;
			
			/* 设置border值 */
			/* border-top-color: crimson;
			/* 	border-top-width: 10px; */ 
			/* 虚线：dashed；实线：solid；点线：dotted */
			/* border-top-style: ; */
			/* 简化如下 */
			/* 
			border-top:10px solid darkblue;
			border-left: 10px dashed cornflowerblue;
			border-right:10px dotted darkmagenta;
			border-bottom: 10px solid greenyellow; */
			/* 再次简化如下 */
			
			border: 10px solid cornflowerblue;
			
			
			/* 设置pading值 */
		/* padding-top: 20px;
			padding-left: 40px;
			padding-right: 80px;
			padding-bottom: 100px;
			 */
			/* pading简化如下 */
			/* pading设置从top顺时针开始 */
			/* 设置四个值 ：分别是上面 右面 下面 左面*/
			/* 	padding:20px 80px 100px 40px; */
			/* 设置三个值 ：分别时上面  左右 下面 */
			/* padding: 20px 100px 100px; */
			/* 设置两个值 ：分别设置上下 左右 */
			/* padding: 100px 80px; */
			/* 设置一个值：直接设置四个边 */
			padding: 20px;
			
			/* 设置margin :和padding的设置方法是一样的*/
			margin: 200px;
		}
		
		
	</style>
	
</head>
<body>
	<div class="box">
		today is good today is good today is good
		today is good today is good today is good
		today is good today is good today is good
		today is good today is good today is good
		
	</div>
</body>
</html>
``

Go· again

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS---盒子模型笔记

写给自己：笔记在代码注释中，把上面的图案记下来，才能学好盒子模型。<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
复制链接

扫一扫