一、CSS盒子模型   CSS將每個元素看成是一個矩形盒子，佔據一定空間。 盒子模型兩方面理解：1.獨立的盒子內部結構；2.多個盒子之間的香菇關係。   1.盒子模型概念 獨立盒子模型由：內容、border、padding、margin四部分組成。詳見之前的文章內容。 盒子的實際寬（高）= 內容（width/height）+padding（兩邊）+border（兩邊）+margin（兩邊） width和height指內容的寬高。   2.邊框 邊框屬性： （1）border-color （2）border-width，屬性值可以使thin、medium、thick、長度單位。 （3）border-style，重要屬性。如果沒有指定邊框樣式，其他屬性都不起作用，邊框將不存在。屬性值有：

none（預設，無邊框） hidden（隱藏邊框，解決邊框衝突問題） dotted（點）、dashed（虛線）、 solid（實線） double（雙線邊框）、groove（3D凹槽邊框）、ridge（3D凸槽邊框）、inset（3D凹邊邊框）、outset（3D凸邊邊框）   2個屬性值：上下，左右； 3個屬性值：上，左右，下； 4個屬性：上，右，下，左。 前三個可直接寫成border：xxx；

  （4）border-radius，圓角邊框/圓角背景。      （對角線原則）     2個屬性：左上角右下角，右上角左下角；     3個屬性：左上角，右上角左下角，右下角；     4個屬性：左上，右上，右下，左下。   （5）border-shadow，陰影。 屬性：水平偏移值  垂直偏移值  模糊值  尺寸  顏色  型別 border-shadow：水平偏移值   垂直偏移值  模糊值  尺寸  顏色  型別；

紅色為必選。可以是負數（往相反方向偏移）； 模糊值預設0； 陰影尺寸預設0； 陰影型別預設outset，另一個是內陰影inset。 注意：加入陰影后盒子所佔的實際寬度和高度要加上陰影的寬度和高度。   3.內容 屬性： （1）width、height。有三種值：auto（根據盒子內容自動調整）、固定值、百分比（佔父元素width和height的百分比）。 （2）overflow，溢位值處理。

auto：自動判斷是否超過設定高度，超過就顯示滾動條。 hidden：溢位部分不顯示。 scroll：不管是否溢位，強制顯示滾動條。 visible：溢位部分依舊顯示，這是預設值。

還有兩個子屬性：overflow-x 和 overflow-y ，用來單獨定義水平/垂直方向的處理方式。   4.padding（內邊距） 2個屬性值：上下，左右 3個屬性值：上，左右，下 4個屬性值：上，右，下，左 注意：padding值不能是負數。另外使用padding時，盒子寬度為auto/沒有定義寬度時，內邊距計算在盒子內，否則計算在盒子外。   5.margin（外邊距） margin控制元素與元素之間的距離。 margin值可為負數。 預設情況下，有些元素的padding和margin會有相應的預設值，不同瀏覽器不同。所以CSS佈局中，利用下面程式碼將所有元素的內外邊距設為0，重置邊距。

*{   /*所有元素的內外邊距重置*/     margin:0;     padding:0; }1234

body的margin比較特殊，控制的是頁面與瀏覽器視窗邊距的距離。

  二、盒子之間的關係 有標準流模式、“浮動”屬性、“定位”屬性。 1.標準文件流/標準流 指不使用一些特殊的排列和定位的css樣式。 元素排列方式的不同可以分為兩大類： 1.塊級元素： 在父元素中會自動換行，且跟同級的兄弟元素按照出現的順序依次垂直排列，寬度自動鋪滿父元素寬度。 div、h1 -h6、 p 、pre 、hr、menu、noframes、noscript、dl、ul、ol 、fieldset、form、table 2.行內元素： 在父元素中水平排列，直到父元素的最右端才自動換行。 span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite,  a，sub，sup 他們本身不佔據單獨區域，僅僅是在其他元素的基礎上指出一定範圍。 塊級元素可以包含行內元素和塊級元素，反過來不行。 行內元素設定的width和height無效，設定margin和padding只有左右邊距有效。   2.div元素和span元素 1.<div> 標記 這個標記無任何特殊含義。 2.<span> 標記 也沒有任何特殊含義。 通常情況下，頁面中大的區域塊用<div> ，<span>僅用於需要單獨設定樣式風格的小元素。   3.盒子在標準流中的定位 用margin控制盒子與盒子之間的位置關係。 （1）兩個行內元素相鄰時距離：左邊的margin-right+右邊的margin-left； （2）不是行內元素，有換行效果的塊級元素：上下間的距離是兩者中的較大者，如上面的margin-bottom大於下面的margin-top，距離就取margin-bottom。 （3）當div巢狀時，子元素的margin將以父元素的內容區域為參考。 “標準流”中，塊級元素沒有設width和height時，預設寬度會自動延伸到父元素的內容區域為限，高度為包容下內容的最小高度。如果設定了width和height，就以值來顯示。 （4）當margin為負數時。被設為負數的往相反方向移動，甚至會覆蓋在其他元素上。當塊級元素間形成巢狀的父子關係時，margin設為負數可以使子元素從父元素中分離出來。如：

<div class="father">父     <div class="son">子</div> </div> ······ .son{     margin-left:-30px; }1234567

  4.盒子的浮動（float）與定位（position） 1.盒子的浮動（float） 通過設定塊級元素float屬性，可使元素“浮動”。 float預設值為none。還有left，right。 設定浮動後，盒子的寬高也會有改變。要清除浮動。也就是：（塊級元素設定為浮動後，將脫離“標準流”，但還佔據著父元素的空間，父元素的高度不再受浮動的子元素的影響，而由沒浮動的其他子元素高度確定。） 浮動可使多個塊級元素水平排列。 清楚浮動：clear：left，right，both，none。預設值為none。

/*在父元素中所有浮動元素的後面再增加一個div元素*/ <div class="clear"></div> ····· .clear{clear:both;}1234

  2.盒子的定位（position） 除了可以使用float，還可以使用position。四個值，static，absolute，relative，fixed。 （1）static（靜態定位） 表示元素在標準流中的預設位置。無任何效果。為預設值。 （2）relative（相對定位） 指定為relative後還要指定一定的偏移量，水平方向left、right，垂直方向top、bottom。 偏移量是指與它原來所處的位置的移動距離。 可以描述如下：     1）.相對定位，是以元素恩深在“標準流”中或者浮動的原本的位置為基準，通過偏移達到新位置。     2）.仍在標準流中，對父元素和兄弟元素無任何影響，即使由於偏移移到了父元素外邊，其他元素也還在原來位置，不會頂上來。 （3）absolute（絕對定位） 也需要指定偏移量。     1）.絕對定位，從標準流中脫離，他們對其後的兄弟元素無任何影響。     2）.使用絕對定位的元素，以它“最近”的一個“已經定位”的“祖先元素”為基準進行偏移，如果沒有已經定位的祖先元素，則以瀏覽器視窗為基準進行偏移。     3）.所謂已經定位：指position有設定，且不是設定為static的任意一種方式。 （4）fixed（固定定位） 以瀏覽器視窗為根據。   5. z-index空間位置 z-index屬性調整重疊元素的上下位置，值大的位於小的上方。值可為正數可為負數。   6. 盒子的display屬性 display可以改變元素塊級和行內狀態。 常用值：none，inline，block。 none：隱藏起來。

  三、CSS頁面佈局  設計者根據頁面顯示的內容，對頁面有個整體的框架規劃，包括整個頁面分為哪些區域，各區域的父子關係等。div對整體區域進行劃分，然後用css進行定位，再在各個div中新增相應的內容並用css進行樣式控制。 常用佈局方式：寬度固定且居中板式、“工”字型板式。 注：記得如果用float，要記得clear。如果用position：absolute，父元素的position也要設定。

  四、CSS內容排版 1.CSS設定文字樣式 1）字型：font-family。 2）文字大小：font-size。（如果是百分比，行內元素是相對於父元素文字大小的百分比。如果本身是塊級元素，就是相對於自身的百分比。） 3）文字加粗：font-weight。值有：normal、bold、bolder、lighter，或數值。 4）文字傾斜：font-style。值有：italic（義大利體）、normal、oblique（真正的傾斜）。 5）其上可以統一用font：xxx xxx xxx ·····複合表示。 6）文字顏色：color。 7）文字下劃線、頂劃線、刪除線：text-decoration。值有：none、underline（下劃）、overline（頂劃）、line-through（刪除線）、blink（閃爍，部分瀏覽器支援）。 可以同時加好幾個效果，如同時加頂劃和下劃等。 8）英文大小寫切換：text-transform。值有：capitalize（首字母大寫）、lowercase（全部小寫）、uppercase（全部大寫）。 9）文字間距：letter-spacing——字母間距；word-spacing——單詞間距。中文間距用letter-spacing。 10）文字水平對齊：text-align。值有：left、right、center、justify（兩端對齊）。 11）文字行高：line-height。 12）段落首行縮排：text-indent。text-indent：2em。突出就是-2em。

/*實現首字下沉*/ p.one:first-letter{     font-size:3em;      /*首字大小*/     float:left;         /*向左浮動，實現首字下沉*/     padding-left:24px;  /*與左邊間距*/     padding-right:5px;  /*與右邊間距*/     font-weight:bold; } ····· <body>     <p class="one">這邊要實現首字下沉效果。並且內容應該很長。</p> </body>123456789101112

13）段落間的間距：設定p的margin屬性實現。應該是上下段落中margin值大的那個。

  2.CSS設定影象樣式 1）影象邊框：html有自帶了border屬性，但一般用css設定。 2）影象縮放：通過width和height實現。

img{width:50%}  /*相對父元素的大小*/1

設定影象時要注意：僅設定影象的width或height時，影象會自動等比例縮放。如果同時設定，影象不會等比例縮放。 3）影象對齊： ——a.水平對齊：不能直接通過img的text-align屬性實現。要設定其父元素的text-align屬性。可巢狀在div裡通過設定div的text-align。 ——b.垂直對齊：可直接通過img的vertical-align屬性實現。vertical-align 只能用於行內元素 。vertical-align屬性值：baseline（預設值，落在文字的基線上）、top、middle、bottom、sub、super、text-bottom（與文字底端對齊）、text-top（與文字頂端對齊）。也可以用數值表示，正負都可，以文字基線為基準，上移（正）或下移（負值）一定距離，均以影象底部為準。   3.CSS設定背景樣式 1）背景顏色：background-color。 2）背景影象：background-image。background-image：url（img/1.jpg）； 3）背景影象平鋪：預設情況，自動沿水平和垂直平鋪。希望只沿著一個方向平鋪，通過background-repeat控制： repeat：沿水平和垂直。預設值。 no-repeat：不平鋪。 repeat-x：沿水平方向。 repeat-y：沿垂直方向。 4）背景影象位置：background-position。數值：水平 垂直。 5）固定背景影象位置：background-attachment：fixed。 6）綜合以上所有的：background：background-image red no-repeat fixed 70% 30%；   4.CSS設定樣式列表 1）列表符號：list-style-type。對ul和ol一樣效果。   2）影象符號：list-style-image。list-style-image：url（img/1.jpg）； 不同了瀏覽器會產生影象符號與列表項文字間距不一樣的效果。可將ul元素的list-style-type設定為none，隱藏專案符號，再將影象設定為li的背景影象：background：url（img/1.jpg）；實現各個瀏覽器效果一樣。   5.CSS設定超連結 1）按鈕式超連結：通過css屬性，設定border邊框屬性實現。 2）背景影象變換超連結：多種方法。可通過專案列表的list-style-type設為none來製作選單和導航條。 難點：利用float屬性使得列表中每一個列表項達到水平排列。利用display屬性將行內元素a轉換為塊級元素，從而可以設定width和height。   6.滑鼠特效 cursor：pointer。其他數值具體看其他的文章。不一一列出。   7.CSS設定表格樣式 ps：<table summary="這裡的值用於概括整個表格內容，瀏覽器不顯示，對於搜尋引擎抓取有用"> 1）設定表格、單元格邊框：border。 預設情況下，各個單元格邊框數分離的，如果要設定相鄰單元格邊框間距，table有自帶了html的collspacing屬性，此處用css的border-spacing屬性。border-spacing：10px； 如果單元格間兩條邊框合為一條，可將table元素設定border-collapse屬性：border-collapse：collapse； 每個單元格都可設定自己的樣式，相鄰邊框在合併時的優先順序： ——a.粗的邊框>細的邊框，如果border-width屬性相同，則double>solid>dashed>dotted>ridge>outset>groove>inset。 ——b.如果邊框border-style：hidden，則優先順序最高。 ——c.如果邊框border-style：none，則優先順序最低。 ——d.如果邊框的其他設定均相同，只有顏色上的區別，則單元格樣式>行>行組>列>列組>表格樣式。 2）表格種的顏色：color。 3）表格寬度：table-layout。auto時為自動方式，預設值。fixed為固定值，表格寬度不依賴單元格中的內容，由width指定。 例子：表格的立體效果。   8.CSS設定表單樣式 略。

  五、瀏覽器相容 五大瀏覽器：IE、Firefox、Chrome、Safari、Opera。 針對不同瀏覽器編寫不同css程式碼——Hack過程。 要程式碼優化，儘可能少的產生冗餘程式碼。 1.Hack IE6識別“ * ”和“ _ ”，IE7識別“ * ”，firefox都不能識別。順序應該是 正常，帶*號的，帶_的。 此外：!important宣告在IE6和FF中可以提升樣式應用優先權。但在IE6中，!important宣告會被之後的同名屬性定義替換。所以*和!important宣告搭配可以很好的解決IE6、IE7和FF的相容性問題。 ps：區別IE6、IE7：background：green !important；background：blue； 2.私有字首： 暗示該CSS屬性或規則尚未成為W3C標準的一部分。私有字首有4種： -webkit-   ———— chrome和safari 1的 -moz-  ———— FF -ms-  ———— IE -o-   ———— Opera 如：

border-radius：12px; -webkit-border-radius：12px;   ———— chrome和safari 1的 -moz-border-radius：12px;  ———— FF -ms-border-radius：12px;  ———— IE -o-border-radius：12px;   ———— Opera /*由於safari5，FF4，chrome最新版都支援border-radius屬性，所以程式碼可直接寫成border-radius：12px;。*/123456                   --------------------- 作者：ranchocai 來源：CSDN 原文：https://blog.csdn.net/Ranchonono/article/details/68187642 版權宣告：本文為博主原創文章，轉載請附上博文連結！