css基礎精華

標籤：tac   css基礎   last   位置   ast   嵌套   bsp   使用   相對   

css手打不易，望君珍惜。css固定格式選取器{屬性：屬性值；｝文字相關屬性font-syle:normalitalicfont-weight:bold;bolederlighterfont-size:px;font-family:”微軟雅黑”；如果有英文，先把英文放在前面用逗號隔開。注釋 /* */簡寫 italic bold px family文字屬性text-decoration: underlineline-throughoverlinenonetext-algin: leftrighttopbottomtext-indent:em顏色rgb(225,225,225)後面可以放一個0 ，0到1 ，顯示透明度。選取器標籤選取器p{}類別選取器.class1{}<div class="class1"></div>只能使用數學英語單詞底線，不能以數字開頭。id選取器top{}<div></div>企業慎用後代選取器ul li｛｝<li></li><ul><li></li><li></li></ul><li></li>空格隔開後代選取器div>p{}<p></p><div><p></p><p></p><ol><p></p></ol></div><p></p>交集選取器選取器1選取器2{}<div><p></p><p class="選取器1"></p><p class="選取器2"></p></div>兄弟選取器1.1相鄰兄弟選取器緊跟後面的一個標籤div+p{}<div><p></p><p>p/></div><div><p></p></div>通用兄弟選取器div~p{}{<div><p></p><p>p/></div><div><p></p></div>序選取器1.1同層級：first-child:last-child:nth-child:nth-last-child:nth-odtype(odd)1.2同層級同類型:first-of-type:last-of-type:nth-of-typenth-last-of-typenth-od-type(even)屬性選取器p[id]<p id="1"></p>[attribute value]p[class=cc ]<p class="cc"></p>屬性以什麼開頭的[attribute1= value] c2區分[attribute^= value] c3<img src="" alt="yuusauiuisa">img<alt=^jsd> 1.3屬性以什麼結尾的[attribute$= value] c31.4包含什麼情境[attribute~= value] c2區分[attribute*= value] c3 萬用字元選取器*｛｝企業很少優先順序!imoortant 只能提升優先順序，其他無效。id>class>萬用字元>繼承>預設權重問題id越多優先順序越高，id+class越多優先順序越高，同理。繼承性 ，只能繼承font tetx colr line,a 標籤 underline h 無效。 div和spandiv 是塊級span 是行內disiplay:inline 不佔行block 單獨佔一行 可以設定寬高inlne-block背景顏色line-height: 1.875;">background-image:url();background-repeat:no-repeat;:repeat-x:repeat-ybackground-position:left top/right top具體像素精靈圖width:pxheight:pxbackground-image:url();background-position:px px ;background：背景顏色 背景圖片平鋪方式 關聯方式 定位方式background 可以清除任何一個屬性關聯方式background-attachmet:scroll 捲軸一起背景圖片和插入圖片的區別插入圖片的佔地方想用搜尋搜到背景圖片有定位屬性語義話強背景圖片須於架構一樣寬盒子模型 邊框屬性boreder-topbottomleftrightborder:px solid/dashed color連寫border-width:px px px pxborder-style:style style style styleborder-color: 上 右 下 左左右對應，設定一個算全域。 內邊距padding:上右下左 寬高會有變化toprightleft外邊距margin-上右下左toprightleft外邊距的合并預設布局垂直方向，外邊距不會疊加，誰大聽誰的。 盒子增加了border增加了盒子的大小box-sizing: border-box; 可以保證盒子大小不變。注意點如果兩個盒子是嵌套關係，外面的盒子，會被裡的盒子頂下來。添加一個邊框屬性就不會頂下來。企業開發需要控制嵌套關係，需考慮padding。margin:0px auto.只對水平有有效。text-algin:;只對文字圖片有效。margin:0px auto;清除預設邊距*｛margin:0px;padding:0px;｝行高line-height:px;只能適用於一行多行用padding 來設定水平置中企業開發中盒子放的是文字一般以左邊為準備。 標準流行內元素浮動流float:left;right;在浮動流中不可以使用margin:0px autp;不區分行內元素，區塊層級元素在浮動流不區分行內 塊級都可以設定 寬高。浮動元素 的脫標先浮動找浮動，左浮動找左浮動，右浮動找右浮動。貼靠現象，字圍現象標準流內容的高度可以撐起盒子的高度，浮動流不可以 清除浮動overflow:hidden1.1可以清除浮動 給第一個盒子添加1.2不允許出內容1.12可以設定第一個margin-bottom第二個margin-topi6需設定 *zoom:1;嵌套關係，給外面盒子設定 overflow:hidden 定位流1.1 相對定位position:relative;top:px;區分行內不脫離標準流會佔元素位置1.2 絕對位置脫離標準流預設以body為參考點position:absolutetop:xp;那個祖先離的最近為他為參考點靜態定位無效不區分行內，塊級子絕父相奇門技巧置中left=50%backgrpund-attachment:fixed 隨著滾動1.3 固定定位不佔空間不分行內position:fixed                                                        

css基礎精華