css第三天 盒子模型

2021-08-21 20:16:51 字數 689 閱讀 9432

1邊框border

1.1顏色 color

1.2寬度 width

1.3樣式style

solid    dashed  dotted

1.4例子

border: 1px solid red    4個邊框都是紅色的實線

border-top:1px dashed  pink;

2外邊距

2.1margin讓塊級盒子居中對齊

條件:塊級  有寬度  margin左右設定為auto

margin:0 auto;

2.2合併塌陷問題

上下外邊距有合併問題

巢狀關係的盒子也會有塌陷

解決方法:給父盒子新增border  或者新增padding  或者新增overflow:hidden;

3內邊距

3.1盒子內容的距離

3.2padding的寫法和給定數值的含義(同margin)

3.padding會撐開盒子,一般情況下需要用width和高度減去多出來的padding

特殊情況:如果盒子沒有給出寬度,此時padding是不會撐開盒子的

4擴充套件 css3 的兩個屬性

border-radius:50%/10px;  ---->圓角

box-shadow:2px  2px  2px   rgba(0,0,0,0.3);---->盒子陰影

CSS第三天之盒子模型

網頁布局過程 先準備好相關的網頁元素,網頁元素基本上都是盒子 利用css設定好盒子的樣式,並且將盒子擺放在合適的位置。往盒子裡面裝內容 網頁布局的核心 利用css擺盒子。border可以設定盒子得邊框,邊框有三個屬性 粗細,樣式,顏色 屬性作用 border width 設定邊框的寬度 border...

css盒子模型 CSS 盒子模型

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

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

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