<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style type="text/css">
.box1{
width: 600px;
height:250px;
border-top:10px dashed blue;
border-right: 5px solid red;
border-bottom: 15px dotted gray;
border-left: 5px solid red;
}
</style> <body>
<div class="box1">
</div>
</body>
</html>
3.在上题插入的盒子中放入素材中提供的“《网页设计和制作》课程介绍”文字内容，并设置盒 子的上下内边距为 50 像素，左右内边距为 30 像素，请对盒子相关属性进行适当设置，使得盒子的大小不变。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子大小保持不变</title>
</head>
<style type="text/css">
.box1{
width: 540px ;
height:150px ;
border-top:10px dashed blue;
border-right: 5px solid red;
border-bottom: 15px dotted gray;
border-left: 5px solid red;
padding: 50px 30px 50px 30px;/*上右左下*/
/*
上下内填充都为50px，加起来一共100px，height减去100px
左右内填充都为30px，加起来一共60px，width减去60px
*/
}
</style> <body>
<div class="box1">《网站开发与管理》课程是计算机应用技术、电子商务等专业的一门核心课程，也是其他计算机专业的普及型课程，它涵盖了HTML设计、Dreamweaver、CSS等相关知识，全面介绍WEB站点设计的基本操作技巧和使用技巧。通过本课程的学习，使学生掌握HTML语言语法规则及文字、超链接、表格、表单、图像、多媒体、框架元素标记及属性，能设计出多窗口网页、动态网页；能熟练运用Dreamweaver进行网站的导入、规划、管理、发布的相关技术及网页制作的操作技能。
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上下盒子间隔</title>
</head>
<style type="text/css">
.box1{
width:100px;
height:100px;
background: red;
border:5px solid black;
margin-bottom: 50px;/*下外填充为50px*/
}
.box2{
width:100px;
height:100px;
border:5px black solid;
background: blue;
margin-top: 10px;/*上外填充为10px*/
/*上下盒子分开，间隔大小取外填充的最大值*/
}
</style>
<body>
<div class="box1">box1
</div>
<div class="box2">box2
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>左右间隔和内联元素</title>
</head>
<style type="text/css">
div{/*转化为内联元素(左右)*/
display: inline;
}
.box1{
width:100px;
height:100px;
background: red;
border:5px solid black;
margin-right: 0px;
}
.box2{
width:100px;
height:100px;
border:5px black solid;
background: blue;
margin-left:50px;
/*左右外填充相加 0px+50px = 25px+25px*/
}
</style>
<body>
<div class="box1">box1
</div>
<div class="box2">box2
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子嵌套/盒子模型</title>
</head>
<style type="text/css">
.box1{
width:200px;
height:300px;
background: red;
border:5px solid black;
padding-top: 50px; }
.box2{
width:100px;
height:100px;
border:5px black solid;
background: blue;
}
</style>
<body>
<div class="box1">box1
<div class="box2">box2
</div>
</div>
<!-->子盒子嵌套在父盒子里 <-->
</body>
</html>
元素分类：在html标签内，标签元素大致被分为三种类型
块级元素：<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,<adress>,<blockquote>,<form>
（1）每个块级元素都从新的一行开始，并且其后的元素也另起一行。
（2）元素的高度、宽度、行高以及顶和底边距都可设置。
（3）元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
内联元素(行内元素)：<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>
(1)和其他元素都在一行上
(2)元素的高度、宽度及顶部和底部边距不可设置；
(3)元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联块状元素：<img>,<input> 同时拥有块级元素和内联元素的特点。
(1)和其他元素都在一行上；
(2)元素的高度、宽度、行高以及顶和底边距都可设置。
元素类型转化：
转化为块状元素。a{display:block;}
转换为内联元素。p{display:inline;}
转化为内联块状元素：
a{
display:inline-block;
width:270px;/*在默认情况下宽度不起作用*/
height:20px;/*在默认情况下高度不起作用*/
background:pink;/*设置背景颜色为粉色*/
text-align:center; /*设置文本居中显示*/
}