实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Mrtao，80238980@qq.com" >
<title>CSS盒模型与CSS选择器的优先级</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
h1{color: red}
.headling{
color:green ;
}
.box1{
width: 150px;
height: 150px; /*设定盒子的宽高*/
background-color: #cccccc; /*设定盒子的背景颜色*/
font-size: 30px;
padding: 10px ; /*padding是透明的*/
border: 10px solid black; /*设定文本的边框位于内外边距之间，是可见元素*/
margin-bottom:30px ; /*设定当前盒子跟下一盒子之间的外下边距为10px，跟padding一样，是透明的*/
}
.box2{
width: 200px;
height: 200px;
/*这里有一个疑问。设置了宽高对图像元素无效！想问一下老师，是不是图像或者视频类的盒子不需要再设置宽高*/
background: white;
padding: 10px;
border: 10px solid black;
}
#headling{color: blue}
</style>
</head>
<body>
<h1 class="headling" id="headling" style="color: burlywood" >CSS选择器的优先级与盒模型基础知识</h1>
<!--写在标签内的style > ID > class > 标签 -->
<div class="box1">书山有路勤为径，学海无涯苦做舟！</div>
<div class="box2"><img src="https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=70d8eba3b78f8c54f7decd7d5b404690/f636afc379310a556c90f3b9b44543a9832610c2.jpg" width="200px" height="200px"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例