Day32、盒子模型，浮动和定位

1、盒子模型

        1.1、什么是盒子模型

                所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

        1.2、盒子组成：

                1）Border(边框) - 围绕在内边距和内容外的边框。

                2）Margin(外边距) - 清除边框外的区域，外边距是透明的。

                3）Padding(内边距) - 清除内容周围的区域，内边距是透明的。

                4）Content(内容) - 盒子的内容，显示文本和图像

        1.3、Border(边框) 

                1.3.1、边框

 

                 1.3.2、边框粗细：border-width

                        1）thin

                        2）medium

                        3）thick

                        4）像素值

border-top-width:5px; 
border-right-width:10px; 
border-bottom-width:8px; 
border-left-width:22px; 
border-width:5px ; 
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;

 

                1.3.3、边框样式：border-style

                        1）none

                        2）hidden

                        3）dotted

                        4）dashed

                        5）solid

                        6）double

border-top-style:solid; 
border-right-style:solid; 
border-bottom-style:solid; 
border-left-style:solid; 
border-style:solid ; 
border-style:solid dotted;
border-style:solid dotted dashed;
border-style:solid dotted dashed double;