外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.divF{
font-size: 40px;
color: red;
}
/*同名或者同类型的选择器
同名的选择器样式都会被添加，出现重复的样式的时候后面会覆盖前面的样式*/
.divF{
font-size: 100px;
}
.divFF{
color:white;
background-color: greenyellow;
}
/*p{
background-color: red;
color: blue;
}
*{
font-size: 55px;
color: greenyellow;
}*/
/*不同类型的选择器同时出现的时候，如果有样式的冲突，则按权值来计算优先级
1、* 0
2、标签选择器 1
3、类选择器 10
4、id选择器 100
5、style行间样式 1000
6、！important 10000
6、后代选择器 看里面的组成*/
div p{
color: blue;
}
#first p{
color: red;
}
</style>
</head>
<body>
<!--<div class="divF divFF">我是一个div</div>-->
<!--<p>AKL</p>-->
<div id="first">
<p class="pp">p1</p>
</div>
<div id="second">
<p class="pp">p2</p>
</div>
<div>
<div>
<div>
<div>
<p>p3</p>
</div>
</div>
</div>
</div>
</body>
</html>
内边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.redDiv{
/*padding 内边距，不会改变元素本身的位置，会改变元素本身的大小，会改变元素内容的位置*/
width: 300px;
height: 300px;
background-color: red;
/*padding-left: 30px;*/
padding-top:10px;
/*padding可以有复合写法，写法同margin*/
}
.blueDiv{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="redDiv">
<!--<div class="blueDiv"></div>-->
</div>
</body>
</html>
网友评论