HTML5第五天学习内容(盒模型)

盒模型定义: 在HTML中每一个标签都具有一个盒模型

盒模型的组成部分:    由以下四部分组成

                        1️⃣ content(内容):      由width和height来设置,用于控制元素承载内容的区域

                        2️⃣ padding(内边距):  用于设置边框与内容之间的距离

                        3️⃣ border(边框):        用于设置元素的边框

                        4️⃣ margin( =外边距):  用于设置两个元素之间的距离

组成部分分别属性设置 :

                                1️⃣ padding(内边距):  用于设置边框与内容之间的距离

                                2️⃣ border(边框)样式设置:   

                                                                      1, solid  实线;

                                                                       2, dotted 点线

                                                                       3, dashed 虚线

                                                                        4, double 双实线

margin的bug:

                  解决方案一   :  父元素添加边框, 会影响父元素的盒模型大小不是最优解决方案

                  解决方案二   :  为父元素 设置 overflow: hidden;属性最优解决方案