盒子模型

1、盒子模型

什么是盒子模型:
盒子模型是一个概念，外面一个大的容器，里面装有不同的一个个的小的容器。比如说你买一套化妆品,把里面的水乳霜洗面奶等不同的东西,放在一个包装盒里面
是一种设计思路，按照这样的思路来设计我们的网页
优点:利于后期的维护

2、边框

①四条边框同时设置 border; 边框宽度 边框样式 边框颜色 边框样式:
solid 实线
dashed虛线
double双实线
dotted点状虚线
例子: border:1 px solid red;

3、边框分开设置:

上边框border-top:1px solid red;
下边框 border-bottom:1px solid red;
左边框border-left:1px solid red;
右边框border-right:1px solid red;

代码示例

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 边框 2像素   实线  黑色   */
            border: 2px solid black; 
            /* 边框  5像素   双实线  黑色   */
             border: 5px  double black; 
            /* 边框 10 像素   点状虚线  黑色   */
             border: 10px dotted black; 
            /* 边框 2像素   虚线  黑色   */
            border: 2px dashed black;
            /* 如果只给里一个边框属性，那么则同时生效作用于元素的四个边框 */
            /* 分开设置便边框 */
            border-top: 10px solid black;
            border-bottom: 10px double blue ;
            border-left:  10px dashed rgb(23, 231, 68);
            border-right: 10px dotted yellow; 
        }
    </style>

4、内外边距

1、外边距:
边框以外的距离。 比如两个盒子a左, b右, ab中间10像素的距离，这个10像素就可说是盒子a的右外边距，盒子b的左外边距。
外边距，margin 在样式里面设置margin值 设置4个值的时候，margin: 50px 50px 50px 50px
(此时4个值代表上外边距，右，下，左)，和手表一样,从12点钟方向，顺时针走一圈。 设置2个值的时候，margin: 50px 50px
(此时，第一个值代表上下的外边距为50px,第二个值代表左右的外边距都为50px) 设置1个值的时候，margin:80px(此时，
上下左右的外边距同时为80px) 单独设置一个方向的外边距时候:

1. margin-top: 50px
2. margin-bottom: 50px
3. margin-left: 50px
4. margin-right: 50px

2、内边距:
边框以内的距离。
比如有一个大的盒子a,里面放了一个小的盒子b, b到a中间的距离,可以说是b的外边距，也可以说是a的内边距。
内边距padding,内边距的值的设置方式也有三种，同时设置4个，设置两个，设置一个， 和margin的方式一样,
只用把margin替换成padding就可以了

<style>
        *{
            margin: 0px;
            padding: 0px;
        }
        /* 外边距  不会改变元素本身的大小 */
        /* 盒模型计算公式
           实际展示大小 = 元素大小 + 边框 + 内边距
         */
        .out{
            width: 300px;
            height: 300px;
            background-color: red;
            margin: 100px;
            border: 10px solid black;
            padding: 50px;
            /* padding: 50px 100px; */
            /* padding:50px 60px 70px 80px; */
            /* 怪异模式 增加内边距  并不改变元素的大小 */
            box-sizing: border-box;
        }
    </style>

3、padding 和margin最大的区别
margin不会改变元素的大小，padding会改变显示页面的大小

4、盒模型计算方式
页面实际展示大小=页面元素+ padding + border
右键查看的时候, styles’下面的模型,实线的位置是实际展示在页面的大小

5、初始化css样式
解释:
*{ margin: 0; padding:0; }

6、box-size属性
两种布局模式:

1. 正常模式 即正常显示: 页面实际展示大小=页面元素+padding+ border
   2.怪异模式
   box sizing: border-box 怪异模式
   box sizing: conten-box 正常模式

7、行内元素和行内块元素
页面元素分为:块元素,行内块元素,行内元素
1.块元素
一定是独占一行，可以设置宽高。如ul、ol、li、fom、h1-h6、 hr、p、table、div等
2.行内块元素
不独占-行，可以设置宽高。
如: button、 img、input、 select
3.行内元素
不独占一行，不可以设置宽高。如: span、 a、label、

页面元素之间的标准流转换，可以用display属性进行转换标准流是上面三种元素的统称
display的值:

1. inline 转为行内元素
2. inline- block转为行内块元素
3. block转换成块元素
4. none将该元素隐藏