CSS基礎6之盒子模型1

2022-07-25 08:48:06 字數 2474 閱讀 6591

盒子概述

以下是盒子模型的乙個圖形解釋

一、內邊距(填充)

屬性有: (1) padding  設定所有內邊距

(2) padding-top  設定上邊距

(3) padding-left 設定左邊距

(4) padding-right 設定右邊距

(5) padding-bottom 設定底邊距

如果在設定時:

padding:100px    這代表四個邊距都為100px。

內邊距例子:

首先我們設定乙個div

.neibianju

內邊距 

效果如下:

6)加入左內邊距

.neibianju

然後我們在通過"開發者選項(f12)"檢視,在左邊增加了100px的內邊距

其他邊距同理

二、邊框

同樣使用上邊的**

.neibianju

border:邊框

5px: 邊框寬度為5畫素。

solid: 邊框為實線

blue:邊框顏色為藍色

下過如下圖:

邊框為藍色的

三、外邊距屬性:margin

控制塊與塊之間的距離

1)上下外邊距會重疊

比如:上邊的塊距離下邊的塊30px,下邊的塊距離上邊的塊也30px。結果他們之間的距離不會變成60,還是30px。

例子: 

2div能夠實現巢狀,但是divmargin-top的屬性值會傳遞給父級div。效果就是子盒子不會離父盒子有30px。而是他們倆同時向下移動30px.

可以使用內邊距離是子盒子向下移動

注意:盡量少使用外邊距

例子:.a

.b 正常下效果如下:               將子div設定margin-top效果如下

但是在父級div上加入border:1px solid aqua;

子div的margin-top就不會傳遞給父div。不知道是什麼原因效果如下:

上邊這種情況稱之為:外邊距塌陷

首先盒子與盒子之間屬於巢狀關係

解決方式

(1)、給父盒子新增border值

但是這樣會影響盒子本身的大小。

(2)、給父盒子新增 overflow: hidden;

overflow:hidden:  觸發元素的bfc(格式化上下文)

(3)單個盒子的外邊距

:他始終都是居中的。

簡寫為:

css盒子模型 CSS 盒子模型

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

CSS基礎 盒子模型

width和height指內容區域的寬度和高度 元素實際寬度 左右外邊距 左右邊框 左右內邊框 width 元素實際高度 上下外邊距 上下邊框 上下內邊距 height 定義元素的寬和高需要使用下面屬性 1 width寬度 height高度 固定的寬度和高度,當內容超出寬度和高度之後,不會自動填充擴...

(6)css盒子模型(基礎下)

一 理解多個盒子模型之間的相互關係 現在大部分的網頁都是很複雜的,原因是乙個 給人用的 網頁中是可能存在著大量的盒子,並且它們以各種關係相互影響著。html與dom的關係 詳情了解 dom dom 是 document object model 文件物件模型 的縮寫。乙個網頁的所有元素組織在一起,就...