目录

盒模型

  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,相对于上述父元素定位。