盒模型：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.box {
width: 300px;
height:300px;
background-color: aqua;
/*边框属性
border:
border-width 边框宽度
border-style 边框形状 实现solid 虚线dashed 圆点dotted 双实线double
border-color 边框颜色 transparent透明色*/
border :2px double red;
}
</style>
</head>
<body>
<!--盒模型
边框 内边距 外边距 内容宽度
内边距：调整内容和边框的距离 padding-left/right/top/bottom
外边距：调整盒子之间的距离 margin-left/right/top/bottom
边框：border border-left/right/top/bottom
-->
</body>
<div class="box"></div>
</html>c3盒模型：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--css3盒模型 弥补旧盒模型
旧盒模型 c2 padding内减 盒模型宽度=width+padding*2+border*2
css3新盒模型 盒模型宽度=width(包括padding*2+border*2)
box-sizing:border-box 使用新盒模型
box-sizing:content-box 使用旧盒模型
-->
<style>
* {
padding:0;
margin:0;
box-sizing: border-box;
}
#box {
width:400px;
height:200px;
padding:80px;
background-color: green;
}
</style>
</head>
<body>
<!--padding内减-->
<div id="box">
</div>
</body>
</html>c3盒模型的必要性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width:100%;
height:400px;
background-color: #aaaaaa;
margin: 0 auto;
padding:30px;
/*内减不适用移动端*/
box-sizing:border-box;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>css选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器
优先级较低（1）*/
li {
color:#341256;
}
/*类选择器，选择当前文档中所有名字一样的标签*/
/*class=“变量名” 可以加-，不要加_
.类名 {样式}
优先级较高（10）*/
.odd-number {
background-color: aqua;
}
/*id选择器 唯一
id名 id=“名字”
#id名 {}
优先级最高（100）*/
#a {
font-size: 50px;
background-color: white;
}
/*全选 包含body标签中的所有元素
优先级最低（几乎为0）*/
* {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li class="odd-number">11</li>
<li>22</li>
<li class="odd-number" id="a">33</li>
<li id="a">44</li>
<li class="odd-number">55</li>
</ul>
</body>
</html>圆角边框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width:200px;
height:200px;
background-color: aqua;
/*border-radius: 100px;*/
/*border-radius:50%;*/
/*border-radius: 20px 50px;*/
/*!*左上角右下角20px，左下角右上角50px*!*/
border-radius: 20px/30px;
/*水平20px垂直30px*/
margin:100px auto;
/*!*IE9以下及其他低版本浏览器不支持圆角边框，需要加前缀*!*/
/*-webkit-border-radius:;*/
/*-ms-border-radius:;*/
/*-o-border-radius:;*/
/*-moz-border-radius:;*/
}
</style>
</head>
<body>
<!--圆角边框属性 border-radius:px %-->
<div class="box"></div>
</body>
</html>外边距：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin:0;
padding:0;
}
div {
width:200px;
height:200px;
display: inline-block;
}
.box1 {
background-color: yellow;
margin-left:0;/*写正值时右移，写负值时左移，可以移动到屏幕外*/
margin-right:-5px;
}
.box2 {
background-color: aqua;
/*padding:50px; !*上下左右内边距均为10*!*/
/*padding:20px 40px;!*上下20，左右40*!*/
/*padding:20px 30px 40px; !*上20，左右30，下40*!*/
padding:10px 20px 30px 40px; /*上右下左*/
}
</style>
</head>
<body>
<div class="box1">我是盒子1</div>
<div class="box2">我是盒子2</div>
</body>
</html>
外边距的问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: yellow;
margin-top:50px;
border-top: white 1px solid;
}
.b {
width:200px;
height: 200px;
background-color: deeppink;
margin-top:50px;
}
/*外边距塌陷（重叠）：父盒子和子盒子外边距重叠,取较大值
解决方案：
1：避免使用外边距
2：给外侧盒子设置边框 border-top：1px solid white
3：内边距
*/
</style>
</head>
<body>
<div class="box">
<div class="b"></div>
</div>
</body>
</html>盒子居中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div:first-of-type {
width: 500px;
height: 500px;
border:4px double red;
margin: 0 auto;
text-align: center;
}
span {
background-color: deeppink;
/*margin:0 auto;*/
/*水平居中必须是块级元素，且必须有宽度*/
/*行内元素和行内块实质是文本*/
}
</style>
</head>
<body>
<div>
<span>hahahahaha</span>
</div>
</body>
</html>谷歌logo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
font-size:100px;
text-align: center;
}
.a1 {
color: blue;
}
.a2 {
color:red;
}
.a3 {
color:yellow;
}
.a4 {
color:green;
}
</style>
</head>
<body>
<span class="a1">G</span>
<span class="a2">o</span>
<span class="a3">o</span>
<span class="a1">g</span>
<span class="a4">l</span>
<span class="a2">e</span>
</body>
</html>边距练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red {
width:400px;
height:450px;
background-color: red;
padding:50px 0 0 100px;
margin-top:100px;
margin-left:300px;
}
.gre {
width:100px;
height:100px;
background-color: green;
padding:75px;
}
.yel {
width:100px;
height:100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="red">
<div class="gre">
<div class="yel"></div>
</div>
</div>
</body>
</html>选择器进阶：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*!*4.子代选择器*/
/*父元素>子元素{}*/
/**!*/
/*.father {*/
/*width:500px;*/
/*height: 500px;*/
/*border:1px solid red;*/
/*}*/
/*.father>div {!*优先级为.father的优先级加上div的优先级：10+1*!*/
/*background-color: gold;*/
/*height: 100px;*/
/*width: 100px;*/
/*color:#fff;*/
/*!*颜色属性继承*!*/
/*}*/
/*.father>div>.sun {*/
/*color:#341256;*/
/*}*/
/*5.后代选择器：
父元素 儿子+孙子+。。。。*/
.father div {
color:red;
}
/*6.交集选择器 选择器1选择器2
先写标签后写类*/
p.b {
font-size:40px;
}
/*7:结构伪类选择器
父元素：first-child{}
父元素：last-child{}
父元素：nth-child(){}（n代表正整数）*/
span:first-child {
font-size: 50px;
}
span:last-child {
font-size:30px;
}
span:nth-child(3) {/*注意：找的是span标签父元素所有孩子中的第n个*/
background-color: aqua;
}
/*结构伪类
：first-of-type
:last-of-type
:nth-of-type
*/
.fathet > div span:first-of-type {
background-color: deeppink;
}
/*找的是span父元素里的第二个span（只看span）*/
.fathet > div span:nth-of-type(2) {
background-color: yellow;
}
/*找的是span父元素的所有元素的第四个，不关心这个元素是否是span*/
.father > div span:nth-child(4) {
}
/*填n时，n从0开始，2n-1代表奇数，2n代表偶数*/
.google span:nth-of-type(2n-1) {
}
.google span:nth-of-type(2n) {
}
/*后三个元素*/
.google span:nth-of-type(n+4) {
}
/*前三个元素，不能写3-n,只能写-n+3*/
.google span:nth-of-type(-n+3) {
}
</style>
</head>
<body>
<div class="father">
<div>这是儿子</div>
<div>
<div class="sun b">这是孙子</div>
<!--如果类名有两个，则优先执行后面的类名的style（层叠性，后面的覆盖前面的）-->
<p class="b">p标签</p>
<span>l</span>
<span>e</span>
</div>
</div>
<div class="google">
<span>G</span>
<span>o</span>
<span>o</span>
<span>g</span>
<span>l</span>
<span>e</span>
</div>
</body>
</html>