您的位置: 首页  >  文章  >  【讨论班】css浮动与布局

【讨论班】css浮动与布局

分类: 文章 • 2022-11-03 08:32:34

流　　

“流”与现实世界的“水流”有异曲同工的表现，是CSS世界中的一种基本的定位和布局机制，可理解为现实世界的一套物理规则　　

　　
　　CSS世界构建的基石是HTML，而HTML最具代表的两个基石 <div> 和 <span> 正好是CSS世界中块级元素和内联级元素的代表。
　　“流”，即“文档流”。是指其中的元素依次排列下来的一种形式。
　　未加任何浮动或定位的html就是使用的文档流。　
　　
　　“流体布局”指的是利用元素“流”的特性实现的各类布局效果。
　　“流”本身有自适应特性，所以“流体布局”往往都是具有自适应性的，但“流体布局”不等同于“自适应布局”
　　拓展：各种布局的区别
　　“流体布局”通常指的就是“div+css布局”

　　
　　

　　



css浮动　　　　


float的本性与特质　　

浮动的本质就是为了实现文字环绕 　　

浮动是魔鬼，少砌砖头，少浮动，建立能够适应各种环境的高质量网页布局 　　

　　

  • 浮动的特性

    • 包裹

    • 自适应性　

    • 块状化并格式化上下文　

      • 【讨论班】css浮动与布局　

      • 除了display:inline-table 会使display出现table，其他任何格式下只要设定了float，span的display就为block　　

        • 破坏文档流（罪恶的根源）
        • 没有任何margin合并
          　　
          　　

  • 最好无浮动的原因

    • 纯浮动布局容错性差
    • 本身就是魔鬼属性，比较容易出现意料之外的情况（父元素塌陷及兼容性问题）
      　
      　　
      　　　　

float的作用机制　　

　　
　　　　　
　　原本的作用就是使父元素塌陷
　　（代码讲解）
　　
　　
　　文字环绕风格现在大多数人都并不使用，于是float很少发挥原本的作用，反而被大肆使用满屏布局。
　　但是使用布局的时候并不需要父元素的塌陷，就使这个特性成为了float的bug　　

　　　　

float的克星clear　　

　　clear：none | left | right | both

　　clear：left并不是清除左浮动的意思，浮动并没有被清除

　　clear属性官方解释“元素盒子的边不能和前面的浮动元素相邻”

　　clear是让自身不能前面的浮动元素（代码演示）
　　
　　clear属性只有块级元素才有效，而 ::after等伪元素默认都是内联水平

　　因此，需要借助伪元素清除浮动影响时需要设置display（代码演示）

　　

布局　　


使用float制作网页布局

　　
　　设置float属性后，元素实际上会inline-block块状化

　　可以去掉排列间的空格

　　设置浮动后，元素就变为块级元素了

　　但最好的应用还是应该让它去实现文字的环绕效果，比如单侧固定的流体布
　　局，用：float+margin来实现。

　　大布局时可以用一下，小的布局时可以考虑用inline-block来砌砖头（但是会
　　有小间距，具体应用时看），尽量不要滥用。　　
　　

　　【讨论班】css浮动与布局
　　　　


网页常见布局

　　
　　
　　一列布局，两列式布局，三列式布局，混合布局
　　
　　

  • 一列布局

    • 使用margin:0 auto; 来居中
    • 用于界面显著标题的展示，一般都是固定的宽高

    • .main{
      width: 200px;
      height: 100px;
      background-color: grey;
      margin: 0 auto;
      }
      <div class="main"></div>

      　　　
      　　
      　　

  • 两列布局

    • 设置左右浮动或左左浮动（父级的宽度需要确定）
      • 如果父级元素没有设置高度，则需要设置overflow:hidden来清除浮动产生的影响
  • 三列式布局（代码演示）
    • 两侧定宽中间自适应
    • 中间可设置margin来调整间距
    • 首先设置父级的宽度，然后设置左右浮动
    • 或者设置左左浮动，调整间距
    • 还可以为父级设置relative，子元素设置absolute，再调整距离

  • 混合布局（代码演示）

    • 保留两列式及三列式布局，同时加上top 和foot部分

      　
      　

　　

参考书目及资料：

  1. 《css世界》 张鑫旭
  2. 张鑫旭个人空间：http://www.zhangxinxu.com/
  3. 慕课网的视频
  4. 前端论坛 前端里 http://www.yyyweb.com/
  5. 分享及讨论 个人博客 梦想天空 http://www.cnblogs.com/lhb25/
  6. 前端学习路线 思维导图 （个人推荐看一下，是学习架构的思维导图） https://www.processon.com/view/link/57d28d0ee4b0942d7a89c9dd

  7. 前端学习路线 路线加资源http://bbs.itheima.com/thread-338488-1-1.html


　　
　

类似技巧及自己的小总结：

  • css其实入门比较简单，但是也是一门比较深的学问，需要仔细钻研
  • 讲的很少，需要自己总结，推荐去看禅意花园，自己摸索每个网站的布局构造
  • 推荐慕课网上关于浏览器开发者工具使用技巧，十分有用
  • 把平常遇到的问题或者临时学的技巧记下来，以后会用到的
  • 没事逛逛一些网站，会有意想不到的收获
  • 代码比较重要，需要经常敲
  • 千图网 类似的这种网站里都会有许多网站的psd图，可以自己拿来练手
    http://www.58pic.com/
  • 关于你自己的用来敲代码的工具也有许多可以开发的功能，可以自己试试

  • 没事上网搜搜，可以发现挺多有用的工具

    　　
    　　
    　　
    　　

作业：

1.搜索四种解决父元素“塌陷”的办法
2.制作给出的网页psd
　　要求：
　　使用外联样式表；
　　尽量做到稳定布局；

使用文件及作业下载地址：
https://git.coding.net/wowomilkycandy/document.git

相关推荐