css盒子模型 邊框邊距

2021-10-09 17:40:39 字數 1002 閱讀 4422

border-style : dashed ;邊框線為虛線

border-style : solid ;邊框線為實線

例:box-shadow:10px 10px 10px pink;

box-shadow:水平 垂直 模糊度 顏色;

盒子陰影的引數:

1)水平

2)垂直

3)模糊度

4)陰影尺寸

5)陰影顏色

6)陰影位置 (inset內陰影)

border-radius:10%  /10px;	正圓佔比必須一半以上
邊框線的粗細:上 右 下 左 ;

1、border-top-width

2、border-right-width

3、border-bottom-width

4、border-left-width

邊框線的顏色:上 右 下 左 ;

1、border-top-color

2、border-right-color

3、border-bottom-color

4、border-left-color

① 上 . 右 . 下 . 左

② 上下 . 左右

③ 上 . 左右 . 下

④ 僅乙個值,代表四個方向

margin : 0 auto ; 自動居中

內容盒子:content-box

padding 和 border不占有原有的高度和寬度
邊框盒子:border-box

padding 和 border 都包含在固有的寬度和高度內
box-sizing

——內容 ->標準

——邊框 - >怪異

CSS 盒子模型 邊距合併

css外邊距合併,只有上外邊距和下外邊距才會觸發外邊距合併,左外邊距和右外邊距不會。源 div1 div2 執行效果如下 div1和div2 根據盒子模型的計算規則,div1下邊距100px和div2上邊距100px,理論應該是200px。實際css規則是合併的,因此div1和div2 之間的距離為...

CSS 之盒子模型 邊框 內邊距 外邊距

使用width來設定盒子內容區的寬度 使用height來設定盒子內容區的高度 width和height只是設定的盒子內容區的大小,而不是盒子的整個大小,盒子可見框的大小由內容區,內邊距和邊框共同決定 為元素設定邊框 要為乙個元素設定邊框必須指定三個樣式 border width 邊框的寬度 bord...

盒子邊框 外邊距 內邊距 盒子模型的尺寸

1.盒子模型由 網頁內容content 邊框boder 內邊距padding 外邊距margin 四部分組成 2.邊框boder 三個屬性 顏色color 粗細width 樣式style 01.color 分開設定boder top color上邊框顏色 boder bottom color下邊框顏...