第三天css學習
1.行內元素、塊級元素、行內塊元素
行內塊元素：inline-block; 可設定寬高和對齊方式。一行可以放好幾個元素。
行內塊元素常見的有 <input /> <img /> <td></td> 後面可以跟其他元素。
行內元素 ： 常見有<span></span>, <a></a>,<strong></strong>,<em></em>,<ins></ins>,
其不能更改寬和高，設定後無效，不能對其設定文字對齊，長用於控制頁面中文字的樣式。水平方向上padding,margin 可設定
寬高由內容決定。行內元素裡面只能放行內元素。
塊級元素： 單個元素獨佔一行，如 div ,h1-h6,p,ul,li 等。可以設定寬高對齊屬性。
2.模式轉換
display: block; 轉換為塊級元素
display：inline-block 轉換為行內塊元素
display：inline 轉換為行內元素
可以為這些元素都設定background;
3.標籤內的巢狀注意點
存放文字內的塊級標籤h1~h6，p, 不能讓其他的塊級標籤如 div巢狀進去。
行內元素裡面只能存放行內元素和文字。但<a></a>標籤例外。
<a></a>標籤裡面可以巢狀塊級標籤div等
行級標籤中可以巢狀 行級元素和行級塊元素。
4. 易混淆的選擇器
p.box{
} 表示的是class名為“box”的p標籤元素樣式。
p, .box{
} 表示p標籤和 所有類名為（class名）“box” 的元素樣式。
p .box {
} 表示p標籤下所有後代中類名為box 的元素樣式。
#box>p {
}表示id 為box 下直接後代p標籤元素樣式。
5.css樣式優先順序
#id 選擇器權重0,1,0,0> .class 類選擇器權重 0,0,1,0> 標籤選擇器0,0,0,1 > 繼承選擇器0,0,0,0 （不安進位制算，按高低位比大小。比如：0,0,1,0 >0,0,0,10）
繼承選擇器
<head>
<style>
.father{
color:green;
}
p{
color:yellow;
}
</style>
</head>
<body>
<div class="father" >
<p>MM最棒！</p>
</div>
</body>
最後結果： 文字為黃色
子代總是優先選擇自己的樣式。
6.背景 background 設定
background-repeat: no repeat;/repeat-x;repeat-y;不平鋪；延x方向平鋪；延y方向平鋪；
background-position: 3px,center; /* left,right,top,bottom 可設定其值 前面表示x方向，後表示y方向 */ 預設為左上方影象填充
background: rgba(r,g,b,a) a在0~1 之間，r,g,b在0~255之間。
background-color:
background-image: url(i.jpg);
簡寫： background：
在div 等標籤中設定background 屬性時，不影響其他如文字的排版等。
7.盒子
每個標籤都可以看成一個盒子。與盒子有關的屬性有
border/border-width ：邊框大小。
border-color border-style:邊框樣式，實線(solid)，虛線（dashed），點線(dotted)。
在一個盒子中，可設定padding 來保證文字內容等於盒子保持一定距離。如：在連結中的文字，a 轉化為行內塊元素，設定行高（line-height），可讓文字與盒子邊框產生一定距離。
li標籤 預設前面標籤會有小黑點，list-style: none 取消小點
text-indent:2em 首行縮排兩個字元。
但在l兩個盒子中，如兩個div 巢狀，此時若設定padding 的值，會讓div盒子變大，可能把頁面上的其他元素擠出去。
padding-left;padding-right;padding-top;padding-bottom;
同時設定border 邊框的大小值 也會影響盒子的大小。+border-left +border-right;
8.當一張大圖作為背景時，影象中心內容不在螢幕中心顯示，可以調節 background-position: top center;
9.盒子必須指定寬度，才能 外邊距 對其設定垂直居中對齊。margin:0 auto;
10.外邊距該注意的地方：
問題的前提：父盒子無邊框，兩盒子巢狀。
兩個盒子巢狀使用時，若父盒子無邊框，想讓兩盒子間有一定間距。在父盒子中設定border或padding 值，產生的副作用是會“撐大盒子”；若在子盒子中設定 margin,則父盒子會產生“塌陷”，整體margin 移動；最直接的方法是在父盒子中設定 overflow：hidden;
合併問題： 兩個相鄰盒子 eg:一個設定 margin-bottom:100px; 一個設定margin-top:50px;則以最大的那個為準；即外間距維持在100px;
浮動：讓多個塊級元素一行顯示。浮動是“脫標的”；不會超過內邊距和邊框的範圍；標準流的盒子單獨佔一行。
浮動的對齊方式：如果子盒子有一個浮動，其餘的子盒子都應該浮動。下面的盒子會“頂上去”。
浮動元素有預設的行內塊顯示轉換。
一個盒子的內容 預設靠左上角起始。