前端三件套--读书笔记（三）盒子模型和布局

一、盒子模型概述

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)、外边距(margin)。
在盒子结构中，元素内容被包含在边框中，边框也是具有一定宽度的区域，内容与边框之间的区域称为内边距，边框向外伸展的区域称为外边距。因此,一个盒子模型实际占有的空间可以通过总宽度和总高度来描述：
总宽度：左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
总高度：上外边距+上边框+上内边距+内容宽度+下内边距+下边框+下外边距

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 200px; /*盒子模型的宽度*/
            height: 50px;/*盒子模型高度*/
            border: 15px solid red; /*盒子模型的边框*/
            background: #CCC;   /*盒子模型背景颜色*/
            padding: 30px;  /*盒子模型的内边距*/
            margin:20px; /*盒子模型的外边距*/
        }
    </style>
</head>
<body>
    <p class="box">盒子中包含的内容</p>
</body>
</html>

二、盒子模型的属性

1.边框：

盒子模型的边框属性包括边框的样式、宽度、颜色等。除了分别设置属性的方法，还可以通过综合属性来迅速设置边框的外观

常见边框属性：

设置内容	样式属性	常见属性值
边框样式	border-style:上边[右边下边左边];四个方向，空格隔开	none(无、默认)、solid(单实线)、dashed(虚线)、
边框宽度	border-width:上边[右边下边左边];四个方向，空格隔开	像素值
边框颜色	border-color:上边[右边下边左边];四个方向，空格隔开	颜色值、#十六进制、rgb
综合设置边框	border:四边宽度四边样式四边颜色
圆角边框	border-radius:水平半径参数/垂直半径参数	像素值或百分比
图片边框	border-images:图片路径裁切方式/边框宽度/边框扩展距离重复方式

1.边框样式案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h2 {
        border-style: double;
      } /*4条边框相同---双实线*/
      .one {
        border-style: dotted solid;
      } /*上下为点线。左右为单实线*/
      .two {
        border-style: solid dotted dashed;
      } /*上实线、左右点线、下虚线*/
    </style>
  </head>
  <body>
    <h2>边框样式双实线</h2>
    <p class="one">上下为点线。左右为单实线</p>
    <p class="two">上实线、左右点线、下虚线</p>
  </body>
</html>

2.边框宽度案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .one {
        border-width: 3px;
        border-style: solid;
      }
      .two {
        border-width: 3px 1px;
        border-style: solid;
      }
      .three {
        border-width: 3px 1px 2px;
        border-style: solid;
      }
      /*在设置边框宽度时，必须同时设置边框样式 
              p {
        border-style: solid;可以这样综合设置，没必要在每个类中都设置
      }*/
    </style>
  </head>
  <body>
    <p class="one">边框宽度--3px。边框样式----单实线</p>
    <p class="two">边框宽度--上下3px 左右1px。边框样式----单实线</p>
    <p class="three">边框宽度--上3px,左右1px,下2px。边框样式----单实线</p>
  </body>
</html>

3.边框颜色：

除了border-color,还可以用border-top-colors、border-right-colors、border-bottom-colors、border-left-colors设置每个方向

4.综合设置边框：

border:宽度样式颜色;

案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h2 {
        border-top: 3px dashed #f00; /*单侧符合属性设置个边框*/
        border-right: 10px double #900;
        border-bottom: 5px double #ff6600;
        border-left: 10px solid green;
      }
      .bi {
        border: 15px solid #ff6600; /*border符合属性设置各边框相同*/
      }
    </style>
  </head>
  <body>
    <h2>综合设置边框</h2>
    <img class="bi" src="3.jpg" alt="dd" />
  </body>
</html>

5.圆角边框

案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        border: 8px solid #6c9024;
        border-radius: 100px/50px;
      }
    </style>
  </head>
  <body>
    <img src="2.jpg" alt="圆角边框" />
  </body>
</html>

2.内边距：

同border一样，padding也是符合属性。

padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
padding:上内边距[右内边距下内边距左内边距]

案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .border {
        border: 5px solid #f60;
      } /*图像和段落设置边框*/
      img {
        padding: 80px; /*图像四个方向内边距相同*/
        padding-bottom: 0; /*单独设置下内边距*/
      } /*上面两行代码等价于padding:80px 80px0;*/
      p {
        padding: 5%;/*设置为%数值，拖动浏览器窗口时会改变其宽度*/
      } /*段落内边距为父元素宽度的5%*/
    </style>
  </head>
  <body>
    <img class="border" src="1.jpg" alt="嘻嘻" width="70%" />
    <p class="border">段落内边距为父元素宽度的5%</p>
  </body>
</html>

3.外边距：

margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距
margin:上外边距[右外边距、下外边距、左外边距]

案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        width: 300px;
        border: 5px solid red;
        float: left; /*设置图像左浮动*/
        margin-right: 50px; /*设置图像的右外边距*/
        margin-left: 30px; /*设置图像的左外边距*/
        /*上面两行代码等价于margin:0 50px 0 30px*/
      }
      p {
        text-indent: 2em;
      }
    </style>
  </head>
  <body>
    <img src="3.jpg" alt="嘻嘻" />
    <p>
      呵呵，有一天我做了一个梦，梦见了一种很奇怪的电梯。大楼的每一层楼都可以停电梯，而且第
      ii 层楼（1 \le i \le N1≤i≤N）上有一个数字 K_iK i  （0 \le K_i \le N0≤K i
      
      ≤N）。电梯只有四个按钮：开，关，上，下。上下的层数等于当前楼层上的那个数字。当然，如果不能满足要求，相应的按钮就会失灵。例如：
      3, 3, 1, 2, 53,3,1,2,5 代表了 K_iK i  （K_1=3K 1  =3，K_2=3K 2 
      =3，……），从 11 楼开始。在 11 楼，按“上”可以到 44
      楼，按“下”是不起作用的，因为没有 -2−2 楼。那么，从 AA 楼到 BB
      楼至少要按几次按钮呢？ 输入格式 共二行。
      第一行为三个用空格隔开的正整数，表示 N, A, BN,A,B（1 \le N \le
      2001≤N≤200，1 \le A, B \le N1≤A,B≤N）。 第二行为 NN
      个用空格隔开的非负整数，表示 K_iK i  。 输出格式
      一行，即最少按键次数，若无法到达，则输出 -1。 输入输出样例
    </p>
  </body>
</html>

4.box-shadow:

给盒子添加阴影效果，语法：box-shadow:像素值1 像素值2 像素值3 像素值4 颜色值阴影类型;

属性：

参数值	说明
像素值1	表示元素水平阴影位置，可以为负值(必选属性)
像素值2	表示元素垂直阴影位置，可以为负值(必选属性)
像素值3	阴影模糊半径（可选）
像素值4	阴影扩展半径（可选）
颜色值	阴影颜色（可选）
阴影类型	内阴影（inset）/外阴影（默认）（可选）

案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        padding: 20px;
        border-radius: 50%;
        border: 1px solid #ccc;
        width: 600px;
        box-shadow: 5px 5px 10px 2px #999 inset;
      }
    </style>
  </head>
  <body>
    <img src="6.jpg" alt="嘻嘻" class="border" />
  </body>
</html>

5.box-sizing:

用于定义盒子的宽度值和高度值是否包含元素的内边距和边框

语法：box-sizing: content-box / border-box;

content-box：当定义width和height时，它的参数值不包括border和padding'。
border-box:当定义width和heigh时，border和padding的参数值被包含在width和height之内

案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 300px;
        height: 100px;
        padding-right: 10px;
        background: #f90;
        border: 10px solid #ccc;
        box-sizing: content-box;
      }
      .box2 {
        width: 300px;
        height: 100px;
        padding-right: 10px;
        background: #f90;
        border: 10px solid #ccc;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="box1">content_box属性</div>
    <div class="box2">border_box属性</div>
  </body>
</html>

盒子1宽度比width多出30px，总宽度仍为300px。而盒子2中，border和padding参数值是被包含在width和height之内的。

6.背景属性：

背景颜色：

background-color:transparent(默认值，透明背景)

案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: #ccc;
      } /*设置网页背景颜色*/
      h2 {
        font-family: "微软雅黑";
        color: #fff;
        background-color: #fc3;
      }
    </style>
  </head>
  <body>
    <h2>Web技术</h2>
    <p>
      asldkasasdddddddddddddddddddddddddddddddddddddddddddddddljlkjlkdasdasdlasjdlajsdlaunwo
      auoduaaklsdjaoiwjdaoiwjdaoiwdawudoaiwuoabidhfasfhaiweuehfiuweyriuqwyeriuqweroiuqwyriwehrfksdjfhashbfsamdnbfnsdlkafjsalfuoweuroiwqrsdjladjoaiwudoaueowajdadashdmnabdmzxnclasjdaiu
    </p>
  </body>
</html>

背景图像：

background-image

背景与图片不透明度的设置：
- rgba模式：rgba(r,g,b,alpha);
- opacity属性：使任何元素呈现透明效果
  
  opacity:opacityValue;
设置背景图像平铺：background-repeat
- repeat:沿水平和垂直两个方向平铺（默认值）
- no-repeat：不平铺（图像位于元素的左上角，只显示一个）
- repeat-x:只沿水平方向平铺
- repeat-y:只沿垂直方向平铺
设置背景图像的固定:background-attachment
- scroll：图像随页面元素一起滚动（默认值）
- fixed：图像固定在屏幕上，不随页面元素滚动

设置背景图像的大小：background-size:属性值1 属性值2;

属性：

属性值	说明
像素值	设置背景的宽度和高度，第一个值设置宽度，第二个设置高度。如果只设置一个值，则第二个值会默认auto
百分比	以父元素对的百分比来设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会默认auto
cover	把背景图像拓展至足够大，使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景的定位区域中
contain	把图像拓展至最大尺寸，以使其宽度和高度完全适应内容区域

案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 300px;
        height: 300px;
        border: 3px solid #666;
        margin: 0 auto;
        background-color: #fcc;
        background-image: url(3.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100px 200px;
      }
    </style>
  </head>
  <body>
    <div>300px的盒子</div>
  </body>
</html>

背景复合属性：
同边框属性一样：

background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position] [background-size] [background-clip] [background-origin];

案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        border: 5px dashed #b5ffff;
        padding: 25px;
        background: #b5ffff url(3.jpg) no-repeat left bottom padding-box;
      }
    </style>
  </head>
  <body>
    <div>
      阿啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊阿22啊啊啊啊啊啊啊
    </div>
  </body>
</html>

7.综合案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 1800px;
        height: 600px;
        margin: 0 auto;
        border: 5px solid #aaa;
      }
      .one {
        width: 1800px;
        height: 300px;
        background-image: url(1.jpg), url(2.jpg), url(3.jpg);
        background-repeat: no-repeat;
        background-position: left, center, right;
        background-size: 600px;
      }
      .two {
        width: 1800px;
        height: 300px;
        background-image: url(3.jpg), url(4.jpg), url(6.jpg);
        background-repeat: no-repeat;
        background-position: left, center, right;
        background-size: 600px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="one"></div>
      <div class="two"></div>
    </div>
  </body>
</html>

三、div和span标签

1.块元素和行内元素

块元素：每个块元素都独自占据一整行或者多行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
- 例如：h1~h6,p,div,ul,ol,li等
行内元素：行内元素也称内联元素或内嵌元素，特点是不必在新的一行开始,不可以设置宽高对齐，常用语控制页面中文本样式,只能定义左右外边距，定义上下外边距时无效。
- 例如：strong,b,em,i,del,s,ins,u,a,span等

2.span标签

span之间只能包含文本和各种行内标签，常用语定义网页中某些特殊显示的文本。

3.标签的类型和转换

如果希望行内元素具有块元素的某些特性，可以用display属性对元素的类型进行转换

display属性：

inline：将元素显示为行内元素
block：将元素显示为块元素
inline-block:将元素显示为行内块元素，可以对其设置宽高和对齐等元素，但是该元素不会独占一行。
none：此元素将被隐藏，不显示也不占用页面空间，相当于该元素不存在。

案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div,
      span {
        /*同时设置div和span样式*/
        width: 200px;
        height: 50px;
        background: #fcc;
        margin: 10px;
      }
      .d_one,
      .d_two {
        display: inline;
      } /*将前两个div转换为行内元素*/
      .s_one {
        display: inline-block;
      } /*将第一个span转换为行内块元素*/
      .s_three {
        display: block;
      } /*将第三个span转换为块元素*/
    </style>
  </head>
  <body>
    <div class="d_one">第一个div文本</div>
    <div class="d_two">第二个div的文本</div>
    <div class="d_three">第三个div文本</div>
    <span class="s_one">第一个span文本</span>
    <span class="s_two">第二个span文本</span>
    <span class="s_three">第三个span文本</span>
  </body>
</html>

四、盒子外边距的合并

外边距合并形成一个外边距，合并后的外边距高度等于两个发生合并的外边距中高度的较大者

1.垂直合并：

案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        /*去掉所有默认设置*/
        margin: 0;
        padding: 0;
        border: 0;
      }
      #div1 {
        width: 100px;
        height: 100px;
        margin-top: 20px;
        margin-bottom: 20px;
        background-color: #ff0000;
      }
      #div2 {
        width: 100px;
        height: 100px;
        margin-top: 10px;
        background-color: #0000ff;
      }
    </style>
  </head>
  <body>
    <div id="div1"></div>
    <div id="div2"></div>
    <p>两个div之间的外边距是20px，不是30px</p>
  </body>
</html>

2.嵌套合并

当一个元素包含在另一个元素中形成嵌套时，假设没有内边距或者边框把外边距分隔开，他们的上下边距也会发生合并

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        /*去掉所有默认设置*/
        margin: 0;
        padding: 0;
        border: 0;
      }
      #outer {
        width: 300px;
        height: 300px;
        background-color: #ff0000;
        margin-top: 20px;
      }
      #inner {
        width: 100px;
        height: 100px;
        background-color: #0000ff;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="inner"></div>
    </div>
    <p>
      <b>注释：</b
      >如果不设置div的内边距和边框，那么内部div的上外边距将与外部div的上外边距合并
    </p>
  </body>
</html>

五、浮动和定位

1.盒子的定位

position属性定义元素区域的相对空点位置，可以相对于其上级元素或相对于另一个元素或相对于浏览器窗口，基本语法格式：

选择器{position:属性值;}

常用值：

值	描述
static	自动定位
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

边偏移属性：

属性	描述
top	顶端偏移量，定义元素相对于父元素上边线的距离
bottom	底部偏移量，定义元素相对于父元素下边线的距离
left	左侧偏移量，定义元素相对于父元素左边线的距离
right	右侧偏移量，定义元素相对于父元素右边线的距离

静态定位static:

“标准文档流”：对于块元素，默认为自上而下，对于行元素，默认为自左向右排列。在static中无法用偏移属性来改变元素位置。

相对定位relative:

案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0px;
        padding: 0px;
        font-size: 18px;
        font-weight: bold;
      }
      .father {
        margin: 10px auto;
        width: 300px;
        height: 300px;
        padding: 10px;
        background: #ccc;
        border: 1px solid #000;
      }
      .child1,
      .child2,
      .child3 {
        width: 100px;
        height: 50px;
        line-height: 50px;
        background: #ff0;
        border: 1px solid #000;
        margin: 10px 0px;
        text-align: center;
      }
      .child2 {
        position: relative;
        left: 150px;
        top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="child1">child1</div>
    <div class="child2">child2</div>
    <div class="child3">child3</div>
    <p>对child2设置相对定位后，其文档流的位置仍然保留</p>
  </body>
</html>

绝对定位absolute：

脱离了“前后相继”的定位关系，以该元素的上级元素为基准设置偏移量进行定位，在此定位方式下，网页元素的位置相互独立，没有影响，因此元素可以重叠，可以随意移动。

案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0px;
        padding: 0px;
        font-size: 18px;
        font-weight: bold;
      }
      .father {
        margin: 10px auto;
        width: 300px;
        height: 300px;
        padding: 10px;
        background: #ccc;
        border: 1px solid #000;
        position: relative;
      }
      .child1,
      .child2,
      .child3 {
        width: 100px;
        height: 50px;
        line-height: 50px;
        background: #ff0;
        border: 1px solid #000;
        margin: 10px 0px;
        text-align: center;
      }
      .child2 {
        position: absolute;
        left: 150px;
        top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="child1">child1</div>
    <div class="child2">child2</div>
    <div class="child3">child3</div>
    <br />
    <p>无论窗口如何缩放，子元素相对于其直接父元素的位置都将保持不变</p>
  </body>
</html>

固定定位：

也脱离了“前后相继”定位规则，但元素定位以浏览器窗口为基准进行，当拖动浏览器窗口滚动条时，该元素位置始终保持不变。

2.盒子的浮动属性：

所谓元素浮动是指设置了浮动属性的元素会脱离标准文档流控制，移动到其父元素中相应位置的过程，通float来定义浮动

选择器{float:属性值;}

属性值：

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动

clear属性与float属性配合使用，清除各种浮动

选择器{clear:属性值;}

属性值：

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动影响）
both	同时清除两侧浮动的影响

3.浮动关系

案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .father {
        background-color: #ccc;
        border: 1px dashed #999;
      }
      .box1,
      .box2,
      .box3 {
        /*定义box1，box2，box3三个盒子的样式*/
        height: 50px;
        line-height: 50px;
        background: #ff9;
        border: 1px solid #f33;
        margin: 15px;
        padding: 0px 10px;
        float: left;
      }
      p {
        /*定义段落文本样式*/
        background: #fcf;
        border: 1px dashed #f33;
        margin: 15px;
        padding: 0px 10px;
        clear: left;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="box1">box1</div>
      <div class="box2">box2</div>
      <div class="box3">box3</div>
      <p>
        大雁离开北方，是为了大雁春天。我离开你，是为了我们的明天。
        　　2、如今残存下来的究竟是什么？百年离别在高楼，一旦红颜为君尽。生活向前推，我却不断往后退。你所拨打的电话是空号。梦想从来不是被遗忘的。因为那里不是家。
        　　3、青春就像一只容器，装满了不安、躁动、青涩、与偶尔的疯狂。
        　　4、不如就承认一下，我们没有那么坚强，也不想那样刀枪不入，我们只想要一个温暖的拥抱。
        　　5、犯错——年少轻狂未足奇，知错能改真俊杰
      </p>
    </div>
  </body>
</html>

绝对定位的综合案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .welcome {
        width: 502px;
        height: 401px;
        margin: 10px auto;
        background: url(3.jpg);
        position: relative;
      }
      .close {
        width: 16px;
        height: 16px;
        display: block;
        top: 7px;
        right: 8px;
        position: absolute;
      }
      .submit {
        width: 64px;
        height: 24px;
        display: block;
        bottom: 8px;
        right: 8px;
        position: absolute;
      }
      .bf_bg {
        width: 480px;
        height: 330px;
        position: absolute;
        top: 33px;
        left: 10px;
      }
      img {
        width: 60px;
        height: 30px;
      }
    </style>
  </head>
  <body>
    <div class="welcome">
      <span class="close"><img src="5.png" alt="" /></span>
      <span class="submit"><img src="6.jpg" alt="" /></span>
      <span class="bf_bg"><img src="2.jpg" alt="" /></span>
    </div>
  </body>
</html>

盒子浮动综合用于：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        background: #ccc;
        font-size: 12px;
        color: #3e3e3e;
      }
      .box1 {
        width: 530px;
        height: 210px;
        border: 5px solid #003399;
        border-radius: 10px;
        background: #fff;
        margin: 50px auto;
      }
      .tu {
        float: right; /*图像盒子右浮动*/
      }
      .text {
        width: 180px;
        float: left; /*文本盒子左浮动*/
        margin-left: 10px;
        margin-top: 10px;
      }
      p {
        margin-top: 10px;
        line-height: 20px;
      }
      img {
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="tu"><a href="#"></a><img src="1.jpg" alt="" /></div>
      <div class="text">
        <h3><a href="#"></a>智慧校园</h3>
        <p>
          大大滴大呆呆嗲嗲大大滴大呆呆嗲嗲大大滴大呆呆嗲嗲大大滴大呆呆嗲嗲大大滴大呆呆嗲嗲大大滴大呆呆嗲嗲大大滴大呆呆嗲嗲大大滴大呆呆嗲嗲大大滴大呆呆嗲嗲大大滴大呆呆嗲嗲大大滴大呆呆嗲嗲大大滴大呆呆嗲嗲大大滴大呆呆嗲嗲大大滴大呆呆嗲嗲大大滴大呆呆嗲嗲
        </p>
      </div>
    </div>
  </body>
</html>

六、DIV+CSS布局

1.三列布局：

左中右布局案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin-left: 0;
        margin-right: 0;
        font-size: 16px;
      }
      #container {
        height: 500px;
        width: 800px;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
        background-color: #ccc;
        font-size: 18px;
      }
      #banner {
        height: 80px;
        width: 800px;
        background-color: #f9c;
      }
      #left {
        float: left;
        width: 120px;
        height: 340px;
        background-color: #9ff;
      }
      #content {
        float: left;
        height: 340px;
        width: 500px;
        background-color: #ff6;
      }
      #right {
        float: left;
        height: 340px;
        width: 180px;
        background-color: #9ff;
      }
      #footer {
        clear: left;
        height: 80px;
        width: 800px;
        background-color: #f9f;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="banner">#banner<br />width:800<br />height:100</div>
      <div id="left">
        <br /><br /><br /><br /><br />#left<br />width:120<br />height:400<br />
        float:left
      </div>
      <div id="content">
        <br /><br /><br /><br /><br />#content<br />width:500<br />height:400<br />float:left
      </div>
      <div id="right">
        <br /><br /><br /><br /><br />#right<br />width:180<br />height:400<br />float:left
      </div>
      <div id="footer">#footer<br />width:800 height:80<br />clear:left</div>
    </div>
  </body>
</html>

2.两列布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
          margin-left: 0;
          margin-right: 0;
          font-size: 16px;
        }
      #container {
          height: 500px;
          width: 800px;
          margin-right: auto;
          margin-left: auto;
          text-align: center;
          background-color: #ccc;
          font-size: 18px;
        }
        #banner {
          height: 100px;
          width: 800px;
          background-color: #f9c;
        }
        #link{
          float: left;
          height: 400px;
          width: 200px;
          background-color: #9FF;
        }
        #content {
          float: left;
          height: 400px;
          width: 600px;
          background-color: #ff6;
        }
        #footer {
          clear: left;
          height: 80px;
          width: 800px;
          background-color: #f9f;
        }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="banner">
        <br>#banner<br>width:800<br>height:100
      </div>
      <div id="link">
        <br><br><br><br><br>#left<br />width:120<br />height:400<br />
      </div>
      <div id="content">
        <br /><br /><br /><br /><br />#content<br />width:500<br />height:400<br />float:left
      </div>
    <div id="footer">#footer<br />width:800 height:80<br />clear:left</div>
  </div>
    </div>
  </body>
</html>

在页面代码不做任何变化的情况下，只要调整CSS样式，设置#content样式的float属性为left，#link样式的float属性为right，就可以将图上的形式变为左右互换位置。

3.盒子布局综合应用：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-image: url(5.png);
        background-repeat: no-repeat;
        background-size: cover;
      }
      #container {
        height: 1000px;
        width: 1000px;
        margin-right: auto;
        margin-left: auto;
      }
      #header {
        background-color: #14ad7c;
        height: 50px;
      }
      #banner {
        background-image: url(4.png);
        text-align: center;
        padding-top: 120px;
        padding-bottom: 120px;
        font-size: 14px;
      }
      .text {
        height: 500px;
        background-color: #ccc;
        opacity: 0.8; /*透明度*/
      }
      #footer {
        height: 80px;
        background-color: #2bb07e;
        padding-top: 20px;
        text-align: center;
        font-size: 14px;
        clear: left;
      }
      .logo {
        font-weight: bold;
        color: #ffffff;
        letter-spacing: 4px;
        margin: 15px 0px 0px 25px;
        width: 22%;
        float: left;
        font-family: 黑体;
      }
      h2 {
        margin: 0;
        text-align: center;
      }
      .text_column {
        width: 26%;
        height: 400px;
        font-weight: 400;
        line-height: 25px;
        float: left;
        padding: 0px 20px 0px 20px;
        margin: 20px 15px 20px 15px;
        color: #a3a3a3;
        font-family: "幼圆";
        font-style: normal;
        font-size: 14px;
        text-align: justify;
        color: #a94442;
        background-color: rgba(255, 204, 102, 0.5);
        border-radius: 9px;
        border-color: #ebccd1;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="header">
        <h4 class="logo">滴滴答答咚咚哒哒</h4>
      </div>
      <div id="banner">
        <h2>THE DESIGN VIEW</h2>
        <p>asdlkasjdllllllllllllllllllllllllllllllllllasdasdasdasdasdasdasd</p>
      </div>
      <div id="text">
        <div class="text_column">
          　1、我在青春里将你遗失，然后再将你找回，幸好，我还来得及说爱你。
          　　2、此番情劫，我走的甘心。总要走过，才知道不通，总要试过，才能道一句无悔。师父，珺儿不后悔曾经倾心于你，但这份情，天亮之后，珺儿放下了。
          　　3、别离，只是为了走出不属于自己的季节，时光，可以沧桑了容颜，惟一不变的，是对生命的感恩，和对美好生活的向往。
          　　4、好久都没有去找寻关于你的痕迹，往事的种种，似乎也都不复当年的风情，岁月匆匆的流过，染白了记忆里最后一根丝线，从此、只能成为你窗前的那一束风铃，摇响记忆最深处的回音。
        </div>
        <div class="text_column">
          9、人和猫的关系既没有更近，也没有更远，就像《蒂凡尼早餐》里说的，“我们只是相互作伴”。世界之大，谁也不能为谁负责。
          　　10、这是一个高度竞争的社会，没有资格走的人最好不要走，否则要回头这个位置已经被人占去，再也没有空隙，闲时闹意气，一点用处也没有。
          　　11、在我们能够对已经失去的东西予以确认的时候，所确认的不是失去它的日期，而是意识到失去它的日期。
        </div>
        <div class="text_column">
          　14、英雄意味着强大，英雄意味着孤独，最后一幕一定是英雄渐行渐远，我的英雄也是那样的存在。
          　　15、又是一年除夕夜，烟花绚烂满夜空。炮竹声声辞旧岁，合家团圆乐融融。我命为马今是马，天马行空与谁拥？身在异乡不为客，漂泊至今家未通。
          　　16、浓雾、流水。河岸旁荻花瑟瑟。河水在黑暗中默默流动，河上的雾浓如烟。凄凉的河，凄凉的天气。
        </div>
      </div>
      <div id="footer">
        xixiixixixxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
      </div>
    </div>
  </body>
</html>

七、弹性盒子布局

1.弹性容器属性

可以通过flex-direction、flex-wrap、justify-content、align-item等属性，设置项目的排列方式

设置弹性盒子容器

设置容器display属性为flex，则定义了弹性盒子或弹性布局方式。

案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #container {
        width: 80%;
        margin: 0px auto;
        border: solid 1px #000;
      }
      .item {
        width: 200px;
        height: 200px;
        background-color: antiquewhite;
        border: solid 1px #000;
        margin: 10px;
        font-size: 50px;
        text-align: center;
        line-height: 200px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>

2.flex-derection属性

用于指定项目在容器中的排列方向

flex-direction:row|row-reverse|column|column-reverse

属性值含义：

row(默认值)：主轴为水平方向，起点在左端。
row-reverse:主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

3.flex-wrap属性：

定义项目的换行方式：

flex-wrap:nowrap|wrap|wrap-reverse

含义：

nowrap(默认值):不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

4.justify-content属性

定义主轴上项目的对齐方式：

justify-content:flex-start|flex-end|center|space-between|space-around

含义：

flex-start(默认值)：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐。项目之间的间隔都相等，项目与边框之间的距离为0
space-around：每个项目两侧的间隔相等，因此项目之间的间隔总是比项目与边框的间隔大一倍

5.align-items属性

用于定义项目在交叉轴上如何对齐

align-items:flex-start|flex-end|center|baseline|stretch

含义：

flex-start：交叉轴起点对齐
flex-end：交叉轴终点对齐
center：交叉轴中点对齐
baseline：项目第一行文字的基线对齐
stretch(默认值)：如果项目未设置高度或设auto，将占满整个容器的高度

6.弹性容器项目属性：

弹性盒子中的项目可以通过flex-grow和flex-shrink属性控制自身缩放比例，以适应弹性盒子的大小变化，最终适应浏览器窗口的大小的变化。

1.案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #container {
        width: 80%;
        margin: 0px auto;
        display: flex;
        border: solid 1px #000;
      }
      .item1 {
        height: 200px;
        background-color: antiquewhite;
        border: solid 1px #000;
        margin: 10px;
        font-size: 50px;
        text-align: center;
        line-height: 200px;
      }
      .item2 {
        height: 200px;
        background-color: antiquewhite;
        border: solid 1px #000;
        margin: 10px 0px;
        font-size: 50px;
        text-align: center;
        line-height: 200px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item1">3</div>
      <div class="item2">4</div>
      <div class="item1">5</div>
    </div>
  </body>
</html>

2.flex-grow属性：

定义项目的放大比例。

flex-grow:[0]|[1]|[2]

默认值为0，如果存在剩余空间，项目不放大，如果所有项目都为1，则他们等分剩余空间。如果一个项目属性为2，其他项目为1，则前者占据的剩余空间将比其他项多一倍。

3.flex-shrink属性：

定义项目的缩小比例，语法格式如下：

flex-shrink:[0]|[1]

4.弹性盒子综合应用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0px;
        padding: 0px; /*页面基本属性*/
      }
      body {
        font-family: "微软雅黑";
        color: #333333;
        font-size: 13px;
      }
      /*最外层容器标签属性*/
      #container {
        width: 40%;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #999;
      }
      #banner {
        /*图像标签外观*/
        width: 100%;
        height: auto;
      }
      #mainbox {
        width: 100%;
        margin: 0px auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
      }
      .mainbox1 {
        /*容器内项目标签外观*/
        width: 100px;
        margin: 10px;
        padding: 5px;
        border: 1px solid #999;
      }
      #footer {
        /*页脚标签外观*/
        text-align: center;
        background-color: #333333;
        width: 100%;
        height: 80px;
        color: #ffffff;
      }
      img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="banner"><img src="dd.jpg" alt="" /></div>
      <div id="mainbox">
        <div class="mainbox1">
          <img src="1 (1).jpg" alt="" />
        </div>
        <div class="mainbox1">
          <img src="1 (3).jpg" alt="" />
        </div>
        <div class="mainbox1">
          <img src="1 (5).jpg" alt="" />
        </div>
        <div class="mainbox1">
          <img src="1 (7).jpg" alt="" />
        </div>
        <div class="mainbox1">
          <img src="1 (9).jpg" alt="" />
        </div>
        <div class="mainbox1">
          <img src="1 (15).jpg" alt="" />
        </div>
        <div class="mainbox1">
          <img src="1 (16).jpg" alt="" />
        </div>
        <div class="mainbox1">
          <img src="1 (87).jpg" alt="" />
        </div>
      </div>
      <div id="footer">
        <br />
        国家给出了 8 岁男宝宝的标准身高为 130 厘米、标准体重为 27 公斤；8
        岁女宝宝的标准身高为 129 厘米、标准体重为 25 公斤。
        现在你要根据小宝宝的身高体重，给出补充营养的建议。
      </div>
    </div>
  </body>
</html>