总结:
一,总的来说就是一个拆解的过程。类比于树状结构,不断划分板块。层层细化,然后把每个板块作好。
二,板块或者元素的布局,依据我目前掌握的知识,有以下几点:
1,利用文档流的基本性质。
2,利用浮动float。
3,利用定位position。
当然这三种都得基于理解了盒模型之后再进行,利用盒模型配合着这三种方式进行。

接下来展开说明这两点感悟。
第一点:将总的页面划分为几个板块,然后每个板块又划分为几个部分,以此类推,一直划分下去。
HTML+CSS纯静态页面布局的理解(一)
例如上图,拿过来之后,就可以划分为:header,content,footer三个大的部分。
HTML+CSS纯静态页面布局的理解(一)
然后再拿头部来划分:依旧是划分为三个部分
HTML+CSS纯静态页面布局的理解(一)
接着再拿顶部来划分:可以划分为一个居中的盒子,里面左浮动一个,右浮动一个子盒子。
HTML+CSS纯静态页面布局的理解(一)
再把左边的子盒子进行划分:
HTML+CSS纯静态页面布局的理解(一)
又划分为左右两个小盒子,左边的小盒子里面放上三个a标签,右边的放5个li标签。每个盒子的高度设置好,或者让子元素把高度撑开。就可以把这一小单元的写好。其他划分的小单元以此类推。
把握好整体与局部的关系,这种思路,就是先整体,后局部,当全部局部构建完成时,整体就出来了。

第二点,结合盒模型的知识,综合利用文档流的性质,浮动的性质,以及定位的性质,来布局。
HTML+CSS纯静态页面布局的理解(一)
例如上图这种,多个盒子并列一行的,明显有高度,但又并列,则可以设置类型为inline-block或者是float来解决,不过值得注意的是float之后,元素的宽度不再具有流动性,而是表现为包裹性了,当然也可以自行设定宽高属性。
HTML+CSS纯静态页面布局的理解(一)
而类似于上图这种的,当然前两行是利用文档流,块状元素独占一行的属性来进行了!
而对于定位,它的定义,会使得元素脱离文档流,想要定义到盒子的哪个位置你自己说了算。

相关文章:

  • 2021-07-27
  • 2021-11-05
  • 2021-09-05
  • 2022-01-20
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-01-02
  • 2021-07-06
  • 2022-12-23
  • 2021-05-25
  • 2022-12-23
  • 2022-01-20
  • 2021-11-17
相关资源
相似解决方案