![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：css这些基础, 是最重要也是必备的
Collection
Collection
1.实例演示:<iframe>标签的使用
<body> <!-- 内联标签：在当前页面中加载另一个页面 --> <h1>内联标签演示</h1> <h3><a href="https://www.baidu.com" target="baidu">百度</a></h3> <iframe frameborder="0" name="baidu"></iframe> <!-- a标签的值与iframe中name的值相同，就可以在iframe中打开网页 --> </body>
2. 实例演示: css样式设置的优先级
优先级：内联样式 > 内部样式 > 外部样式；
外部样式表：通过link标签将一个css文档连接到html文档中
内部样式：将元素的样式规则用style标签插入到当前的html文档中，这个样式规则, 仅适用于当前的这个html文档
内联样式：将元素的样式使用styel属性应用到当前元素上,只适用于当前标签
3. 实例演示: css的id, class与标签选择器的使用规则
优先级：标签 < class < id
<style>
/*id选择器: 一个*/
#red {
color: red;
}
/*类选择器: 一批*/
.green {
color: green;
}
/*标签选择器*/
p {
color: aqua;
}
</style>
<p id="red">id选择器</p>
<p>类选择器</p>
<p>标签选择器</p>4. 实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)
盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成，一个盒子中主要的属性就5个：width（内容宽度）、height（内容高度）、padding（内边距）、border（边框，三个要素：粗细、线型、颜色。）、margin（外边距）。
<style>
.box {
width: 500px;
height: 500px;
padding: 10px;
border: 5px dashed black;
margin: 0;
}
</style>
<div>
<div class="box">这是一个盒子</div>
</div>