2022.9.21

css的盒模型

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

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

        1、内容： content

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

                width

                height

        2、border 边框

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

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

            border-width : 设置边框的宽度

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

            border-width: 5px 10px 15px 20px;(四个值； 上、右、下、左    顺时针)

           3、 border-style:设置边框的线型

                取值:

                    solid 实线

                    dashed 虚线

                    double 双实线

                    dotted 点状线

                    none 无边框

                单方向的边框样式

                    border-方向-style：

                        方向： top  上

                              bottom 下

                              left  左

                              right 右

                border-color: 设置边框的颜色

            单方向边框颜色：

                border-方向-color：

        4、内填充(内边框)

             单一方向内填充

                语法： padding-方向：值;

                                top

                                bottom

                                left

                                right

                内填充  padding （内边距）

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

            5、外边距

                 margin

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

                 单一方向设置外边距

                 margin-方向：值；

             6、已知宽度的块级盒实现水平居中

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

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