2020-9-11 前端達人
首先利用CSS設(shè)置好盒子的大小,然后擺放盒子的位置。最后把網(wǎng)頁元素比如文字圖片等等,放入盒子里面。
盒子模型由元素的內(nèi)容邊框border內(nèi)邊距padding和外邊距margin組成
盒子里面的文字和圖片等元素是內(nèi)容區(qū)域,盒子的厚度我們稱為盒子的邊框
盒子內(nèi)容與邊框的距離是內(nèi)邊距,盒子與盒子之間的距離是外邊距
語法
邊框綜合設(shè)置
border: 1px solid red; 沒有順序
表格的細線邊框
cellspacing=“0” ,將單元格與單元格之間的距離設(shè)置為0
border-collapse:collapse; 表示相鄰邊框合并在一起
padding屬性用于設(shè)置內(nèi)邊距,是指邊框與內(nèi)容之間的距離
屬性
padding-left左內(nèi)邊距padding-right右內(nèi)邊距padding-top上內(nèi)邊距padding-bottom下內(nèi)邊距
簡寫
2個值 padding: 上下內(nèi)邊距 左右內(nèi)邊距 ;
4個值 padding: 上內(nèi)邊距 右內(nèi)邊距 下內(nèi)邊距 左內(nèi)邊距 ;
內(nèi)盒尺寸計算(元素實際大?。?/span>
盒子的實際的大小 = 內(nèi)容的寬度和高度 + 內(nèi)邊距 + 邊框
margin屬性用于設(shè)置外邊距。margin控制盒子和盒子之間的距離,屬性和簡寫與padding相同
盒子必須指定寬度(width)然后就給左右的外邊距都設(shè)置為auto
盒子內(nèi)的文字水平居中是text-align:center, 而且還可以讓行內(nèi)元素和行內(nèi)塊居中對齊
塊級盒子水平居中 左右margin 改為 auto
代碼
注意
行內(nèi)元素為了兼容性, 盡量只設(shè)置左右內(nèi)外邊距, 不設(shè)置上下內(nèi)外邊距
當上下相鄰的兩個塊元素相遇時,如果上面的元素有下外邊距margin-bottom,下面的元素有上外邊距margin-top,則他們之間的垂直間距不是margin-bottom與margin-top之和,取兩個值中的較大者這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并
解決方案
盡量給只給一個盒子添加margin值
對于兩個嵌套關(guān)系的塊元素,如果父元素沒有上內(nèi)邊距及邊框,父元素的上外邊距會與子元素的上外邊距發(fā)生合并,合并后的外邊距為兩者中的較大者
解決方案
可以為父元素定義上邊框
可以為父元素定義上內(nèi)邊距
可以為父元素添加overflow:hidden
按照優(yōu)先使用寬度(width)內(nèi)邊距(padding)外邊距(margin)
原因
margin有外邊距合并還有ie6下面margin加倍的bug所以最后使用
padding會影響盒子大小,需要進行加減計算,其次使用
width沒有問題,經(jīng)常使用寬度剩余法高度剩余法來做
塊級元素會獨占一行,從上向下順序排列
行內(nèi)元素會按照從左到右順序排列,碰到父元素邊緣則自動換行
讓盒子從普通流中浮起來,主要作用讓多個塊級盒子一行顯示
將盒子定在瀏覽器的某一個位置
因為行內(nèi)塊元素可以實現(xiàn)多個元素一行顯示但中間會有空白縫隙
因為行內(nèi)塊元素不能實現(xiàn)盒子左右對齊
元素的浮動是指設(shè)置了浮動屬性的元素
會脫離標準普通流的控制并可以移動到指定位置
讓多個盒子(div)水平排列成一行,使得浮動成為布局的重要手段
浮動最早是用來控制圖片,實現(xiàn)文字環(huán)繞圖片的效果
可以實現(xiàn)盒子的左右對齊等等
屬性值
none(元素不浮動(默認))left(元素左浮動)right(右浮動)
浮
加了浮動的盒子是浮起來的,漂浮在其他標準流盒子的上面
漏
加了浮動的盒子不占位置,它原來的位置漏給了標準流的盒子
特
浮動元素改變display屬性, 類似轉(zhuǎn)換成行內(nèi)塊元素,但是元素之間沒有空白縫隙
浮動和標準流的父盒子搭配
實際的導航欄中不直接用鏈接a而是用li包含鏈接(li+a)
li+a語義更清晰
直接用a搜索引擎容易辨別為有堆砌關(guān)鍵字嫌疑而影響網(wǎng)站排名
浮動元素與父盒子的關(guān)系
子盒子的浮動參照父盒子對齊
不會與父盒子的邊框重疊,也不會超過父盒子的內(nèi)邊距
浮動元素與兄弟盒子的關(guān)系
在一個同一個父級盒子中,如果前一個兄弟盒子是浮動的,那么當前盒子會與前一個盒子的頂部對齊
在一個同一個父級盒子中,如果前一個兄弟盒子是普通流的,那么當前盒子會顯示在前一個兄弟盒子的下方
浮動元素不占用原文檔流的位置,會對后面的元素排版產(chǎn)生影響
父級元素因為子級浮動導致內(nèi)部高度為0,清除浮動后,父級會根據(jù)浮動的子盒子檢測高度,父級有高度就不會影響下面的標準流
屬性值
left清除左浮動right清除右浮動both同時清除左右浮動
優(yōu)缺點
通俗易懂,書寫方便,但是添加許多無意義的標簽,結(jié)構(gòu)化較差
可以給父級添加:overflow為hidden|auto|scroll都可以實現(xiàn)
優(yōu)缺點
代碼簡潔,但是內(nèi)容增多時候容易造成不會自動換行導致內(nèi)容被隱藏掉,無法顯示需要溢出的元素
優(yōu)缺點
符合閉合浮動思想結(jié)構(gòu)語義化正確,但是由于IE6-7不支持:after,使用zoom:1觸發(fā)hasLayout
方法
優(yōu)缺點
代碼更簡潔,但由于IE6-7不支持:after使用zoom:1觸發(fā)hasLayout
藍藍設(shè)計的小編 http://m.sillybuy.com