盒模型概念、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% 参照物，复元素

hight

hight:<length>|<percentage>|auto

padding

padding:[<length>|<percentage>]{1,4}
填充
padding:20px;
padding:40px 30px 20px 10px;
上，右，下，左，顺时针
TRBL
可以单独设置
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;
对面相等，后者省略；4面相等，只设一个

margin

margin:[<length>|<percentage>|auto]{1,4}
外边距，默认auto浏览器自动设置
margin合并
上一个元素，margin-bottom:40px;
下一个元素，margin-top:20px;
则毗邻元素取较大的值，间距为40px
父元素，margin-bottom:40px;
子元素，margin-bottom:20px;
最终间距为40px
父元素与第一个，最后一个子元素合并。
水平居中
margin:0 auto

border

border:[<border-width>||<border-style>||<border-color>]
宽度，样式，颜色
border-width:[<length>]{1,4}
多少个px，右1-4个值，默认值中等边框
border-style:[solid|dashed|dotted]{1,4}
实线，虚线，点
border-color:[<color>|transparent]{1,4}
默认值元素里面的字体颜色
border:1px dashed blue;
一个像素宽的虚线的蓝色的边框
border-width:0 1px 2px 3px
border-style:solid;
border-color:#0ff
只设置一条边
border-top:5px solid green;

border-radius

圆角矩形
top-left,top-right,bottom-right,bottom-left
顺时针
border-radius:[<length>|<percentage>]{1,4}[/[<length>|<percentage>]{1,4}]?
前面四个值表示x方向半径，后面四个值表示y方向半径
border-radius:10px;
四个角水平半径与垂直半径都为10px的正圆角,一般情况

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

border-radius:50%
表示一个圆
border-top-left-radius:10px;
可以分别只设定一个角，为10px的正圆角

overflow

overflow:visible|hidden|scroll|auto
可视，隐藏，滚动，auto
盒子内容超出部分如何显示
overflow:visible;
超出部分显示，默认情况
overflow:hidden;
内容超出隐藏
overflow:scroll
滚动条，水平滚动条，垂直滚动条。
overflow：auto；
内容没有超出没有滚动条，超出后自动设置滚动条

content-box,border-box,内容盒子，边框盒子

box-sizing

box-sizing:content-box|border-box
用来设定width与height指定的区域
默认情况下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的模糊半径，外内有1.5px模糊，3px阴影的大小，red颜色
模糊半径与模糊大小可以不设定
box-shadow:3px 3px 5px 2px;
颜色默认为文字的颜色,右下有阴影。外阴影
box-shadow:inset 0px 0px 5px red;
内阴影 模糊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跟当前颜色相反