1.当一个标签的类名有两个，不重要，只和样式表中后面那个相关联。
.spec2{
color:blue;
}
.spec1{
color:red;
}
<p class="spec1 cpec 2">我是什么颜色？</p>** 是红色**
2.!important标记
正确语法：font-size:60px!important;
提升的是属性 不是选择器，无法提升继承的权重， 不会影响就近原则。
! important做站的时候，不允许使用。因为会让css写的很乱。
选择上了 比较权重，权重越大听谁的，一样重听后面的；没选择上 就近 一样近比较权重 权重一样听后面的。
3.盒子模型
(1)padding：
内边距。可以填充背景颜色.
如分开写属性（小属性）的话， 不写padding-left那么就是没有左内边距。
如按空格隔开写属性（大属性）的话，顺序是 上右下左。
不能把小属性，写在大属性前面。
如果只写三个 例如 padding: 20px 30px 40px;
上、右、下、和右一样
如果只写两个 例如padding:30px 40px;
等价于：
padding-top: 30px;
padding-bottom: 30px;
padding-left: 40px;
padding-right: 40px;
快捷键就是pdt、pdr、pdb、pdl然后按tab。
可以用 {margin:0; padding:0} 清除默认的padding body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
(2)border:
边框有粗细 线型 颜色。
border属性能够被拆开，有两大种拆开的方式：
1）按3要素:border-width、border-style、border-color
2）按方向：border-top、border-right、border-bottom、border-left
border可以没有，border:none;
某一条边没有：border-left: none;
也可以调整左边边框的宽度为0：border-left-width: 0;
3.标准文档流
1）空白折叠现象：
2）高矮不齐，底边对齐
3）自动换行，一行写不满，换行写。
4.块级元素和行内元素
1）块级元素
●霸占一行，不能与其他任何元素并列
●能接受宽、高
●如果不设置宽度，那么宽度将默认变为父亲的100%。
2）行内元素
●与其他行内元素并排
●不能设置宽、高。默认的宽度，就是文字的宽度。
3）相互转换
将块级元素转换成行内元素 在样式表中加 display:inline;
将行内元素转换成块级元素 在样式表中加 display:block;
5.浮动 性质
脱离标准文档流的三种方法：浮动，相对定位，绝对定位、。
1）浮动的元素脱标
一旦一个元素浮动了，那么，能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。
span{
float: left;
width: 200px; height: 200px;
background-color: orange;
}
2）浮动的元素互相贴靠 ：左浮动贴左，右浮动贴右。
3）浮动的元素有“字围”效果 ：
浮动的元素会挡住盒子 不会挡住文字。
div浮动 p不浮动 p中文字会围绕着div 不会被挡住。
浮动这个东西，我们在初期一定要遵循一个原则：
永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动
作业：
<style type="text/css">
body{
text-align: center;
}
.a{
width: 970px;
height: 593px;
margin: 0 auto;
}
.red{
width: 277px;
height: 103px;
background-color: red;
float: left;
margin-right:14px;
}
.green{
float: left;
width: 679px;
height: 103px;
}
.green1{
float: right;
width: 137px;
height: 49px;
background-color:green;
margin-bottom:8px;
}
.green2{
width: 679px;
height: 46px;
float: right;
background-color:green;
}
.yellow{
float: left;
width: 310px;
height: 435px;
background-color:yellow;
margin-top:10px;
}
.else{
float: left;
width: 660px;
height: 390px;
margin-top:10px;
}
.else1{
float: left;
width: 460px;
height: 410px;
}
.else2{
float: left;
width: 200px;
height: 410px;
}
.else3{
float: left;
width: 660px;
height: 25px;
}
.blue1{
float: left;
width: 450px;
height: 240px;
background-color: blue;
margin-left:10px;
margin-bottom:10px;
}
.blue2{
float: left;
width: 450px;
height: 110px;
background-color: blue;
margin-left:10px;
margin-bottom:10px;
}
.blue3{
float: left;
width: 450px;
height: 30px;
background-color: blue;
margin-left:10px;
margin-bottom:10px;
}
.purple{
float: right;
width: 190px;
height: 400px;
background-color:purple;
}
.green3{
float: left;
width: 650px;
height: 25px;
background-color: green;
margin-left:10px;
}
.footer{
float: left;
width: 970px;
height: 35px;
background-color:#000088;
margin-top: 10px;
}
</style>
<title>css</title>
</head>
<body>
<div class="a">
<div class="header">
<div class="red"></div>
<div class="green">
<div class="green1"></div>
<div class="green2"></div>
</div>
</div>
<div class="body">
<div class="yellow"></div>
<div class="else">
<div class="else1">
<div class="blue1"></div>
<div class="blue2"></div>
<div class="blue3"></div>
</div>
<div class="else2">
<div class="purple"></div>
</div>
<div class="else3">
<div class="green3"></div>
</div>
</div>
</div>
<div class="footer"> </div>
</div>
</body>
</html>
