CSS盒子模型

2021-09-27 06:43:15 字數 2054 閱讀 4129

css三個大模組: 盒子模型 、 浮動 、 定位,其餘的都是細節。要求這三部分,無論如何也要學的非常精通。

所謂盒子模型就是把html頁面中的元素看作是乙個矩形的盒子,也就是乙個盛裝內容的容器。每個矩形都由元素的內容、內邊距(padding)、邊框(border)和外邊距(margin)組成。

所有的文件元素(標籤)都會生成乙個矩形框,我們成為元素框(element box),它描述了乙個文件元素再網頁布局彙總所佔的位置大小。因此,每個盒子除了有自己大小和位置外,還影響著其他盒子的大小和位置。

手機盒子的厚度就是邊框

語法:

border

: border-width || border-style || border-color

邊框屬性

none:沒有邊框即忽略所有邊框的寬度(預設值)

solid:邊框為單實線(最為常用的)

dashed:邊框為虛線

dotted:邊框為點線

double:邊框為雙實線

border-radius: 10px 40px  80px  100px;   /* 左上角 10    右上角 40  右下角 80   左下角   右下角100 */
手機盒子的填充泡沫就是內邊距

padding屬性用於設定內邊距。 是指 邊框與內容之間的距離。

內邊距屬性

值的個數

表達意思

1個值padding:上下左右邊距 比如padding: 3px; 表示上下左右都是3畫素

2個值padding: 上下邊距 左右邊距 比如 padding: 3px 5px; 表示 上下3畫素 左右 5畫素

3個值padding:上邊距 左右邊距 下邊距 比如 padding: 3px 5px 10px; 表示 上是3畫素 左右是5畫素 下是10畫素

4個值padding:上內邊距 右內邊距 下內邊距 左內邊距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 順時針

margin屬性用於設定外邊距。 設定外邊距會在元素之間建立「空白」, 這段空白通常不能放置其他內容。

外邊距屬性

margin:上外邊距 右外邊距 下外邊距 左外邊

取值順序跟內邊距相同。

外邊距實現盒子居中

可以讓乙個盒子實現水平居中,需要滿足一下兩個條件:

必須是塊級元素。

盒子必須指定了寬度(width)

然後就給左右的外邊距都設定為auto,就可使塊級元素水平居中。

實際工作中常用這種方式進行網頁布局,示例**如下:

.header

為了更方便地控制網頁中的元素,製作網頁時,可使用如下**清除元素的缺省內外邊距:

我們盡量不要給行內元素指定上下的內外邊距就好了。

開始學習盒子模型,最大的困惑就是, 分不清內外邊距的使用,什麼情況下使用內邊距,什麼情況下使用外邊距?

答案是: 其實他們大部分情況下是可以混用的。 就是說,你用內邊距也可以,用外邊距也可以。 你覺得哪個方便,就用哪個。

但是,總有乙個最好用的吧,我們根據穩定性來分,建議如下:

按照 優先使用 寬度 (width) 其次 使用內邊距(padding) 再次 外邊距(margin)。

width >  padding  >   margin
原因:

margin 會有外邊距合併 還有 ie6下面margin 加倍的bug(討厭)所以最後使用。

padding 會影響盒子大小, 需要進行加減計算(麻煩) 其次使用。

width 沒有問題(嗨皮)我們經常使用寬度剩餘法 高度剩餘法來做。

css盒子模型 CSS 盒子模型

css 盒子模型基本上是面試的必考題,因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調,其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型,你可能會說我知道呀,就是 margin 包 border,border 包 padding,padding 包 content ...

css盒子模型 說說css盒子模型

引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候,瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...

css 盒子模型 ie盒子模型

css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型,ie盒子模型,注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...