阿巴阿巴的第九天

最新推荐文章于 2023-12-05 20:45:34 发布

PUDINrua

最新推荐文章于 2023-12-05 20:45:34 发布

阅读量77

点赞数

本文链接：https://blog.csdn.net/PUDINrua/article/details/114630226

版权

dw2.0之css样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<style>
			.box{
				width:1266px;
				height:52px;
				border:solid 1px black;
				padding:30px;
				
			}
			
			.box2{
				width:200px;
				height:50px;
				border: solid 1px green ;
				/* 当写一个值:上下左右都是同一个内边距 */
				/* 写两个值:第一个代表上下,第二个代表左右 */
				/* 三个值:第一个代表上,第二个代表左右,第四个代表下 */
				/* 四个值:上右下左顺时针 */
				/* padding:20px 10px 30px 5px; */
				padding-left:30px
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box2"></div>
		</div>
			
	</body>
</html>

笔记：
盒子
版心（大盒子）
盒子的作用：给网页布局
width:宽
border:边框
height:高
solid：实线
dashed：虚线
dotted：点线
padding：内边距
left：左
right：右边
top：上
bottom：下
浏览器是从上往下读取代码

作业：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			
			        .box{
			            width: 500px;
			            height: 200px;
						border:5px solid red;
			            padding:10px;
			            border-bottom:solid green 10px;
			       }
			    
		</style>
		<title>123</title>
	</head>
	<body>
	<div class="box"><b>盒子模型练习</b></div>
	</body>
</html>