浮动、包含块、盒模型相关

Author Avatar
Ninefire 6月 07, 2018
  • 在其它设备中阅读本文章

浮动

浮动仅提升元素的半个层级。

浮动元素的包含块

其定义为最近的块级祖先元素。

定位元素的包含块

其定义如下:

  • 在HTML中,根元素就是html元素,不过有些浏览器会使用body作为根元素。
    根元素的包含块称为初始包含块,由用户代理建立。
    在大多数浏览器中,初始包含块是一个视窗大小的矩形,但初始包含块并不是视窗。

  • 对于一个非根元素,如果其position值是relativestatic,包含块则由最近的块级框、表单元格或行内块祖先的的内容边界构成。

  • 对于一个非根元素,如果其position值是absolute,包含块设置为该元素的内边距边界,也就是由边框界定的区域。

  • 如果没有祖先元素(即根元素),包含块定义为初始包含块。

总结

  • 定位元素的参照
    没有定位:包含块
    相对定位:元素本来的位置
    绝对定位:包含块
    固定定位:视口

  • 初始包含块是根元素的包含块,是一个视窗(viewport)大小的矩形,但并不是视窗。

  • widthheighttoprightbottomleft的默认值为auto

  • marginpadding的默认值为0

  • boder-width默认值为中等大小。

  • 百分比的计算
    widthmarginpadding是相对于包含块的width进行计算。
    height为百分比是相对于包含块的height进行计算。
    left为百分比时相对于包含块的width进行计算。
    top为百分比时相对于包含块的height进行计算。

如发现错误请联系我,谢谢你。
本文链接:http://ninefire.tk/CSS2.1/01.html