使用通配符选择器可以初始化所有标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Untitled2.css">
<title>Document</title>
</head>
<body>
<p>12</p>
<h1>12</h1>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
增加通配符选择器之后。
*{
padding:0;
margin:0;
}
由于通配符选择器的权重较低,后期你也可以将标签初始化成你想要的样子,两者丝毫不影响。
盒子模型
任何一个元素都是一个盒子
盒子模型的组成部分:margin(外边距) + border(边框) + padding(内边距) + {content = width + height(元素)}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Untitled2.css">
<title>Document</title>
</head>
<body>
<div>
香蕉苹果西瓜
香蕉苹果西瓜
香蕉苹果西瓜
</div>
</body>
</html>
div{
width:100px;
height:100px;
background-color:red;
border:10px solid black;
padding:10px;
margin:10px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Untitled2.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
</html>
.wrapper{
width:100px;
height:100px;
background-color:red;
border:10px solid green;
padding:100px;
}
.content{
width:100px;
height:100px;
background-color:black;
}
padding:p1 p2 p3 p4;(分别表示上右下左顺时针)
padding:p1 p2 p3 ;(分别表示上(右左)下)
padding:p1 p2 ;(分别表示(上下)(左右))
padding:p1 p;(表示上右下左都是p1)
.wrapper{
width:100px;
height:100px;
background-color:red;
border:10px solid green;
padding:100px 200px 150px;
}
.content{
width:100px;
height:100px;
background-color:black;
}
.wrapper{
width:100px;
height:100px;
background-color:red;
border:10px solid green;
padding:100px 0 0 0;/*等价于 padding-top:100px ;*/
}
.content{
width:100px;
height:100px;
background-color:black;
}
margin与border等与上面的padding类似。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Untitled2.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="content">
<div class="content1">
</div>
</div>
</div>
</div>
</body>
</html>
.content1{
width:10px;
height:10px;
background-color:#fff;
}
.content{
width:10px;
height:10px;
padding:10px;
background-color:#0f0;
}
.box{
width:30px;
height:30px;
background-color:#fff;
padding:10px ;
}
.wrapper{
width:50px;
height:50px;
background-color:#0f0;
padding:10px ;
}
margin可以用于两个元素之间的分隔。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Untitled2.css">
<title>Document</title>
</head>
<body>
<span class="s1">123</span>
<span class="s2">123</span>
</body>
</html>
.s1{
background-color:red;
margin-right:20px;
}
.s2{
margin-left:4px;
}
定位技术:position有四个值
1.绝对定位值(absolute)
脱离原来位置进行定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Untitled2.css">
<title>Document</title>
</head>
<body>
<div></div>
</body>
</html>
div{
position:absolute;
right:100px;
bottom:200px;
width:100px;
height:100px;
background-color:red;
}
看上图可以知道图像与边框有一定间隔,这个是body的margin其值为8像素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Untitled2.css">
<title>Document</title>
</head>
<body>
<div></div>
</body>
</html>
body{
margin:0;
}
div{
width:100px;
height:100px;
background-color:red;
}
所以一般用通配符选择器将所有标签的margin,padding设为0
层模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Untitled2.css">
<title>Document</title>
</head>
<body>
<div class="demo"></div>
<div class="box"></div>
</body>
</html>
.demo{
position:absolute;
width:100px;
height:100px;
background-color:red;
opacity:0.5;
}
.box{
width:150px;
height:150px;
background-color:green;
}
当demo定义为absolute时,demo便为真空(即脱离原来位置进行定位),故box可以移动上去。
2.(相对定位值)relative
保留原来位置进行定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Untitled2.css">
<title>Document</title>
</head>
<body>
<div class="demo"></div>
<div class="box"></div>
</body>
</html>
.demo{
position:relative;
width:100px;
height:100px;
background-color:red;
}
.box{
width:150px;
height:150px;
background-color:green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Untitled2.css">
<title>Document</title>
</head>
<body>
<div class="demo"></div>
<div class="box"></div>
</body>
</html>
.demo{
position:relative;
left:100px;
top:100px;
width:100px;
height:100px;
background-color:red;
}
.box{
width:150px;
height:150px;
background-color:green;
}
上面两个图显示了demo是层模型,但box并没有变化。即保留原来位置进行定位