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 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...