盒子

/*

边框

（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
边框的大小会影响到整个盒子的大小
要设置边框，需要至少设置三个样式：
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style
*/

         /* 
         border-width: 10px; 
            默认值，一般都是 3个像素
            border-width可以用来指定四个方向的边框的宽度
                值的情况
                    四个值：上 右 下 左
                    三个值：上 左右 下
                    两个值：上下 左右
                    一个值：上下左右
            除了border以外还有四个 border-xxx
                border-top
                border-right
                border-bottom
                border-left
         */
         
         /* 
            border-color用来指定边框的颜色，同样可以分别指定四个边的边框
                规则和border-width一样

            border-color也可以省略不写，如果省略了则自动使用color的颜色值
          */
         
        /* 
            border-style 指定边框的样式
                solid 表示实线\dotted 点状虚线\dashed 虚线\double 双线
				border-style的默认值是none 表示没有边框

         */
          border: 10px  dotted yellow;
          border-right: none;

/*

内边距

（padding）
- 内容区和边框之间的距离是内边距
- 一共有四个方向的内边距：
padding-top
padding-right
padding-bottom
padding-left

                - 内边距的设置会影响到盒子的大小
                - 背景颜色会延伸到内边距上

            一共盒子的可见框的大小，由内容区 内边距 和 边框共同决定，
                所以在计算盒子大小时，需要将这三个区域加到一起计算
         */

/*

外边距（

margin）
- 外边距不会影响盒子可见框的大小
- 但是外边距会影响盒子的位置
- 一共有四个方向的外边距：
margin-top
- 上外边距，设置一个正值，元素会向下移动
margin-right
- 默认情况下设置margin-right不会产生任何效果
margin-bottom
- 下外边距，设置一个正值，其下边的元素会向下移动
margin-left
- 左外边距，设置一个正值，元素会向右移动

                    - margin也可以设置负值，如果是负值则元素会向相反的方向移动

                - 元素在页面中是按照自左向右的顺序排列的，
                    所以默认情况下如果我们设置的左和上外边距则会移动元素自身
                    而设置下和右外边距会移动其他元素
                - margin会影响到盒子实际占用空间
         */             

子元素是在父元素的内容区中排列的，
如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用 overflow 属性来设置父元素如何处理溢出的子元素

                可选值：
                    visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示
                    hidden 溢出内容将会被裁剪不会显示
                    scroll 生成两个滚动条，通过滚动条来查看完整的内容
                    auto 根据需要生成滚动条         
 /* 

box-shadow

用来设置元素的阴影效果，阴影不会影响页面布局
第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动
第三个值 阴影的模糊半径
第四个值 阴影的颜色
*/

 box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ;

/*

outline

用来设置元素的轮廓线，用法和border一模一样
轮廓和边框不同的点，就是轮廓不会影响到可见框的大小 */

 .box1:hover{
        outline: 10px red solid;
    }

/*

border-radius

用来设置圆角 圆角设置的圆的半径大小*/

        /* border-top-left-radius:  */
        /* border-top-right-radius */
        /* border-bottom-left-radius:  */
        /* border-bottom-right-radius:  */
        border-top-left-radius:100px;

        /* 
            border-radius 可以分别指定四个角的圆角
                四个值 左上 右上 右下 左下
                三个值 左上 右上/左下 右下 
                两个个值 左上/右下 右上/左下  
          */

border-radius: 50%; /* 将元素设置为一个圆形 */