第八章运用盒子模型布局网页

1. 目录

   认识盒子模型

   盒子模型的概念

   盒子模型的层次与宽高

   盒子模型的常用属性

   边框属性

   边距属性

   CSS3新增属性

   元素的浮动与定位

   元素的类型与转换

   浮动属性

   清除浮动属性

   元素的定位

   溢出属性

   ---

   认识盒子模型

盒子模型的概念

盒子模型是CSS中的一种概念，用来描述HTML元素的布局和尺寸。每个HTML元素都可以看做一个矩形盒子，由四个部分构成：内容区域、内边距区域、边框区域和外边距区域。通过盒子模型，我们可以更准确地控制HTML元素的位置、大小以及样式。网页布局就是多个盒子的嵌套排列，通过会使用<div>标签来作为容器进行布局

盒子模型的层次与宽高

1. 盒子结构的纵深顺序为自上而下，由外边距、背景颜色、背景图像、内边距、内容到边框依次排序

盒子模型的常用属性

边框border属性

1. 边框宽度border-width：设置边框宽度，可取像素、百分比等值

2. 边框样式border-style：设置边框样式，可选值有：solid（实线）、dashed（虚线）、dotted（点线）、double（双实线）等
3. 边框颜色border-color：设置边框颜色，可取颜色名、rgb值、十六进制值等
4. 边框综合属性border-top、border-right、border-bottom、border-left：分别设置元素上、右、下、左四个方向的边框样式、宽度、颜色

边距属性

1. 内边距（padding）

   1. padding: padding-top padding-right padding-bottom padding-left;
       
      

      其中，padding-top代表元素内边界和元素顶部之间的距离，padding-right代表元素内边界和元素右侧之间的距离，padding-bottom代表元素内边界和元素底部之间的距离，padding-left代表元素内边界和元素左侧之间的距离。这四个值可以分别设置为像素、百分比、em等单位。

      ​
2. 外边距（margin）

   1. margin: margin-top margin-right margin-bottom margin-left;
       
      

      其中，margin-top代表元素与上方元素之间的距离，margin-right代表元素与右侧元素之间的距离，margin-bottom代表元素与下方元素之间的距离，margin-left代表元素与左侧元素之间的距离。这四个值可以分别设置为像素、百分比、em等单位。