css-布局详解

正常的默认文档流方式布局就不说了。主要说以下几种布局:

  1. table布局
  2. float布局
  3. position定位布局
  4. flex布局
  5. grid布局
  6. column多列布局
  7. 移动端布局
    css 布局的几种方式

1. table布局

两种方式实现表格布局:HTML Table标签 和 CSS display:table 相关属性。
HTML Table是指使用原生的

标签,而CSS Table是指用CSS属性模仿HTML 表格的模型。对应表:

css table 与HTML table 对应表

应用:

  • 动态垂直居中对齐,用display:table实现居中对齐
  • 动态水平居中对齐,CSS布局:动态水平居中对齐
  • 使用display:table实现的圣杯布局
    缺点:
  • table比其它html标记占更多的字节。(造成下载时间延迟,占用服务器更多流量资源)
  • table会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间)
  • table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度,增加页面加载时间,增加http会话数)
  • 在某些浏览器中,table里的文字的拷贝会出现问题。(会让用户不悦)
  • table会影响其内部的某些布局属性的生效(比如
里的元素的height:100%) (限制页面设计的自由性)
  • 一旦学了CSS的知识,你会发现使用table做页面布局会变得更麻烦。(先花时间学一些CSS知识,会省去你以后大量的时间)
  • ‘table对’对于页面布局来说,从语义上看是不正确的。(它描述的是表现,而不是内容)
  • table代码会让阅读者抓狂。(不但无法利用CSS,而且会不知所云,尤其在进行页面改版或内容抽取的时候)
  • table一旦设计完成就变成死的,很难通过CSS让它展现新的面貌。
  • 对 seo 不友好
  • 嵌套复杂,阅读性变差
    参考链接:
    https://www.cnblogs.com/guoyong-feng/p/6076058.html
    https://blog.csdn.net/screener/article/details/80895863
    我的理解:除了本身就是表格内容的,还是不要用table布局。
  • 2. float布局

    水很深,坑很多,很复杂,用的也多。
    特性:

    1. 元素‘浮动’,脱离文档流,但不脱离文本流
    2. 对自身影响,形成“块”(BFC),位置尽量靠上,位置尽量靠左(右)
    3. 对兄弟元素的影响,上面贴非float元素(一般float元素上面贴的都是非float元素),旁边贴float元素(靠左,或者靠右的时候贴float元素),不影响其它块级元素位置,影响其它块级元素内部文本(后面两点就是特性一说的脱离文档流,不脱离文本流)
    4. 对父级元素的影响,从布局上“消失”(相当于从父级的空间里面消失了,消失了意味着父级不会再管他的宽高),高度塌陷(因为在父级的空间里消失了,所以父级对高度有可能会塌陷,防止塌陷的办法就是清除浮动)
      应用:
    • 两栏布局(定位,flex,grid也可以实现)
    • 三栏布局 、双飞翼布局、圣杯布局 (定位,flex,grid也可以实现)
      清除浮动的方法:
      https://www.jianshu.com/p/1ff30625c250

    3. position定位布局

    https://www.runoob.com/cssref/pr-class-position.html

    position属性

    4. flex布局

    菜鸟教程-flex布局
    阮一峰-flex布局

    5. grid布局

    阮一峰-grid布局
    grid是二维布局,很灵活,适合整体构架,而flex是一维布局,适合处理局部细节。

    6. column多列布局

    菜鸟教程-column多列

    多列属性

    7. 移动端布局

    移动端布局方法

    • meta标签

      image.png

      移动前端开发之viewport的深入理解
      其中,width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度。
    • 使用 rem 单位
    • media query
      菜鸟教程- @media 查询
      菜鸟教程- 多媒体查询

    你可能感兴趣的:(css-布局详解)