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


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


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


4.脫離了標(biāo)準(zhǔn)文檔流的元素 無法再使用margin:0px auto的方式實(shí)現(xiàn)居中，連浮動(dòng)元素也不能使用這種方式，浮動(dòng)元素只能在其外面套一個(gè)盒子，讓這個(gè)盒子使用margin:0px atuo來實(shí)現(xiàn)水平居中。


5.在浮動(dòng)元素中使用繼續(xù)脫離標(biāo)準(zhǔn)文檔流的定位方式時(shí)，那些定位會(huì)以瀏覽器為基準(zhǔn)，但是那些沒有脫離標(biāo)準(zhǔn)流的定位方式，如相對(duì)定位依舊以自己為出發(fā)點(diǎn)。


6.給元素設(shè)置寬高，更利于其它元素定位時(shí)更加準(zhǔn)確的找到該元素的位置，如果不給這個(gè)元素設(shè)置寬高而用padding的話，就會(huì)導(dǎo)致頁面分辨率不同的使用 padding值會(huì)自增或自減的現(xiàn)象發(fā)生，不利于其它元素定位時(shí)準(zhǔn)確的找到這個(gè)元素的位置。


7.子絕父相，不一定要是父子相鄰，只要包含子元素的容器有非靜態(tài)定位，無論是直接包含還是間接包含，都是實(shí)現(xiàn)子絕父相，但是子元素的出發(fā)點(diǎn)是離它最近的那個(gè)設(shè)置了非靜態(tài)定位的容器。


8.標(biāo)簽的包含規(guī)范，html的結(jié)構(gòu)標(biāo)準(zhǔn)，行內(nèi)元素不能包含塊兒，就算可以也不推薦，塊兒級(jí)元素可以包含塊兒級(jí)元素和行內(nèi)元素，但是有語義的標(biāo)簽例如 p、caption、dt、h1-h6等標(biāo)簽不要包含塊兒級(jí)元素，盡量包含行內(nèi)元素。


9.規(guī)避脫離標(biāo)準(zhǔn)文檔流（頁面布局的基本原則）
◆盡量使用標(biāo)準(zhǔn)文檔流
◆標(biāo)準(zhǔn)文檔流解決不了的就使用浮動(dòng)
◆浮動(dòng)解決不了的就使用定位


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


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


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


13.網(wǎng)頁的logo一般都會(huì)鏈接到主頁去，這是常識(shí)，并且包含這個(gè)logo的盒子里面往往放的是一個(gè)頁面只有一個(gè)的h1標(biāo)簽，并且會(huì)在這個(gè)標(biāo)簽里面放置鏈接到主頁的超鏈接，有利于seo優(yōu)化搜索引擎抓取更加友好。


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


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


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


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

轉(zhuǎn)載于:https://www.cnblogs.com/jwlLWJ2018/p/9158345.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。