阅读 60

自己在学css时,对css布局总结

前言:本篇是自己的总结,适合人群:小白。如有错误希望指出,必定改正

1.盒子类型

CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,比如div默认display属性值为“block”,(或list-item,table)成为“块级”元素,会生成block-level box,并参与block fomatting context;span默认display属性值为“inline”(或inline-block,inline-table)是“行内”元素,会生成inline-level box并且参与inline formatting context

2.元素分类

总体来说有三大类

  • 1.块级元素(div,ul,ol,li,dt,dd,h1,p)
  • 2.行内元素(img,span,input)
  • 3.空元素(img,input)

其他的例如列表元素都是属于块级元素中的

3.元素的盒属性:

行内元素:有margin和padding,但是只能够设置左右的值,设置上下的值是无效的。 块级元素:可以设置margin和padding上下左右的四个值,margin可以有负值,padding不允许有负值。 设置宽高 行内元素:不允许设置宽高,行内元素的宽高只能是由行内元素内的内容撑起来。 块级元素:允许设置宽高,如果不设置,默认宽度是父元素的100%,高度是由内容撑起来的。

4.BOX

BOX:是布局的基本单位,元素的display属性决定了BOX的类型,不同类型的BOX,会参与不同的Formatting Context(一个决定如何渲染文档的容器,块级盒子参加BFC行内盒子参加IFC),因此不同的Box内的元素以不同的方式渲染,上面有说,如图:

image.png

5.Formatting context

它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系的相互作用 常见的有:

  • Block fomatting context(BFC)
  • Inline formatting context(IFC)、

对BFC想了解的点这个链接

文章分类
前端
文章标签