2022.09.21

今天是自学html的第五天！给大家带来今天的分享!

(1)css的盒模型：

        1.本质上就是一个盒子，封装html元素，它包括：边距（margin）、边框（border）、填充（padding）、实际内容（width+hreight）。

        所有的html标签都可以看做盒子，  网页布局的本质就是利用css摆盒子

        2、内容： content

            css通过width和height属性来规定元素content内容区的大小。

                width

                height

        2、border 边框

简写：

            border:边框的宽度  边框的线型  边框的颜色;

            border-方向：边框的宽度  边框的线型  边框的颜色；

                 border-width : 设置边框的宽度

                作用：设置所有边框的宽度        

                border-style:设置边框的线型

           取值:

                    solid 实线

                    dashed 虚线

                    double 双实线

                    dotted 点状线

                    none 无边框

单方向的边框样式

                    border-方向-style：

                        方向： top  上

                              bottom 下

                              left  左

                              right 右

做个三角形：

                    1、宽高设为 0

                    2、相邻边框的颜色设为透明色

                    3、取消掉对立边的边框

3.

         内填充  padding （内边距）

        定义元素边框与元素内容之间的距离

4

外边距 margin

                作用：设置盒子和盒子之间的距离        

5.

 单一方向设置外边距

                margin-方向：值；

6.

 盒子的实际宽度 = width + padding-left + padding-right + border-left +border-right

        盒子的实际高度 = height + padding-top + padding-bottom + border-top + border-bottom

pink老师说这些对于我们前端程序员来说是很重要很常用的知识点，所以大家多看多学，把必备的知识夯实好！

今天的分享就到这啦！谢谢