盒模型概念雹食、width、height期丰、padding群叶、margin(水平居中)、border钝荡、border-radius街立、overflow、box-sizing埠通、box-shadow赎离、outline

CSS盒模型

border,padding,content,margin
content=width*height
border,padding,margin都有top,right,bottom,left

width

width:<length>|<percentage>
with:200px
width:50% 參照物，復(fù)元素

hight

hight:<length>|<percentage>|auto

padding

padding:[<length>|<percentage>]{1,4}
填充
padding:20px;
padding:40px 30px 20px 10px;
上植阴，右蟹瘾，下圾浅，左掠手，順時(shí)針
TRBL
可以單獨(dú)設(shè)置
padding-top:40px;
padding-right:30px;
padding-bottom:20px;
padding-left:10px;
padding的值縮寫：
padding:20px;
padding:20px 10px;==padding:20px 10px 20px 10px;
padding:20px 10px 30px;==padding:20px 10px 30px 10x;
對(duì)面相等，后者省略狸捕；4面相等喷鸽，只設(shè)一個(gè)

margin

margin:[<length>|<percentage>|auto]{1,4}
外邊距，默認(rèn)auto瀏覽器自動(dòng)設(shè)置
margin合并
上一個(gè)元素灸拍，margin-bottom:40px;
下一個(gè)元素做祝，margin-top:20px;
則毗鄰元素取較大的值，間距為40px
父元素鸡岗，margin-bottom:40px;
子元素混槐，margin-bottom:20px;
最終間距為40px
父元素與第一個(gè)，最后一個(gè)子元素合并轩性。
水平居中
margin:0 auto

border

border:[<border-width>||<border-style>||<border-color>]
寬度声登，樣式，顏色
border-width:[<length>]{1,4}
多少個(gè)px，右1-4個(gè)值悯嗓，默認(rèn)值中等邊框
border-style:[solid|dashed|dotted]{1,4}
實(shí)線件舵，虛線，點(diǎn)
border-color:[<color>|transparent]{1,4}
默認(rèn)值元素里面的字體顏色
border:1px dashed blue;
一個(gè)像素寬的虛線的藍(lán)色的邊框
border-width:0 1px 2px 3px
border-style:solid;
border-color:#0ff
只設(shè)置一條邊
border-top:5px solid green;

border-radius

圓角矩形
top-left,top-right,bottom-right,bottom-left
順時(shí)針
border-radius:[<length>|<percentage>]{1,4}[/[<length>|<percentage>]{1,4}]?
前面四個(gè)值表示x方向半徑脯厨，后面四個(gè)值表示y方向半徑
border-radius:10px;
四個(gè)角水平半徑與垂直半徑都為10px的正圓角,一般情況

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

border-radius:50%
表示一個(gè)圓
border-top-left-radius:10px;
可以分別只設(shè)定一個(gè)角铅祸，為10px的正圓角

overflow

overflow:visible|hidden|scroll|auto
可視，隱藏合武，滾動(dòng)临梗，auto
盒子內(nèi)容超出部分如何顯示
overflow:visible;
超出部分顯示，默認(rèn)情況
overflow:hidden;
內(nèi)容超出隱藏
overflow:scroll
滾動(dòng)條眯杏，水平滾動(dòng)條夜焦，垂直滾動(dòng)條。
overflow：auto岂贩；
內(nèi)容沒有超出沒有滾動(dòng)條茫经，超出后自動(dòng)設(shè)置滾動(dòng)條

content-box,border-box,內(nèi)容盒子，邊框盒子

box-sizing

box-sizing:content-box|border-box
用來(lái)設(shè)定width與height指定的區(qū)域
默認(rèn)情況下width,height為content-box,例總寬為width+padding+border

box-shadow盒陰影

box-shdow:none|<shadow>[,<shadow>]*
<shadow>:inset?&&<length>{2,4}&&<color>?
box-shadow:4px 6px 3px 3px red;
4px指的是水平偏移萎津，6px垂直偏移卸伞，3px模糊半徑，往外有1.5px的模糊半徑锉屈，外內(nèi)有1.5px模糊荤傲，3px陰影的大小，red顏色
模糊半徑與模糊大小可以不設(shè)定
box-shadow:3px 3px 5px 2px;
顏色默認(rèn)為文字的顏色,右下有陰影颈渊。外陰影
box-shadow:inset 0px 0px 5px red;
內(nèi)陰影 模糊5px
box-shadow:3px 3px 5px 2px,inset 0px 0px 5px red;
疊加陰影
陰影不占空間遂黍，只是修飾

outline輪廓

outline:[outline-width>||<outline-style>||<outline-color>]
寬度，樣式俊嗽，顏色

• 不占空間
• border外雾家，如果已有border描邊沒有太大必要
  outline-width:<length>
  outline-style:solid|dashed|dotted
  outline-xolor:<color>|invert
  invert跟當(dāng)前顏色相反