实例
<head>
<style>
/* p {
color: blue
}
*/
#艾迪 {
color: blueviolet
}
.lei {
color: green
}
#123 {
color: red
}
.456 {
color: red
}
#big {
border: 3px solid red;
width: 400px;
height: 400px;
padding: 20px 40px 60px;
background-color: wheat;
margin: 20px;
}
#little {
width: 200px;
height: 200px;
background-color: black;
padding: 20px 40px 50px 60px;
margin: 20px 300px;
border: 3px solid blue;
}
</style>
</head>
<body>
<h3>第一题</h3>
<p><a href="https://www.baidu.com" target="baidu">打开百度</a></p>
<iframe src="" frameborder="1" name="baidu" width="400" height="400"></iframe>
<p style="color: yellow">这里是演示</p>
<h3>第二题：标签内的样式属性大于html文档内“style”标签的样式属性大于引用的CSS样式表的样式属性</h3>
<p id="艾迪">这里是ID123用选择器设置为紫色</p>
<p class="lei">这里是类456用选择器设置为绿色</p>
<p class="lei" style="color: orange">这里是类456标签内属性设置为橙色</p>
<p id="123">ID设置成数字之后选择器不能用</p>
<p class="456">类名设置成数字后，选择器也不能用</p>
<h3>第三题：JS脚本的样式属性大于标签内的样式属性大于文档内“STYLE”选择器的样式属性大于CSS样式表的样式属性</h3>
<h3>第四题：</h3>
<div id="big">
<div id="little">
</div>
</div>
<span id="little">
</span>
<div id="big">
</div>
</body>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
1、盒模型中的width,height属性标记了宽度与高度，行元素不专门设置width属性时，默认是一整行，所以只写出height高度属性即可。
2、padding是内边距属性，margin是外边距，边距值分上右下左，按顺时针排序
3、border是边框属性，可设置边框值，单位是PX，solid设置为实线，还有颜色属性
4、span是行内元素，不自己换行，并且设置了内外编剧值之后，标签内没有内容时也只显示占据边距的范围。
5、ID和CLASS不能用纯数字命名，选择器不识别。
