第三十四篇（CSS高级操作）

1. 理解盒子模型-布局

1.1 盒子模型的概述

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距的方式。

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

它是抽象于现实生活中的盒子，将网页中的所有元素看做是一个个的盒子，那么在调整网页中的这些元素布局时，就可以通过调整盒子信息来进行。

1.2 盒子的组成

盒子模型的组成：盒子内容 + 盒子的内边距(盒子内容到边框的填充) + 盒子边框 + 盒子外边距

盒子示意图示：

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

2. 掌握盒子模型的使用

2.1 边框 border

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式（border-style）、宽度(border-width)和颜色(border-color)。

• border-style 边框样式

  /*border-style: solid;*/
  /*border-style: dotted;*/
  /*border-style: dashed;*/
  border-style: double;
  

• border-color 边框颜色

  /*border-color: green;*/
  /*border-color: #008000;*/
  border-color: rgb(255,0,0);
  

• border-width 边框粗细

  border-width: 1px;
  

• 上方的样式直接设置多个值可以表示不同的方向

  /* 所有的 */
  /*border-color: red;*/
  /* 上下  左右 */
  /*border-color: red green;*/
  /* 上 左右 下 */
  border-color: red green yellow;
  /* 顺时针：上右下左 */
  /*border-color: red  green  black  pink;*/
  

上方的边框样式，还可以和我们的CSS方向关键词结合，用于对不同方向的边框进行样式设置。

例如：

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style
• …

另外CSS还给提供了统一的边框设置方式：

/* 可以同时设置颜色、粗细、样式 */
border: 1px solid red;

上方的样式设置如果和方向关键词结合，还可以对某个方向的所有边框样式进行设置。

例如：

• border-top：1px solid red;
• border-bottom：xxx;

Border的样式有如下值：

2.2 内边距 padding

padding(填充)：它可以调整边框到元素内容的距离。

padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。

• padding-top

• padding-right

• padding-bottom

• padding-left

• padding：它可以统一设置不同方向的距离

  /*padding: 50px;*/
  /* 上下  左右 */
  /*padding: 50px  20px;*/
  /* 上   左右   下 */
  /*padding: 10px  20px  30px;*/
  /* 上右下左 */
  padding: 10px  20px  30px  40px;
  

2.3 外边距 margin

margin：设置元素的外边距，也就是和其他元素之间的距离

设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

• margin-top

• margin-ritght

• margin-bottom

• margin-left

• margin

• 补充：外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

.merge1{

width:100px;

height:100px;

background:#F3F;

margin-bottom:20px;

}

.merge2{

width:100px;

height:100px;

background:#0CF;

margin-top:30px;

}


<div class="merge1"></div>
<div class="merge2"></div>

第一个div下边距20px，第二个div上边距30px，合并后为30px。

2.4 盒子尺寸 box-sizing

box-sizing：设置盒子模型尺寸计算规则的。

• content-box(默认值)：计算盒子尺寸时，只计算盒子元素内容，不包括内边距和边框。
• border-box：计算盒子尺寸时，不止计算盒子元素内容，还包括内边距和边框。(大小一共就那么大，所以到时候会调整元素内容的空间)

2.5 标准文档流调整- display

默认情况下，在标准文档流中，元素是分为两大类的。

• 块元素：独占一行，拥有完整的盒子模型设置
• 行内/内联元素：如果有多个内联，会排在一行，且盒子模型不完整。它的大小主要由内容撑开。

实际上之所以出现这种效果，就是因为dispaly属性，块元素默认为block，而内联元素默认为inline。

如果想将块元素和内联元素进行转换，可以通过此属性。

display：

• none 隐藏
• block 块元素的默认值
• inline 内联元素的默认值
• inline-block 行内块元素 (但是有不可控的间隙)

2.6 圆形边界 border-radius

边界半径 ，也就是圆角。边界半径由属性border-radius进行控制，这是一个简写属性，像上面提到过的margin、padding等一样，可以有一个、两个、三个或四个值进行设置。同样也可以对盒子的每一个角的半径进行单独设置。

• border-top-left-radius：左上角
• border-top-right-radius：右上角
• border-bottom-left-radius：左下角
• border-bottom-left-radius：右下角

边界半径可以使用 px、em 等长度单位，也可以使用百分数。

border-radius值的个数以及每个值对应控制的位置：

• 一个值：设置四个角有相同的边界半径；
• 两个值：第一个值设置左上角和右下角，第二个值设置右上角和左下角；
• 三个值：第一个值设置左上角，第二个值设置右上角和左下角，第三个值设置右下角；
• 四个值：第一个值设置左上角，第二个值设置右上角，第三个值设置右下角，第四个之设置左下角。

1. border实例1

/*以简写属性的三个值为例*/
border-radius: 10px 20px 30px;
/*下面样式与上面简写属性样式等价*/
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 20px;

开发者还可以设置x半径和y半径的不同，创建椭圆形角。x半径表示水平半径，y半径表示垂直半径。在border-radius属性中，x半径和y半径用“/”分隔，在border-top-left等四个属性中，传入两个值，第一个值表示x半径，第二个值表示y半径。

1. border实例2

/*简写属性的x半径设置两个值，y半径设置三个值*/
border-radius: 30px 20px / 20px 10px 30px;
/*在简写属性中设置角度时，值与盒子角的映射是x和y分开的，按照上面提到的规则进行映射*/
/*x半径两个值，第一个值控制左上角和右下角，第二个值控制右上角和左下角*/
/*y半径三个值，第一个值控制左上角，第二个值控制右上角和左下角，第三个值控制右下角*/
border-top-left-radius: 30px 20px;
border-top-right-radius: 20px 10px;
border-bottom-right-radius: 30px 30px;
border-bottom-left-radius: 20px 10px;

2.7 盒子阴影

在盒子的组成成分之外，CSS3给盒子添加了阴影。盒子的阴影由box-shadow属性控制，阴影的轮廓与盒子边界border的轮廓一样。

该属性的正规语法如下：

none
| [
inset
? && [ 
<offset-x> <offset-y> <blur-radius>
? 
<spread-radius>
? 
<color>
? ] ]#

• inset：默认阴影在边框外。使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。
• ：这是头两个长度值，用来设置阴影偏移量，相对于border外边线开始计算。 设置水平偏移量，如果是负值则阴影位于元素左边。设置垂直偏移量，如果是负值则阴影位于元素上面。如果两者都是0，那么阴影位于元素后面。这时如果设置了 或 则有模糊效果。
• ：这是第三个长度值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
• ：这是第四个长度值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。
• ：如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明。

设置多个阴影时，使用逗号将每个阴影的值隔开。前面的阴影会在后面阴影之上，如果上层有透明度较低的部分，会与下层的颜色重叠，合成新颜色。

border-shadow实例

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* 多个阴影*/
box-shadow: 3px 3px red, -1em 0 0.4em olive, 5px 10px 5px 5px green;

/*全局关键字*/
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

• 补充：关于“||”、“?”等符号的含义

3. 掌握浮动的使用

float：能够实现块元素在一行并列布局展示。

• none 默认值
• left 左浮动
• right 右浮动

4. 掌握解决浮动引起的父级边框塌陷问题

当浮动出现后，会导致：

• 兄弟元素受到浮动影响，导致显示错乱

  • 可以通过clear清除浮动，解除浮动影响。

• 如果都浮动了，父级元素会产生边框塌陷

  • 利用添加空子元素解决

    在父级元素最后添加一个子元素，然后将其清除两侧浮动。

  • 和上方一致的思路(推荐)：因为上方还需要添加一个空子元素 麻烦

    /* 表示在元素最后面设置信息 */
    .father:after{
        /* 给标签添加内容 */
        content: "";
        display: block;
        clear: both;
    }
    

  • 设置父级高度(变通玩法 下三滥玩法)(不推荐)

  • 利用overflow(溢出)特性

    当overflow设置的标签没有设置高度时，会自动跟随溢出元素进行高度适应。

5. 掌握定位的使用 position

position：定位

• static 默认的

• relative 相对的

  设置它，会保留原有的位置，然后通过方向调整可以定位位置，但是它的定位偏移是相对于原来的位置

• absolute 绝对的

  设置它之后，原有位置会消除，但是它默认会保留在原有位置上方，它后面的元素会向上偏移。

  使用方向调整，默认情况下会相对于浏览器边框进行偏移，

  当然如果它的某一级父元素设置过定位，则会相对于父级元素偏移。

  往往它会结合着relative使用

• fixed 固定的

  “狗皮膏药” 固定定位