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>
