CSS盒子的运用

内联元素的盒子

从这几点分析：
一、内容区 :
        行内元素盒子模型不可以设置内容区的大小,它的内容区的大小都是被内容撑开
二、内边距 ：
        行内元素盒子模型可以设置内边距，而且垂直方向的内边距不会影响其他的元素的位置
三、边框 :
        行内元素盒子模型可以设置边框，而且垂直方向的边框也不会影响其他的元素的位置
四、外边距：
        水平方向的外边距可以设置成功的，而且水平方向的外边距不会重叠， 垂直方向的外边距不可以设置。

<style type="text/css">
.s1{
         background-color: pink;
         /* width: 100px;
         height: 100px; */
         /* padding: 20px; */
         /* border: 20px solid blue; */
         /* margin-left: 50px; */
         /* margin-right: 50px; */
         /* margin-top: 50px; */
         margin-bottom: 50px;
       }
       p{
         background-color: red;
       }
       div{
         width: 100px;
         height: 100px;
         background-color: green;
         /* padding: 20px; */
         /* border: 10px solid orange; */
       }
       .box1{
         background-color: grey;
       }
       .s2{
         margin-left: 50px;
       }
    </style>

默认样式

引入重制样式表
        注意：
                 1、引入重制样式表前提是你要有这个reset.css文件
                 2、引入重制样式表必须要在你写的样式前，否则会重置你写的样式。
默认样式：
        浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。

清除默认样式的方法

方式一：手动去除，这种方式一般情况只适用一些小的案例，小的项目
1、清除浏览器的默认样式

<style>
*{
        margin:0;
        padding:0;

      }
      li{
        list-style:none;
      }
       a{
      text-decoration: none;
    }
    </style>

方式二：
2、引入重置样式表
        这个表就是网上的大神列举出来的所有的标签的默认样式，reset.css,normal.css，我们使用的时候，只需要引入到对应的html文件内就可以。

	<link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./index.css">

盒子的大小

默认情况下：
        盒子可见宽的大小由内容区，内边距，边框共同决定
设置width，height特指内容区的宽高
        box-sizing 用来设置盒子尺寸的计算方式 用来规定width，height指的谁
可选值：
        content-box width，height指的是内容区宽高，默认值
        border-box width，height指的就是内容区，内边距，边框加起来的大小

<style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        border: 10px solid green;
        padding: 10px;
        box-sizing: border-box;
      }
      
    </style>

阴影和圆角

box-shadow
        用来设置元素的阴影效果，不会影响到页面布局
        第一个值：水平偏移量 正->右 负->左 必写
        第二个值：垂直偏移量 正->下 负->上 必写
        第三个值：模糊半径 选写，默认值是0
        第四个值：颜色 选写，默认值是黑色
1、border-radius 用来设置圆角
        可以同时设置多个值，规则跟我们之前归纳的border-width一样
2、单独设置某一角的圆角
         border-top-left-radius:;
        border-top-right-radius:;
        border-bottom-left-radius:;
        border-bottom-right-radius:;
3、设置圆形
        border-radius: 50%;

<style>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #f60;
        margin: 0 auto;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    
      }
      .box2 {
        width: 300px;
        height: 300px;
        background-color: #bfa;
        border-radius: 10px 40px;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        
      }
    </style>