认识盒模型

所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型"
width、height不是盒子总宽高
盒子的总宽度=width+左右padding+左右border
属性width和height属性详解

属性

padding、margin、border
padding
内边距
影响盒子实际大小,会让元素的内容增大
margin
外边距
不影响盒子实际大小,不会让元素的内容增大，是和另一个元素的间距
盒子实际大小受padding和border的影响，跟margin没有关系
若加了padding和margin值,设置width和height时，注意减去padding和margin的值

使用margin值的情况:
1.需要在border外侧添加空白时;
2.空白处不需要背景色时;
3.上下相连得两个盒子之间的空白需要相互抵消时，如15px+20px得margin，将得到20px的空白。（margin折叠）
4.需要使用负值对页面布局时（margin值可以取负值，padding不行）

使用padding时的情况:
1.需要在border内侧添加空白时。
2.空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px＋10px将得到25px的空白。
最后，需注意margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不干扰;padding用于元素与内容之间的间隔，让内容与元素之间有一段距离。
在怪异盒模型中，一个块的总宽度受margin影响但不受padding影响。

width

表示盒子内容的宽度
未设置width属性时自动撑满，并不意味着width可以继承

height

表示盒子内容的高度
未设置height属性时自动被其内容撑开，如果无内容则height为0

padding

包含四个方向
可分别用小属性设置
小属性 意义
padding-top 上padding
padding-right 右padding
padding-bottom 下padding
padding-left 左padding

如何灵活设置padding？

四数值写法

分别表示上、右、下、左

padding: 10px 20px 30px 40px;

三数值写法

分别表示上、左右、下

padding: 10px 20px 30px;

二数值写法

分别表示上下、左右

padding: 10px 20px;

小属性层叠大属性

上左右padding为40，下padding为0

padding: 40px;
padding-bottom: 0;

margin

也有四个方向
小属性 意义
margin-top 上margin,“向上踹”
margin-right 右margin,“向右踹”
margin-bottom 下margin,“向下踹”
margin-left 左margin,“向左踹”

塌陷

存在于竖直方向
小的margin塌陷到大的margin中，即margin不叠加以大值为准

默认值

一些元素（比如body、ul、p等）有默认的margin
在开始制作网页的时候，要清除

  /* 通配符选择器表示选择所有元素 */
  * {
      margin: 0;
      padding: 0;
  }
  /* 通配符有效率问题，应使用并集选择器 */
  body,
  ul,
  p {
      margin: 0;
      padding: 0;
  }

盒子居中

父亲{
position:relative;
}
元素{
position: absolute;
top: 50%;
margin-top: -自己高度一半;
}

盒模型计算

标准盒子模型

元素实际大小

元素的实际宽度= width + padding-left + padding-right + border-left + border-right

元素空间尺寸

元素空间宽度=元素实际宽度 + margin-left + margin-right

box-sizing

设置 box-sizing: border-box;后 width、height表示元素实际大小

.box {
    box-sizing: border-box;
    width: 200px;
    height: 200px;
    border: 10px solid #000;
    padding: 10px;
       }

大量应用于移动网页制作中，结合百分比布局、弹性布局等非常好用
在PC页面开发中使用较少
兼容到IE9

文档流

指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式,
最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素

标签分类

HTML中

文本级标签-只能放文字、图片、表单元素；
容器级标签-可放任意（容器级标签、文本级标签、文字、图片、表单元素）

CSS中

分类和HTML很像，p不一样

元素分类

特殊的行内块： 图片、表单元素
关系：定位后，行内元素转换成块级元素

元素类型转换

元素隐藏

display:none

元素彻底放弃自己的位置，如同没有写它的标签一样

visibility:hidden

元素不放弃自己的位置