收藏
批改状态：未批改
老师批语：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级</title>
<style>
h2{
color:blue;
}
.style{
color:green;
}
#id{
color:yellow;
}
</style>
</head>
<body>
<!--本次选择器优先级比较不包括js-->
<h2 class="style" id="style" style="color:red;">我是最高级的内联style样式，其他的样式设置对我没有作用</h2>
<h2 class="style" id="id" style="">我是第二高级（选择器的最高级）的id选择器，除了内联style样式，其他的样式设置对我没有作用</h2>
<h2 class="style" id="class" style="">我是第三高级的class选择器，除了内联style样式和id选择器，其他的样式设置对我没有作用</h2>
<h2 class="" id="biaoqian" style="">我是最低级的标签选择器，其他的样式设置对我都起作用</h2>
</body>
</html>点击 "运行实例" 按钮查看在线实例
css优先级：（js）> (style) > id > class 标签
盒子模型的padding和border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级</title>
<style>
.clear{
clear:both;
}
.box{
width:600px;
height:600px;
background-color: yellow;
/*内边距上下左右都不相等*/
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;
border:5px solid ;
}
.box1{
float:left;
width:200px;
height:200px;
background-color: lightgreen;
/*内边距上下左右都不相等*/
/*padding-top:10px;*/
/*padding-right:20px;*/
/*padding-bottom:30px;*/
/*padding-left:40px;*/
padding:10px 20px 30px 40px;
/*上边框*/
/*border-top-width: 2px;*/
/*border-top-style: solid;*/
/*border-top-color: blue;*/
/*border-top:2px solid blue;*/
/*border-right:2px solid blue;*/
/*border-bottom:2px solid blue;*/
/*border-left:2px solid blue;*/
border:2px solid blue;
}
.box2{
float:right;
width:200px;
height:200px;
background-color: lightgreen;
/*内边距左右相等30，上下不相等*/
padding:10px 30px 40px;
border:1px solid pink;
}
.box3{
float:left;
width:200px;
height:200px;
background-color: lightgreen;
/*内边距左右相等30，上下也相等10*/
padding:10px 30px ;
border:3px solid red;
}
.box4{
float:right;
width:200px;
height:200px;
background-color: lightgreen;
/*内边距左右上下相等20*/
padding:20px;
border:4px solid black;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">我是第一个盒子，内边距上下左右都不相等</div>
<div class="box2">我是第二个盒子，内边距左右相等30，上下不相等</div>
<!-- <div class="clear"></div>-->
<div class="box3">我是第三个盒子，内边距左右相等30，上下也相等10</div>
<div class="box4">我是第四个盒子,内边距左右上下相等20</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
padding：
内边距 按顺时针，可以简写为：padding: 20px 30px 40px 50px;
如果内边距上下左右都相等，可写为：padding:20px
border:
border-left-width: 10px;
border-left-style: soild;
border-left-color: black;
以上可简写为：border-left:10px soild black;
同理四个边框可简写为：
border-top:10px double black;
border-right:10px soild green;
border-bottom:10px double orange;
border-left:10px soild blue;
如果四个边框相等：
border:10px soild black
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
