目录

盒模型

  1. 使用outline:1px solid red;轮廓绘制在元素框之上,不影响元素大小和定位，被用来 debug

  2. 只有普通文档流中块元素的垂直外边距才会发生外边距叠加。行内框，浮动框和绝对定位框之间的外边距不会叠加。

  3. inline元素在一行上水平排列，只能设置行高，水平边框，水平padding，水平margin

  4. inline-block也可以在一行上水平排列， 并且可以设置width,height,margin,padding等

从上往下 可见内容为

border
content
padding
background-image
background-color
margin

标准文档流

块元素

  • 每个块级元素都从新的一行开始,左右自动伸展，直到包含它的元素，,元素宽度在不设置的情况下，是它本身父容器的 100%，除非设定一个宽度。

  • 块状元素的高度、宽度、行高以及顶和底边距都可设置

行内元素(内联元素)

  • 本身没有宽度 , 它的宽度就是它包含的文字或图片的宽度，不可改变

  • 和其他行内元素都在一行上

  • 元素的高度、宽度及顶部和底部边距不可设置

内联块状元素

display:inline-block

  • 和其他元素都在一行上

  • 元素的高度、宽度、行高以及顶和底边距都可设置

<img>、<input> 就是内联块状元素

隐性改变 display 类型

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一
position : absolute;
float : left;
元素会自动变为以 display:inline-block; 的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。

浮动

  1. 浮动框可以左右移动，直到外边缘碰到包含块或者另一个浮动框的边缘

  2. 浮动后的元素也脱离文档流，不占空间

  3. 可覆盖其他元素,z-index控制覆盖

  4. 水平无法容纳水平浮动的所有元元素,则后面的元素继续向下浮动，并且可能会出现卡住现象。

  5. inline行框会围绕在浮动框的外边。

块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。
使用父元素伪类清理浮动代码

.clear:after {
  content: ".";
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
}

定位

相对定位

position:relative;

  1. 相对是相对与在原文档流中的位置

  2. 元素无论是否移动，元素仍然占据原来空间

  3. 它通过 left、right、top、bottom 属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按 static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由 left、right、top、bottom 属性确定。

绝对定位

position:absolute;

  1. 相对于距离最近的已定位的祖先元素

  2. 脱离文档流，元素不占据原来空间

  3. 绝对定位的元素可以覆盖页面上的其他元素,通过z-index控制叠放顺序

固定定位

  1. 相当于绝对定位，相对于视口进行定位

absolute 和 relative 配合使用

  1. 父元素设置为 relative,可偏移，也可不偏移。

  2. 子元素设置为 absolute,相对于上述父元素定位。