css盒子详解

QQ图片20170224112843.png

----------------------------------------------------------------------分割线----------------------------------------------

如图，每个块就是这样的结构，有色部分为盒子，最里面的内容就是我们所显示的内容。
border就是边框，padding就是内边距（边框与内容之间的距离），margin就是外边距（块与块之间的距离）
position是在页面或者窗口的固定位置。

----------------------------------------------------------------------分割线----------------------------------------------
边框：border
样式：
border:1px solid red;-------1px是边框的宽度，solid是边框的线的样式（这里是实线，可以是虚线等），red是边框的颜色。这里是border的简写。
具体可以分为：
border-width: 10px;----线宽
border-style: solid[实线]; dashed[虚线] dotter[点线]-----线形
border-color:red;----------线色
除此之外，还可以单独给某个方向设置（left/right/top/bottom）
border-bottom:1px solid red;
border-bottom-width:1px;
还可以设置圆角：
border-radius:5px;-----5px是圆角半径。
假如盒子为正方形，当半径大于等于盒子的边长的一半时，会变成圆形。如果盒子为长方形，半径大于等于最长边的时候，会变成椭圆形。
圆角也可以单独给某个角设圆角：
border-top-left-radius: 5px;------这里要两个方向一起用。

三角形:
width="100" ;
height="100";
border-width: 10px;
border-color:red;
border-style: solid;

----------------------------------------------------------------------分割线----------------------------------------------
内边距：padding
样式：padding:1px 2px 3px 4px;
4个值分别为上右下左。除了这样设置之外，还可以有多种设置方式：
padding:1px;-------4个方向都是1px
padding:1px 3px;------上下是1px，左右是3px
padding:1px 3px 2px;-----上是1px，左右是3px，下是2px

单独设置时：
padding-(left/right/top/bottom):2px;---选一个方向

边外距：margin
格式跟padding一样
margin:1px 2px 3px 4px;