CSS基础 盒子相关属性总结 padding+border

1.border
当个属性：

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	solid实线、dashed虚线、dotted点线
边框颜色	border-color	颜色设置

连写格式：1.border：20px solid green；    /*增加宽度为20px的四周边框颜色为绿色的实线 */
        2.border-top：10px solid blue；      /* 增加10px的上边框颜色为蓝色的实线*/
        3.border-bottom：5px dashed  pink;   /* 增加5px的下边框颜色为粉色的虚线*/
注意：border会撑大盒子实际的大小，解决办法如下： 
                                   1、 需要手动减去width和height
                                   2.box-sizing：border-box； /*浏览器将会自动内减,padding和border占的越大，内容越小*/

2.需求内容和盒子边框空出一些距离，又叫内边距
利用padding设置内边距的，也就是盒子与边框的距离，语句如下：

padding多方向设置：
（1）padding：10px；   /*直接写在css样式表内 ,效果四周将各增加10px的宽度*/

（2）padding：10px  20px；

(3)padding:10px 20px 30px ; /*浏览器，将上下为一组，左右为一组；顺时针设置padding的值，如果没有给自己设置值、则使用组内的数值*/

(4)padding:10px 20px 30px 40px;  、

（5）也可以只设置左右的padding，代码：

padding：0 20px；

padding单方向设置

属性	属性值以及说明
padding-top	上padding，数字+px
padding-right	右padding，数字+px
padding-bottom	下padding，数字+px
padding-left	左padding，数字+px

注意：padding也会撑大盒子的大小

盒子的实际大小的计算公式
     border+padding+content=盒子的实际大小
解决办法：计算出去border和padding宽高，并可手动设置宽、高；

小实战导航代码优化

原代码是a的宽度啊是固定死的，如果导航描述文字大于设置的宽度，样式则会乱掉，该如何做那？
答案：不是设置width的宽度，是有内容撑开；内容和边框相互之间的距离增加利用padding的距离；或者直接用margin来增加盒子与盒子之间的距离