CSS3-盒子模型

　　　　　　1、表格的细线边框

　　　　　　　　border-collapse：collapse；  // 边框合并在一起

　　　　　　　　圆角边框（border-radius）

　　　　　　　　border-radius：左上角  右上角  右下角  左下角；

　　　　　　　　 //  取宽高的值一半就是圆形

　　　　　　　　　width：200px；

　　　　　　　　　height：100px；

　　　　　　　　　border：1px  solid  red；

　　　　　　　　　border-radius：100px；   // 可以写数值100px  也可以写  50%

　　　　　　2、CSS3盒模型（box-sizing）

　　　　　　　　CSS3中可以通过box-sizing来指定盒模型，即可指定为为content-box，border-box，计算盒子大小分为两种情况：

　　　　　　　　　　box-sizing：content-box；盒子大小：width+padding+border； content-box为默认值

　　　　　　　　　　box-sizing：border-box；盒子大小：width  就说 padding 和 border 包含在 width 里面了

　　　　　　　　盒子阴影（box-shadow）

　　　　　　　　　　box-shadow：水平位置  垂直位置  模糊距离  阴影大小   内外阴影；

　　　　　　　　　　例如：p{ box-shadow: 5px  5px  3px  4px  rgba(0，0，0，.4)  inset； } 

　　　　　　　　　　　　　默认外阴影 outset( 但是不能写 ) ，内阴影 inset

　　　　　　3、防止拖拽文本域（resize）常用于：text

　　　　　　　  图片、表单和文字垂直对齐（vertical-align）

　　　　　　　  去除图片底侧空白缝隙：图片或者表单等行内块元素，底线会和父级盒子的基线对齐，这会造成图片底侧会有一个空白缝隙。

　　　　　　　　解决方式：

　　　　　　　　　　　　1.添加垂直对齐方式：vertical-align：top / middle；让图片不要和基线对齐

　　　　　　　　　　　　2.行内块元素，转换为块元素：display：block；

　　　　　　　

转载于:https://www.cnblogs.com/qtbb/p/11393951.html