1.字體的所有屬性都可以被繼承，但是字體的連寫 會層疊掉你繼承的字體屬性，例如你在父容器中寫了字體的屬性，當你在自己的樣式中使用 font屬性連寫時，會層疊掉父容器中的字體屬性，就算是 font:18px normal;雖然沒寫全，但其它都是默認值，依舊會層疊掉你繼承的字體屬性，如果不想層疊父容器的中字體屬性，最好單獨寫，例如 font-size:18px;


2.遇到一個奇怪的問題，如果父容器的行高與子容器的行高不一致時，子容器會被父容器擠下去一點，屬于其它問題，所以就看看以后能不能知道,測試了，不是父容器設置了內邊距,也不是子容器設置了外邊距或內邊距的原因，因該是其它問題。


3.脫離了標準文檔流的元素 無法再使用margin：0 auto的方式實現居中了，可以使用
left:50%;margin-left:-自己的一半寬度;來實現居中，垂直居中也如此，沒有脫離標準文檔流的元素會占空間，而脫離了標準文檔流的元素不占空間。


4.脫離了標準文檔流的元素 無法再使用margin:0px auto的方式實現居中，連浮動元素也不能使用這種方式，浮動元素只能在其外面套一個盒子，讓這個盒子使用margin:0px atuo來實現水平居中。


5.在浮動元素中使用繼續脫離標準文檔流的定位方式時，那些定位會以瀏覽器為基準，但是那些沒有脫離標準流的定位方式，如相對定位依舊以自己為出發點。


6.給元素設置寬高，更利于其它元素定位時更加準確的找到該元素的位置，如果不給這個元素設置寬高而用padding的話，就會導致頁面分辨率不同的使用 padding值會自增或自減的現象發生，不利于其它元素定位時準確的找到這個元素的位置。


7.子絕父相，不一定要是父子相鄰，只要包含子元素的容器有非靜態定位，無論是直接包含還是間接包含，都是實現子絕父相，但是子元素的出發點是離它最近的那個設置了非靜態定位的容器。


8.標簽的包含規范，html的結構標準，行內元素不能包含塊兒，就算可以也不推薦，塊兒級元素可以包含塊兒級元素和行內元素，但是有語義的標簽例如 p、caption、dt、h1-h6等標簽不要包含塊兒級元素，盡量包含行內元素。


9.規避脫離標準文檔流（頁面布局的基本原則）
◆盡量使用標準文檔流
◆標準文檔流解決不了的就使用浮動
◆浮動解決不了的就使用定位


10：margin的auto值
★ margin-left:auto;表示從左往右走 走到盡頭就停下，于是子容器就停在了父容器的最右邊。
★margin-right:auto;表示從右往左走 走到盡頭就停下，于是子容器就停在了父容器的最左邊。
★margin:0px auto;表示左邊的外邊距從左往右，右邊的外邊距從右往左，當兩個對上了就是盡頭了，停止，于是就居中了，子容器在父容器中水平居中顯示了。
◆使用margin的atuo值就規避了脫離標準文檔流的必要了，不然就需要使用 float和position讓盒子很簡單的跑到最左邊或者最右邊，使用position加margin來很簡單的讓盒子水平居中垂直居中;


11.vertical-align垂直對齊方式對inline-block行內塊兒最敏感了，默認取值是baseline基線對齊，可以取上對齊top，下對齊bottom，中間對齊最常用middle。


12.css可見性
◆overflow:hidden;溢出隱藏
◆visibility:hidden;不顯示但原位置依舊占用
◆display:none;不顯示并且原來的位置也不占用
◆display:block;顯示并且獨占一行
◆display:inline-block;顯示為行內塊兒，一般用于轉換行內塊兒元素
★display的none和block常配合js使用。


13.網頁的logo一般都會鏈接到主頁去，這是常識，并且包含這個logo的盒子里面往往放的是一個頁面只有一個的h1標簽，并且會在這個標簽里面放置鏈接到主頁的超鏈接，有利于seo優化搜索引擎抓取更加友好。


14.頁面優化 css內容移出的方式有兩種，這么做是為了利于seo優化，在頁面上不顯示內容，只想要seo搜索引擎抓取。
◆text-indent:-5000px;通過縮進的方式不顯示文字內容，頁面的超鏈接依舊可以點
◆overflow:hidden;通過溢出隱藏的方式不顯示文字內容，頁面的超鏈接依舊可以點
★如果使用 display:none;或visibility:hidden;那么頁面的超鏈接就無法點擊了


15.使用css精靈圖時，使用通過背景定位和設置高寬來實現的，但是精靈圖中的小圖太多了，很難知道你想要的小圖在哪個位置、高寬為多少，這個時候就可以先用fireworks打開這張精靈圖，然后通過fireworks中的圖形截取工具，選擇區域后 右鍵 ，選擇右鍵菜單 【通過復制新建位圖的方式】? ，之后查看屬性，最后如果再想獲取其它圖片也是如此，如果獲取不到，那么就要查看層了，記住要定位到第一層，因為第一層是 精靈圖的層，只有在精靈圖的層才能用圖形截取工具那樣做，其它層無效，制作css精靈圖，打開fireworks新建一個文檔，背景設置為透明，然后打開你想要截取小圖的圖片，使用圖形截取工具截取那個小圖，之后復制再黏貼到你自己新建的文檔中，之后保存為png格式即可，其它操作步驟和使用精靈圖是一樣的。


16.屬性選擇器格式:標簽[屬性名=值][屬性名]，例如input[type=text][id=username][class]，屬性選擇器的每對屬性用中括號包含。


17.Emmet語法
◆> 表示 子 也就是其下面有什么元素? div>span? ?<div><span></span></div>
◆+ 表示 兄? 也就是其后面有什么元素? div+span? ?<div></div><span></span>
◆[] 表示 其屬性 也就是標簽內有什么屬性? div[id=box]? ?<div id="box"></div>
◆{} 表示 其內容? 也就是標簽對里面有什么內容? div{我是一個div}? <div>我是一個div</div>
◆*? 表示 個數? ?也就是需要幾個相同的標簽div*2<div></div><div></div>
◆$ 表示序列號? 也就是當你設置多個相同標簽的時候用來區分? ?div[id=box$]{第$$個div}*2? <div id="box1">第01個div</div><div id="box2">第02個div></div>??
◆() 表示 組 也就是 可以給相同等級的元素分為一組? div>(span>img)+(span>a) <div><span><img /></span><span><a /></span></div>
◆^ 表示 上一級? 也就是可以下一級標簽返回到上一級? ?div>p^div? ? ? ?<div><p></p></div><div></div>

轉載于:https://www.cnblogs.com/jwlLWJ2018/p/9158345.html

總結

以上是生活随笔為你收集整理的css相关笔记（五）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。