![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：作业尽快赶上进度!
Collection
Collection
一、CSS样式表主要有三种：内联、内部、外部
内联样式：对当前标签有效，如<body style="background: #888"></body>
内部样式：对当前文档有效,如
<head>
<meta charset="utf-8">
<title>CSS层叠样式表</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<!-- 引用外部样式：外部引用、共享 -->
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<!-- 内部样式：对当前文档有效 -->
<style type="text/css">
p{
background: #333;
}
</style>
</head>
引用外部样式：外部引用、文件共享，如
<head>
<meta charset="utf-8">
<title>CSS层叠样式表</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<!-- 引用外部样式：外部引用、共享 -->
<link rel="stylesheet" type="text/css" href="static/css/style.css"><head>
样式选择器主要有选择器、通配符选择器、id选择器、类选择器（单类、多类）、派生选择器（子选择器、父选择器）
选择器的分组，如
<style type="text/css">
p{
background: #333;
}
/*选择器：标记选择器*/
h1{color: red;}
/*通配符选择器*/
*{color: blue;}
/*id选择器*/
#t{color: #fff;}
/*单类选择器*/
.text{color: #999;}
/*多类选择器*/
.l{border: 2px solid red;}
/*选择器的分组*/
#t,p,.k{border: 1px solid red;}
/*子元素选择器*/
p>span{color:rgb(895);}
p span{border: 2px solid blue;}
</style>
二、元素显示及内外边距：
（一）元素的显示：行内、块级、行内块（display:none\block\inline-block\inline)
1.块级元素：块级元素能够识别宽高，独占一行，多个标签写在一起，默认排列方式从上至下排列 ,常见标签有div\p\h1
2. 行内元素：设置宽高无效，对margin仅设置左右方向有效，上下无效，不会自动进行换行，常用元素有span、b
3.行内块级元素：综合了块级和行内元素特性，但各有取舍，不自动换行，但可以设置宽高，常用的标签有img\input
4.块级、行内、行内块之间的转换：
display:inline:转换为行内元素
display:block:转换为块元素
display:inline-block:转换为行内块元素
（二） 内外边距：（margin\padding）；
元素内边距用pandding来定义，元素外边距用margin来定义 ，如
<span style="margin: 20px;padding: 30px;">123</span>
单边设置内边距：
pandding-left；
pandding-right:
pandding-bottom:
pandding-top:
复合写法：pandding:上 右 下 左；pandding：上 左右 下；pandding：上下 左右；
单边设置外边距：
margin-left；
margin-right:
margin-bottom:
margin-top:
复合写法：margin:上 右 下 左；margin：上 左右 下；margin：上下 左右;
三、float浮动：
1.float属性实现元素的浮动，属性值有：left，right
2.浮动的框可以水平方向移动，直到他的外边缘碰到包含框或另一个浮动框边缘；
3.注意，浮动使元素的位置与文档流无关，因此不占用空间
4.浮动元素可以生成一个块级框
5.注意：浮动完成后要清除，非常重要,清除浮动后，元素就不会脱离文档流了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float浮动</title>
<style type="text/css">
/*1float属性实现元素的浮动，属性值有：left，right
2浮动的框可以水平方向移动，直到他的外边缘碰到包含框或另一个浮动框边缘；
3：注意，浮动使元素的位置与文档流无关，因此不占用空间
4：浮动元素可以生成一个块级框*/
.left,.right{
width: 100px;height: 100px;background: red;
margin-top: 10px;
}
.l{float: left;background: blue;}
/*清除浮动样式*/
.clear{clear: both;}
</style>
</head>
<body>
<div>
<div class="left l"></div>
<div class="right"></div>
<!-- 清除浮动 -->
<div class="clear"></div>
</div>
<!-- 注意：浮动完成后要清除，非常重要 -->
</body>
</html>