小白學前端04

1.發現不管知乎仍是百度百科的網頁都實現了一個效果即在header欄裏面元素全都是居中顯示的

2.類選擇器也能夠按照後代選擇器同樣  .conent .news{}還是後代選擇器的效果

3.內聯元素不能設置寬和高，那麼css mastery的例子：
.onntent .secondary{
    width:320px;
    ...
    display:inline;
}  把display放置在首行的話，寬度就失效了嗎？

測試：
.primary{width: 500px;border: 0.1em solid grey;}
.primary{width: 500px;border: 0.1em solid grey; display: inline;}
當.primary屬性不加float時，加上display:inline，則真的寬度失效了
可是加上float:left後：
.primary{width: 500px;float: left; border: 0.1em solid grey; display: inline;}
display:inline的效果失效
>>>網上的解釋:浮動對象的display特性將被忽略，float在絕對定位和display爲none時不會被應用

4.重看了css mastery的關於相對、絕對定位和浮動的部分，又發現了不少之前誤解的地方：

1.絕對定位是什麼：
絕對定位是相對於最近的已定位(absulote/fixed/relative)的祖先元素，若無已定位的祖先元素則相對於初始包含塊(而不必定是根元素)
另附上知乎關於初始包含塊的討論：https://www.zhihu.com/question/19926700

2.絕對定位的使用：
在使用相對定位的祖先元素的狀況下，徹底可能只使用絕對定位就建立出整個設計(例如使文本段落對準大框的右下角)，爲此這些元素須要具備固定的尺寸，
由於若是擴大絕對定位的框(例如經過增長字號)，而周圍的框不會從新定位，這樣就會致使絕對定位的框產生重疊，從而破壞精心的佈局(固定尺寸的佈局)


3.浮動是怎麼動的? ：
浮動的框能夠左右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊緣

4.爲何要用clear？:
浮動會讓元素脫離文檔流，再也不影響不浮動的元素，實際並不徹底如此，要了解css起初建立浮動屬性的目的實際上是爲了實現文本圍繞圖像，按照head first html裏面的說法實際上是內聯元素靠在浮動元素邊界

要想阻止內聯元素圍繞在浮動框的外邊，須要對包含這些內聯元素的塊級元素應用clear屬性，clear屬性的值表示框的哪些邊不該該挨着浮動框，有一個誤解是，clear屬性會自動的抵消前面的浮動，
可是實際是，在清理元素時瀏覽器會在元素頂上添加足夠的外邊距，使元素的頂邊緣垂直降低到浮動框下面：

5.浮動與絕對定位的區別：
對元素進行清理實際上讓周圍的元素爲浮動元素留出空間——這解決了絕對定位的問題：由於自動調整了，就再也不會產生重疊


6.空元素清理：
如圖，clear是表示框的哪些邊不該該挨着浮動框，但如圖中所示，空元素的兩邊不都不挨着浮動元素嗎？

不，錯誤在於你忘記了float元素脫離了文檔流，致使br元素頂上去了
那照着書中的圖，萬一出現這種狀況不仍是不奏效嗎？

不，不會，測試以下，空元素頂上去後正好在float元素之下，即便br爲行內元素，可是它也是替換元素，表現出了行框

 

6.一個比較深的疑問：
css mastery p51頁寫到爲避免浮動元素致使包圍的div不佔據空間的現象，一共有四種方法：加空元素/浮動容器div/用overflow/用.clear:after來動態添加清除標記
其中的2：.news{float:left;} .news img{float；left;} .news p{float:left;}這樣由特殊性來看會先加載.news img和.news p屬性那這樣不容器元素已經變成了空？再加載.news浮動的時候還有用嗎？