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

 盒子模型（后续有怪异盒模型，学到了笔记填充到这里）

• 盒子模型：一个盒子中主要的属性有5个。width与height、padding、border、margin。

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

• 盒子模型分类：盒子模型标准有两种为标准盒模型和IE盒模型（怪异盒模型）。建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
  

1. 标准盒子模型：width和height指的是内容区域的宽度和高度。增加内边距padding、边框border和外边距margin不会影响内容区域的尺寸，但是会增加盒子的总尺寸。
2. IE盒子模型：width和height指的是内容区域+border+padding的宽度和高度。也就是怪异盒模型。增加外边距margin不会影响内容区域的尺寸，但是会增加盒子的总尺寸。增加内边距padding和边框border会影响内容区域的大小。

• 四方向写法：在CSS中，凡是涉及到能够给四个方位设置值的属性，都遵循上右下左的顺序。

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

• border：边框。边框有三个常用属性：width粗细、style线型（solid实线、dashed虚线、dotted点线）、color颜色。

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;
}

• 相邻边框合并：【TODO 尚未测试成功】

border-collapse: collapse;

• padding：内边距，影响盒子总大小。（如果盒子没有指定width和height，则不会撑大宽度）

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

 

• margin：外边距，控制盒子与盒子之间的间距。使用方式与padding一致。
• 设置水平居中：

1. 块级元素：margin: 0 auto;
2. 行内元素或行内块级元素：父元素的text-align: center;（把行内元素和行内块元素当做文本使用）。

• 设置垂直居中：

1. 块级元素：
2. 行内元素或行内块级元素：

• 垂直外边距合并问题：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。一种情况时同级元素上下相邻，一种情况是父子元素上下相邻。

1. 父容器设置边界（border或者padding设置1px）
2. 父容器overflow: hidden;（或auto）
3. 父容器或子容器：float: left;（不能是auto）
4. 父容器或子容器：position: absolute;
5. 子容器：display: inline-block;(或是inline-table)
6. 相邻元素：任意一个添加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);
}

 

浮动

• CSS默认三种布局方式：标准流（按照规定好的方式进行排列）、浮动、定位。
• 浮动：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;
} */

 

• 清除浮动：清除浮动原因是父类因为子类浮动而丧失了高度，导致塌陷。为了避免此类事情发生，大致有几种方式

1. 对父级设置适合的高度。
2. clear:both;属性
3. 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; /* 添加垂直滚动栏 */
}

• 显示与隐藏

1. display属性规定是否/如何显示元素。
2. none：隐藏元素
3. block：显示元素
4. inline：

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