盒子模型、文档流、定位、布局和响应式设计

发布时间:2022-09-21 00:30


title: “盒子模型、文档流、定位、布局和响应式设计”


盒子模型

当我们设置盒子的宽度与高度的时候,设置的是 content 的高度与宽度,paddingborder 没有被计算进去。 可通过 box-sizing 设置盒子模型的大小,默认情况下是值 content-box,即计算内容区计算盒子大小。实际项目中,会按照 border-box 计算盒子大小,会将盒子外边框(margin)设置为 0。

文档流

盒子在文档中如何排列,即行内块元素和块元素。

定位

坐标定位

  • static:位置不会发生变化。
  • relative:指元素相对其所在文档流的位置坐标,元素在文档流中的原始位置被保留,不会影响其它元素的位置。
  • absolute:脱离文档流,并且会查找第一个非 static 的父元素作为其相对坐标参照物。
  • fixed:脱离文档流,针对窗口进行定位。

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号