CSS盒模型篇

1. 盒模型概述

1. box:盒子，每个元素在页面中都会生成一个矩形区域（盒子）
2. 盒子类型：块盒（block）、行盒（inline）、行块盒（inline-block）
3. 隐藏盒子：display：none
4. 块转行内：display:inline
5. 行内转块：display:block
6. 块、行内元素转换为行内块： display: inline-block

2. 块盒（块级元素）

1. 块盒：display：bolck

2. 每个块元素通常都会独自占据一整行或多整行

3. 可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建

4. 总是从新行开始

5. 高度，行高、外边距以及内边距都可以控制。

6. 宽度默认是容器的100%

7. 可以容纳内联元素和其他块元素。

   序号	常见的块元素（标签）	描述
   1	h1~h6	标题元素
   2	p	段落元素
   3	div	容器（无语义）
   4	ul	无序列表
   5	ol	有序列表
   6	li	列表子元素

3. 行盒（行内元素）

1. 行盒：display：inline

2. 行内元素（内联元素）不独占一行

3. 行盒的宽高：设置宽高无效，调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整

4. 行盒的内边距：水平方向的padding和margin可以设置，垂直方向仅会影响背景，不会实际占据空间

5. 行盒的边框：水平方向有效，垂直方向不会实际占据空间

6. 行盒的外边距：水平方向有效，垂直方向不会实际占据空间

7. 默认的宽度就是它本身内容的宽度

8. 行内元素只能容纳文本或其它行内元素。（a特殊,可以放行块盒如img）

   序号	常见的块元素（标签）	描述
   1	a	超链接
   2	span	容器（无语义）
   3	b	定义粗体的文本
   4	u	定义带下划线的文本
   5	ins	定义已经被插入文档中的文本
   6	s	定义加删除线文本
   7	em	用来呈现为被强调的文本
   8	strong	和 em 标签一样，用于强调文本，但它强调的程度更强一些
   9	i	显示斜体文本效果
   10	del	定义文档中已被删除的文本

3.1 多个行盒垂直方向上的对齐

1. 设置属性：vertical-align:
2. 值：可以是像素值
3. 预设值：middle 中线对齐
4. 比如多选框和文字对不齐，可以使用这个元素就行调节

4. 行块盒（行内块元素）

1. 行块盒：display：inline-block

2. 行块盒不独占一行

3. 盒模型中所有尺寸都有效

4. 简而言之除了不独占一行外，其它的跟块盒一样

5. 和相邻行内元素、行内块元素，可以在一行上,但是之间会有空白缝隙

6. 默认宽度就是它本身内容的宽度

   序号	常见的块元素（标签）	描述
   1	img	图片元素
   2	input	表单元素
   3	textarea	文本域

5. 盒子的组成部分

5.1 盒子的组成

1. 无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：内容区、填充区、边框、外边距

5.2 内容区（content）

1. width、height,设置的是盒子内容的宽、高。
2. 内容部分通常叫做整个盒子的“内容盒（content-box）

5.3 填充区（padding–内边距）

1. 填充区是盒子边框到盒子内容的距离，也称为内边距
2. 内边距的的四个属性padding-left、padding-right、padding-top、padding-bottom
3. 填充区 + 内容区 = “填充盒（padding-box）

5.4 边框（border）

1. 边框样式：border-style
2. 一般默认上、下、左、右四边边框；也可以单独设置一边边框如：border-top（上边框）
3. 边框宽度：border-width：取值也可以按照上、右、下、左方式写
4. 边框颜色：border-color
5. 边框 + 填充区 + 内容区 = “边框盒（border-box）
6. 空边框border：none 实线边框solid 虚线边框dashed 点线边框dotted
7. 扩展CSS3的属性：
   a. border-radius: 15px;圆角边框，50%圆形（表示宽或高的50%）
   b. border-top-left-radius: 0;设置左上边角，的圆角边框
   c. border-top-right-radius: 0;设置右上边角，的圆角边框
   d. border-bottom-left-radius: 0;设置左下边角，的圆角边框
   e. border-bottom-right-radius: 0;设置右下边角，的圆角边框
   f. border-radius:左上 右上 右下 左下 ;速写方式
8. 扩展CSS3属性:边框不要改变盒子的尺寸，box-sizing:border-box（宽高设置的是边框盒，包含边框，包含填充，包含内容）

5.5 外边距（margin）

1. 外边距是边框到其它盒子的距离
2. 外边距属性：margin-top（上）、margin-left（左）、margin-right（右）、margin-bottom（下）外边距
3. 速写属性 margin：值 表示上下左右设置一样的值
4. 扩展css3的属性：盒子阴影：box-shadow：水平阴影、垂直阴影、模糊距离、阴影尺寸、阴影颜色、内/外阴影;主要是前面四个属性，以px为单位

6. 盒子的嵌套关系

1. 行盒只能嵌套行盒
2. 块盒可以嵌套块盒、行盒、行块盒
3. p元素例外，P元素为块盒，但是p元素不能嵌套div，否则会被砍成两段，变成两个p元素，中间隔着个div
4. a元素里面不能嵌套a元素

7. 盒子居中

1. 居中：盒子在其包含块中居中

2. 行盒（行块盒）水平居中：直接设置行盒（行块盒）父元素 text-align：center

3. 常规流块盒水平居中：定宽，设置左右margin为auto

4. 绝对定位元素的水平居中：定宽，设置左右的坐标为0（left：0，rjght：0），将左右margin设置为auto

5. 单行文本的垂直居中：设置文本所在元素的行高，为整个区域的高度

6. 行块盒或块盒内多行文本的垂直居中：没有完美方案，设置盒子上下内边距相同，达到类似的效果。

7. 绝对定位的垂直居中：定高，设置上下的坐标为0（top：0，bottom：0），将上下的margin设置为auto

8. 绝对定位的水平、垂直居中（CSS3属性）：left：50% top：50%; 然后使用2D变形转换的移动（偏移） transform：translate(-50%,-50%);

8. 外边距合并

8.1 什么是外边距合并

1. 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

8.2 相邻块元素垂直外边距的合并

1. 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。
2. 这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
3. 解决方案： 避免就好了
   

8.3 嵌套块元素垂直外边距的合并

1. 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
   
2. 解决方案一：可以为父元素定义1像素的上边框或上内边距。
3. 解决方法二：可以为父元素添加overflow:hidden。

9. 盒子阴影

1. 盒子阴影

    <!-- 语法 -->
    box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
   

   属性	属性值	作用
   box-shadow:	h-shadow	必须，水平阴影的位置，允许负值
   	v-shadow	必须，垂直阴影的位置，允许负值
   	blur	可选，模糊距离
   	spread	可选，模糊距离阴影尺寸
   	color	可选，阴影颜色
   	inset	可选，将外部阴影（outset）改为内部阴影

   div { 
      width: 200px; 
      height: 200px;
      border: 10px solid red; /* 
      box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); / / 
      box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影； */ 
      box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
   } 
   //  注意：
   //  前两个属性是必须写的。其余的可以省略。
   //外阴影 (outset) 但是不能写 默认 想要内阴影 inset
   

10. 盒模型应用

10.1 改变宽高范围（width、height）

1. 默认情况下，width和height设置的是内容盒宽高
2. 页面重构师将psd文件（设计稿）制作成静态页面，衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width、height，则默认设置的是内容盒
3. CSS3后可以改变默认设置，如：box-sizing：border-box设置成边框盒的width、height

10.2 改变背景覆盖范围

1. 默认情况下背景覆盖边框盒
2. 可以通过background-clip：如填充盒…进行修改

10.3 溢出处理

1. 盒子在没有设置宽高的情况下，添加、缩减内容的时候会自动增加或减少width、height的值
2. 如果盒子设置了width、height，那么当内容过多的时候就会溢出到盒子外边，溢出部分浏览器默认会显示出来
3. overflow 控制内容溢出边框盒后的处理方式
   ■ overflow：visible（默认值）溢出部分可见
   ■ overflow：hidden 溢出部分隐藏
   ■ overflow：scroll 生成滚动条x、y
   ■ overflow-x或y: scroll 只出现一边滚动条
   ■ overflow：auto 在需要滚动条时才出现滚动条
   ■ overflow-x或y: auto 在需要一边滚动条时才出现

10.4 断词规则（一般用默认的）

1. 在行宽不够的时候，文字会自动换行，在哪个位置截断然后换行，由断词规则决定，浏览器有默认的断词规则
2. word-break 设置断词规则：
   ■ word-break：normal 默认的，CJK（中、日、韩）字符（文字位置截断），非CJK字符（单词位置截断）
   ■ word-break：break-all 截断所有，所有字符都在文字处截断
   ■ word-break：keep-all 保持所有，所有文字都在单词之间截断

10.5 单行文本过长用设置…

1. 比如有些标题过长，后面过长的部分用“…”来表示
2. white-space：nowrap 首先需要设置不换行
3. overflow：hidden 然后隐藏溢出
4. text-overflow：ellipsis 然后文字溢出的部分用“…”来代替
5. 只能处理单行文本

10.6 变量字符串中添加换行符

1. JS变量中添加\n

   var str = 你好'+"\n"+ '世界';
   
   这种写法在html中是会被识别为"你好\n世界"
   
   那么如何保证其这么写会被识别，只需要在该div的样式中加入"white-space":"pre"这个样式
   

10.6 图片的底部白边

1. 图片或者表单等行内块元素，的底线会与父级盒子的基线对齐，这样会有一个白色空隙
2. 图片默认与文字的基线对齐，所以图片底下会有空隙
3. 解决方法：
   ■ . 设置父元素的字体大小为0，副作用就是父元素范围里面的文字都会看不见，有文字的时候不推荐使用这种方法。
   ■ . 将图片设置为块盒
   ■ .给img设置：vertical-align:middle或top等等，让图片不要与基线对齐

10.7 空白折叠

1. 空白折叠，发生在行盒（包含行块盒）内部或行盒（包含行块盒）之间
2. 空白折叠：在书写代码的时候行盒元素间的空白部分会在页面上折叠成一个空格
3. 消除空白折叠：把元素代码书写的时候连在一起（不推荐使用）

10. 8 可替换元素和非可替换元素

1. 大部分元素，页面上显示的结果，取决于元素内容，称为“非可替换元素”
2. 少部分元素，页面上显示的结果，取决于元素属性，称为“可替换元素”
3. 可替换元素：img、video、audio…
4. 绝大部分可替换元素均为行盒
5. 可替换元素类似于行块盒，盒模型中所有尺寸都有效