HTML初识6

边框（border） 边框用来隔开盒子内部和盒子外部

      设置边框，三个要素，缺一不可   宽度、颜色、样式

        边框的宽度  border-width

          1、可以设置多个值，以空格隔开即可

            4个值   上  右  下  左

            3个值   上  左右   下

            2个值   上下  左右

            1个值    上下左右

          2、单独设置某一边的宽度

          border-top-width: ;  

          border-bottom-width: ;

          border-left-width: ;

          border-right-width: ;

          3、border-width  是由默认值，默认大小在1-3px

        边框的颜色  border-color

          1、可以设置多个值

             规则跟border-width是一样

          2、单独设置某一边的颜色

               border-XXX-color:;

                XXX:top、right、bottom、left

          3、小箭头的写法

          border-color: transparent  transparent orange transparent ;

          4、border-color 有默认值，默认值是黑色

        边框的样式  border-style

           1、边框样式的种类

              solid   实线

              dotted  点状的虚线

              dashed  虚线

              double  双线

          2、可以写多个样式  

          规则跟border-width一样

          3、单独设置某一边样式

            border-XXX-style:;

                XXX:top、right、bottom、left

          4、border-style 默认值是none

外边距  margin

          不影响盒子的大小，可以改变盒子的位置

         margin-top   设置元素上外边距，如果正值,元素向下移动,如果负值，元素向上移动

         margin-right 设置元素右外边距，元素是没有效果

         margin-botoom 设置元素下外边距，正值，元素自己不懂，会挤下面的元素向下移动，负值，下面的元素向上移动

         margin-left  设置元素左外边距，正值，元素向右移动，负值，元素向左移动

       

         margin简写

           margin 可以设置多个值，规则跟padding一样