CSS盒模型

CSS盒模型屬性

每一個盒子都有：邊距,邊框,填充,內容四個屬性，除內容外每一個屬性都有上,下,左,右四個部分。

CSS盒模型

CSS盒模型對應的有：margin,border,padding,content四個部分，其中margin,border,padding都有top,right,bottom,left四個屬性；

width

width

width:<length>|<percentage>|auto|inherit

/*塊元素能夠設置寬度，行內元素不能設置寬度*/
width:200px;
width:50%;

height

height

height:<length>|<percentage>|auto|inherit

/*塊元素能夠設置高度，行內元素不能設置高度*/
height:100px;
height:60%;

padding

padding

padding:[<length>|<percentage>]{1,4}|inherit

/* padding:top right bottom left; 對面相等，後面省略*/
padding:20px;/* 等價於：padding:20px 20px 20px 20px; */
padding:20px 10px;/* 等價於：padding:20px 10px 20px 10px; */
padding:20px 10px 30px;/* 等價於：padding:20px 10px 30px 10px */

margin

margin

margin:[<length>|<percentage>|auto]{1,4}|inherit

margin:20px;/* 等價於：margin:20px 20px 20px 20px; */
margin:30px 20px 10px 0;

margin合併：當兩個margin遇到一塊兒的時候，取較大的margin值；

水平居中： margin:0 auto;

border

border

border:[<border-width>||<border-style>||<border-color>]|inherit
border-width:[<length>|thin|medium|thick]{1,4}|inherit
border-style:[solid|dashed|dotted|...]{1,4}|inherit
border-color:[<color>|transparent]{1,4}|inherit

border:1px dashed blue;

border-width:0 1px 2px 3px;
border-style:solid;
border-color:#0ff;

圓角邊框

border-radius

border-radius:[<length>|<percentage>]{1,4}[/[<length>|<percentage>]{1,4}]?

border-radius:10px;
border-radius:0px 5px 10px 15px/20px 15px 10px 5px;

溢出overflow

overflow

overflow:visible|hidden|scroll|auto

overflow:hidden;
/*引伸：overflow-x,overflow-y*/

box-sizing

box-sizing

box-sizing:content-box|border-box|inherit

width:150px;
height:150px;
padding:50px;
border:5px solid blue;
box-sizing:content-box;/*設置了width和height做用的位置*/

盒子陰影

box-shadow

box-shadow:none|<shadow>[,<shadow>]*
<shadow>:inset?&&<length>{2,4}&&<color>?

box-shadow:4px 6px 3px 3px red;/*box-shadow：水平偏移 垂直偏移 模糊半徑 陰影大小 顏色*/

/*陰影不佔空間*/

box-shadow:3px 3px 5px 2px;/*外陰影，默認顏色爲border顏色*/
box-shadow:inset 0px 0px 5px red;/*內陰影，這個裏面沒有陰影大小值*/
box-shadow:3px 3px 5px 2px,inset 0px 0px 5px red;/*多陰影*/

輪廓

outline

outline:[<outline-width>||<outline-style>||<outline-color>]|inherit
outline-width:<length>|thin|medium|thick|inherit
outline-style:solid|dashed|dotted|...|inherit
outline-color:<color>|invert|inherit

outline:5px dashed blue;/*outline不佔空間，在border以外*/