CSS（2）盒子模型、定位浮动

盒子模型

• • 盒子模型：一个盒子中主要的属性就5个。width与height、padding、border、margin。盒子模型标准有两种为标准盒模型和IE盒模型。学习上以标准盒子模型为主

1. 1. width和height  ：内容的宽度、高度（不是盒子的宽度、高度）。
   2. padding           ：盒子内边距。
   3. border 　　     ：盒子边框。
   4. margin             ：盒子外边距。

• • 标准盒子模型：width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
  • IE盒子模型：width和height指的是内容区域+border+padding的宽度和高度。
  • 四方向写法：

/* 方式一：分开写法 */
div {
    padding-top: 30px;
    padding-right: 20px;
    padding-bottom: 40px;
    padding-left: 100px;
}
/* 方式二：综合写法
    四个值顺序为：上、右、下、左。
    三个值顺序为：上、右、下。（左和右一样）
    两个值顺序为：上下同值、左右同值。
    一个值顺序为：四方向同值。
*/
div {
    padding: 50px 60px 80px 90px;
}

• • border：边框。边框有三个要素：像素（粗细）、线型、颜色。

div {
    /* 方式一：合并写。颜色（黑色）、粗细（1px）、线型（直线） */
    border: black 1px solid;
}
div {
    /* 方式二：三要素拆分（遵循四方向原则） */
    border-width: 1px 2px;
    border-style: dashed;
    border-color: red green blue yellow;
}
div {
    /* 方式三：方向拆分 */
    border-top: 10px solid red;
    border-right: 10px solid red;
    border-bottom: 10px solid red;
    border-left: 10px solid red;
}

• • margin：外边距，控制盒子与盒子之间的间距。使用方式与padding一致。
  • 设置水平居中：
    • 块级元素：margin: 0 auto;
    • 行内元素或行内块级元素：父元素的text-align: center;（把行内元素和行内块元素当做文本使用）
  • 垂直外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。一种情况时同级元素上下相邻，一种情况是父子元素上下相邻。
  • 垂直外边距合并解决方案：
    • 父容器设置边界（border或者padding设置1px）
    • 父容器overflow: hidden;（或auto）
    • 父容器或子容器：float: left;（不能是auto）
    • 父容器或子容器：position: absolute;
    • 子容器：display: inline-block;(或是inline-table)
    • 相邻元素：任意一个添加float: left;（不能是auto）
  • ：圆角边框、盒子阴影、文字阴影
  • CSS新增样式（一）圆角边框border-radius属性：原理是设置的长度为半径画四个圆产生的弧度。当盒子为正方形并且圆角属性设置为50%边长则可画出个圆。

.father {
    height: 200px;
    width: 200px;
    background-color: black;
    /* 设置圆角：半径=50%边长为画圆。也可以四个角分别赋值和拆开赋值。支持px，百分比，em */
    border-radius: 50%;
}

• • CSS新增样式（二）盒子阴影box-shadow属性：盒子阴影不占空间，属性值较多，在注释上标明

.father {
    /*
    offset-x：阴影的水平偏移量。正数向右偏移，负数向左偏移。
    offset-y：阴影的垂直偏移量。正数向下偏移，负数向上偏移。
    blur：阴影模糊度，不能取负数。
    spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。
    inset：inset表示添加内阴影，默认不填为外阴影。
    */
    box-shadow: -20px 10px 50px rgb(0, 0, 0, .3);
}

• • CSS新增样式（三）文字阴影text-shadow属性：文字阴影不占空间，属性值较多，在注释上标明

.father {
    /*
    h-shadow    必需。水平阴影的位置。允许负值。
    v-shadow    必需。垂直阴影的位置。允许负值。
    blur    可选。模糊的距离。
    color    可选。阴影的颜色。
    */
    text-shadow: 3px 4px 5px rgb(0, 0, 0, .3);
}

浮动

• 标准流：按照规定好的方式进行排列。
• 浮动：float属性设置left、right。

.father {
    height: 500px;
    width: 500px;
    background-color: white;
    border: 1px solid black;
    margin: 100px;
}

/* .a {
    float: left;
} */

.b {
    float: right;
}

/* .c {
    background-color: red;
} */

/* .c {
    float: right;
} */

• 清除浮动：overflow:hidden。清除浮动原因是父类因为子类浮动而丧失了高度，导致塌陷。

定位

• position：absolute、relative、static(默认)、fixed
• 静态定位：static。
• 相对定位：relative。
• 绝对定位：absolute。定位以最低一级有定位的元素进行绝对定位偏移，如果都没没有，则最后以浏览器进行绝对定位偏移。脱离标准流。

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

• 固定定位：fixed。以浏览器可视窗口而定位。即使滚动页面，它也始终位于同一位置。脱离标准流。

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

• 粘性定位：sticky。先会（相对定位），直到在可视窗口中遇到给定的偏移位置为止，然后将其“粘贴”在适当的位置（固定定位）

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}

• 子绝父相：子绝父相的意思是在父类的position属性是relative的情况下，子类的position属性又是absolute的情况下，那么我们的子类这时其实不是在body中absolute而是在其父类的范围中absolute，最好给父类设置边界。
• 重叠次序：在对元素进行定位时，它们可能与其他元素重叠。z-index属性用于指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;/* 表示在最下面 */
}

溢出

• 溢出：overflow属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。仅适用于具有指定高度的块元素。

1. visible：默认。溢出没有被剪裁。内容在元素框外渲染。
2. hidden：溢出被剪裁，其余内容将不可见。
3. scroll：溢出被剪裁，同时添加滚动条以查看其余内容。
4. auto：与scroll类似，但仅在必要时添加滚动条。

• overflow-x、overflow-y：属性规定是仅水平还是垂直地（或同时）更改内容的溢出。

div {
  overflow-x: hidden; /* 隐藏水平滚动栏 */
  overflow-y: scroll; /* 添加垂直滚动栏 */
}

显示与隐藏

display属性规定是否/如何显示元素。

none：隐藏元素

block：显示元素

inline：

• 精灵图：图像精灵就是单个图像中包含的图像集合，包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求。使用图像精灵将减少服务器请求的数量并节约带宽。