CSS盒子模型教程課件

1、 第四講：DIV+CSS布局-CSS盒子模型 第四講： “盒子模型”的概念1設(shè)置邊框設(shè)置內(nèi)邊距設(shè)置外邊距 “盒子模型”的概念1設(shè)置邊框設(shè)置內(nèi)邊距設(shè)置外邊距 盒子之間的關(guān)系2盒子在標準流中的定位原則3盒子模型概念的案例4 盒子之間的關(guān)系2盒子在標準流中的定位原則3盒子模型概念的案 網(wǎng)頁上的各個元素（圖片、段落、單元格。）均是以“盒子”的形式存在的。在瀏覽器看來網(wǎng)頁就是許多盒子排列在一起或相互嵌套。 網(wǎng)頁上的各個元素（圖片、段落、單元格。 盒子模型是CSS控制頁面時一個很重要的概念。 只有很好地掌握了盒子模型以及其中每個元素的用法，才能真正地控制好頁面中的各個元素。本節(jié)主要介紹盒子模型的基本概念，

2、并講解CSS定位的基本方法。 盒子模型是CSS控制頁面時一個很重要本節(jié)主1.1 “盒子”與“模型”的概念畫框示意圖1.1 “盒子”與“模型”的概念畫框示意圖 圖2 盒子模型 圖2 盒子模型1.2 盒子屬性值的簡寫形式（組合屬性）參考教材，掌握組合屬性的寫法： 方法是按照規(guī)定的順序，給出2個、3個或者4個屬性值，它們的含義將有所區(qū)別，具體如下。1.2 盒子屬性值的簡寫形式（組合屬性）參考教材 （1）如果給出2個屬性值，那么前者表示上下padding的屬性，后者表示左右padding的屬性。比如：padding: 10px 20px;（2）如果給出3個屬性值，那么前者表示上padding的屬性，中

3、間的數(shù)值表示左右平padding的屬性，后者表示下padding的屬性。（3）如果給出4個屬性值，那么依次表示上、右、下、左padding的屬性，即順時針排序。 （1）如果給出2個屬性值，那么前者表示上下pad1.3 在一行中同時設(shè)置邊框的寬度、顏色和樣式要把border-width、border-border-color和border-style這3個屬性合在一起，還可以用border屬性來簡寫。1.3 在一行中同時設(shè)置邊框的寬度、顏色和樣式要把b 例如：border: 2px green dashed這行樣式表示將4條邊框都設(shè)置為2像素的綠色虛線，這樣就比分為3條樣式來寫方便多了。 例如：

4、案例a調(diào)整網(wǎng)頁中的對齊方式，目標：1、理解盒子的各個屬性2、理解空格的影響3、理解body標記的margin屬性4、如何利用css控制頁面特定的元素 （注意id和class屬性的區(qū)別）5、在dreamweaver中如何創(chuàng)建css案例a調(diào)整網(wǎng)頁中的對齊方式，目標：2 盒子之間的關(guān)系2.1 HTML與DOM（文檔對象模型）1HTML HTML標記是嵌套的層次式結(jié)構(gòu)，每個標記表示的元素可以視為“盒子”，即盒子是嵌套關(guān)系。2DOM樹 用樹形結(jié)構(gòu)表示各個元素（對象）的關(guān)系。2 盒子之間的關(guān)系2.1 HTML與DOM（文檔對象 DOM樹與頁面布局的對應(yīng)關(guān)系 DOM樹與頁面布局的對應(yīng)關(guān)系2.2 標準文檔流新

5、的概念“標準文檔流”（Normal Document Stream），或簡稱“標準流”。所謂標準流，就是指在不使用其他與排列和定位相關(guān)的特殊CSS規(guī)則時，各種元素的排列規(guī)則。2.2 標準文檔流新的概念“標準文檔流”（Nor 如果要了解瀏覽器對元素的處理規(guī)則，必須了解兩類元素（標記）： 1塊級元素 2行內(nèi)元素 不管是哪種元素，同樣可以視為一個盒子，不同的是塊級元素瀏覽器顯示時在該元素的前后會自動換行，因此多個塊級元素不會排在一行。 而行內(nèi)元素則默認顯示在一行內(nèi)，只有在最右端才自動換行。 常見的塊級元素和行級元素XHTML常見的塊級元素有哪些呢？ div 通用塊級元素 form 交互表單 h1 大

6、標題 h2 副標題 h3 3級標題 h4 4級標題 h5 5級標題 h6 6級標題 hr 水平分隔線 ol 排序表單 p 段落 table 表格 ul 非排序列表XHTML常見的行內(nèi)元素有哪些呢？ a 錨點 b 粗體(不推薦) br 換行 font 字體設(shè)定(不推薦) i 斜體 img 圖片 input 輸入框 select 項目選擇 span 通用行級元素 strong 粗體強調(diào) textarea 多行文本輸入框 var 定義變量 常見的塊級元素和行級元素XHTML常見的塊級元素有哪些呢？X 舉例演示行級元素和塊級元素的區(qū)別 1、舉例常見的標記 2、分析案例C 舉例演示行級元素和塊級元素的區(qū)

7、別 2.3 分析案例b的處理過程2.3 分析案例b的處理過程3 盒子在標準流中的定位原則3.1 行內(nèi)元素之間的水平margin3 盒子在標準流中的定位原則3.1 行內(nèi)元素之間的 行內(nèi)元素之間的margin 行內(nèi)元素之間的margin 3.2 塊級元素之間的豎直margin塊元素之間的margin3.2 塊級元素之間的豎直margin塊元素之間的mar3.3 嵌套盒子之間的margin父子塊的margin3.3 嵌套盒子之間的margin父子塊的margin IE與Firefox瀏覽器對待父元素高度的不同處理 IE與Firefox瀏覽器對待父元素高度的不同處理3.4 margin可以設(shè)置為負值父