![[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
实例演示:<iframe>标签的使用
实例演示: css样式设置的优先级
实例演示: css的id, class与标签选择器的使用规则
实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)
1.实例演示:<iframe>标签的使用
2.实例演示: css样式设置的优先级
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="static/css/style1.css"><!--
外部样式
-->
<title>Document</title>
<style>
p {
color: green;
}
</style>
<!-- 内部样式-->
</head>
<body>
<link rel="stylesheet" href="static/css/style1.css">
<p style="color: blue;">苍老师是一个***人</p>
<div style="color: rgb(206, 194, 24); ">
<p>你编程的样子像cxk</p> <!-- 内联样式: 将元素的样式使用styel属性应用到当前元素上,只适用于当前标签-->
</div>
<!--内联样式 > 内部样式 > 外部样式-->
<!--style="" <style> .css文档-->
</body>
</html>效果图
所以可以得出结论
<!--内联样式 > 内部样式 > 外部样式-->
<!--style="" <style> .css文档-->
3.实例演示: css的id, class与标签选择器的使用规则
id方法： #new{ }
class方法： .web{ }
标签方法： div{ }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css基本选择器</title>
<style>
/*id选择器: 一个*/
#red {
color: red;
}
/*类选择器: 一批*/
.green {
color: green;
}
/*标签选择器*/
p {
color: aqua;
}
</style>
</head>
<body>
<!--选择元素只会有二种可能:-->
<!--1. 找到了: 双会有二种可能, 找到一个, 找到了一批-->
<!--2. 没找到: 第一种选择语法错误, 第二是页面中不存在也选择器匹配的元素-->
<p id="red">买了MacBook 的同学, 后悔了吗?</p>
<p class="green" id="red">原来css非常简单</p>
<p class="green" id="red">原来css非常简单</p>
<p class="green" id="red">原来css非常简单</p>
<p class="green" id="red">原来css非常简单</p>
<p> 我编程的样子像极了蔡徐坤</p>
<script>
document.getElementsByTagName('p').item(0).style.color = 'yellow';
<!--getElementsByTagName 获取元素-->
</script>
<!--优先级: 标签 < class < id < js-->
<!--<p class="green">做一个快乐的学习者</p>-->
</body>
</html>效果图
实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)
每个元素都是一个长方形盒子，有几个属性能确定这个盒子的大小。盒子的核心属性是元素的宽高，这两个值可能是由元素的display属性、元素的内容或具体的width，height属性值生成的。内边距padding和边框border拓展了元素的高宽。最后是我们定义的在边框外的外边距margin。
盒子模型对应的CSS属性为:width，height，padding，border，margin。
我们来看例子：
div {
border: 6px solid #949599;
height: 100px;
margin: 20px;
padding: 20px;
width: 400px;}
由此我们可以得知
盒子的宽高计算
Width：492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px
Height：192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px
总结
学会盒子计算。我们将width的值设置为400像素，但元素的实际宽度为492像素。默认情况下，盒子模型是加法。因此想要确定盒子的实际大小，我们需要考虑将四面的内边距，边框，外边距都考虑进去。宽度不仅仅是width属性的值，也要加上左右两侧的内边距，边框和外边距。
<!--getElementsByTagName 获取元素-->
<!--内联样式 > 内部样式 > 外部样式-->
<!--style="" <style> .css文档-->
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像
