CSS盒子模型 邊框 內外邊距 預設樣式

一、盒子模型

1、盒子的大小

.box1

1⃣️邊框的寬度

/*設定邊框的寬度*/

border-width
:100px;

border-width

:10px 20px 30px 40px;
border-width
:10px 20px 40px;
border-width
:10px 20px;
border-width
:10px;

border-color

:red;
border-color
:red yellow orange green;
border-color
:red yellow orange;

border-style

:dotted solid double dashed;

border-width

:10px;
border-color
:red;
border-style
:dotted;

border

:red solid 10px;
border-right
:none;
/*把不想要的那條邊的樣式去掉*/

/*設定上內邊距*/

padding-top
:100px;
/*設定右內邊距*/
padding-right
:100px;

padding

:100px 200px 300px 400px;

1⃣️一般操作

/*設定box1的上外邊距，盒子上邊框和其他的盒子的距離*/

margin-top
: 100px;
/*左外邊距*/
margin-left
: 100px;
/*設定右和下外邊距*/
margin-right
: 100px;

margin-left

: -100px;
margin-top
: -100px;

margin-left

: auto;
margin-right
: auto;

margin

:10px 20px 30px 40px;
margin
: 0 auto;

/*這兩個兄弟元素相鄰垂直外邊距是100px，不是200px*/

.box3

.box4
/*4是3的子元素時，4的外邊距也會給3*/

/*清楚瀏覽器的預設樣式*/

*

CSS盒子模型之邊框，內外邊距詳解

css盒子模型 css盒子模型 由 邊框 border，外邊距 margin 內邊距 padding 和實際內容組成 1 邊框 border border 1px solid black 第乙個引數1px指的是邊框的粗細，第二個引數solid指的是邊框的樣式 實線 第三個引數指的是邊框的顏色 bor...

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

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

盒子模型的邊框 內邊距 外邊距 陰影

1 邊框 1 css的三大重點 盒子模型 浮動 定位 2 盒子模型 內容 邊框 外邊距 內邊距 3 網頁布局本質 拼接盒子的過程 div css 4 邊框 1 邊框屬性 邊框厚度 邊框的顏色 邊框的線條樣式 2 邊框厚度 border top width 上 3 邊框的顏色 border top c...