第五天和第六天 三种简历

第五天和第六天 三种简历

课程目标

掌握CSS盒模型及通过Float进行简单的布局

阅读

• MDN-盒模型
• MDN-再述盒模型
• MDN-浮动layout/Floats
• 如何理解 CSS 中的浮动布局方式？
• What methods of ‘clearfix’ can I use?
• 清除浮动（clearfix hack）
• 编码规范

阅读笔记

1. 框属性
   
   • width和height
   • padding
   • border
   • margin：外边距有一个特别的行为被称作外边距塌陷（当两个框彼此接触时，它们的间距将取两个相邻外边界的最大值，而非两者的总和）
2. 高级的框操作
   
   • overflow：
     
     • auto：当内容过多，溢流的内容被隐藏，然后出现滚动条来让我们滚动查看所有的内容。
     • hidden：当内容过多，溢流的内容被隐藏。
     • visible：当内容过多，溢流的内容被显示在盒子的外边（这个是默认的行为）
   • background-clip：背景裁剪
   • ontline：轮廓。被勾画于在框边界之外，外边距区域之内。
3. CSS框类型：
   
   • display：block，inline，and inline-block。
4. 盒模型概要
   
   • 完全改变盒模型：box-sizing: border-box
   • 不常见的display类型：
     
     • display: table
     • display: flex
     • display: grid
5. 浮动
   
   • clear：
     
     • left：停止任何活动的左浮动
     • right：停止任何活动的右浮动
     • both：停止任何活动的左右浮动
6. 清除浮动还是闭合浮动
   
   • 清除浮动：clear: left|right|both|none;
   • 闭合浮动：使浮动元素闭合，从而减少浮动带来的影响 。
   • 在footer上设置clear: both清除浮动并不能解决wrap高度塌陷的问题。
7. CSS中的定位机制：普通流，浮动，绝对定位（其中position:fixed是position:absolute的一个子类）

8. 清除浮动的原理

   1. 添加额外标签：
      缺点：会添加无意义的空标签，有违结构与表现的分离。

      <div style = "clear: both"></div>
      // 其他标签<br>等亦可
      

   2. 使用br标签和其自身的html属性
      缺点：同样有违结构与表现的分离，不推荐使用。

      // bryou clear = "all|left|right|none"属性
      .main{float:left;}
      .side{float:right;}
      <div class="main"></div>
      <div class="side"></div>
      <br clear="all" />
      

   3. 父元素设置overflow: hidden，在IE6中还需要触发hasLayout，例如zoom: 1;
      缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

      .container {
        overflow: hidden;
        _overflow: visible; /* for IE */
        _zoom: 1; /* for IE */
      }
      

   4. 父元素设置overflow: auto属性，和3差不多。
      缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中mouseover造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等。

      .clearfix {
        overflow: auto;
        zoom: 1;
      }
      

   5. 父元素也设置浮动
      这个想想都知道不是一个好的解决办法。
   6. 父元素设置display:table

   7. 使用:after伪元素，由于IE6-7不支持:after，使用zoom:1触发hasLayout。

      // 不支持IE6/7
      .container::after {
        content: "";
        display: block;
        clear: both;
      }
      
      // 支持Firefox3.5+，Safari4+，Chrome，Opera9+，IE6+
      .container::before, .container::after {
        content: "";
        display: table;
      }
      .container::after {
        clear: both;
      }
      .container {
        zoom: 1;
      }
      

   8. 综上所述：在支持BFC的浏览器（IE8+，firefox，chrome，Safari）通过创建新的BFC闭合浮动；在不支持BFC的浏览器（IE6-7），通过触发hasLayout闭合浮动。

编码中遇到的一些问题

1. 在做第二个效果图的时候要用到两栏布局，采用的方案是

   // 固定宽度区浮动，自适应区不设宽度而设置margin
   .wrap {
       overflow: hidden;
       *zoom: 1;
   }
   
   .left {
       float: left;
       width: 20%;
   }
   
   .right{
       margin-left: 22%;
   }
   

2. 第二个效果图让左边的div自适应右边的div

   function changeBoxSize() {
       var scrollHeight = document.getElementById("inner").scrollHeight;
       document.getElementById("inner").style.height = scrollHeight + "px";
   }
   window.onresize() = changeBoxSize(); // div大小改变的时候就执行函数
   
   .left {
       margin-bottom: -3000px;
       padding-bottom: 3000px;
   }
   

上传github文件

git init （初始化本地仓库）
git add. （将本地所有文件加到仓库里）
git commit -m "message" （设置提交信息）
git remote add origin git@github.com:Hippo32/ZeroAbility.git （本地仓库链接远程仓库）
git push -u origin master （push文件到仓库中）

验证

• 盒模型的概念
• inline、block和inline-block的概念
• 内外边距，宽度，高度，box-sizing等属性
• 浮动，清除浮动
• 如何使用浮动进行布局

github预览地址：https://hippo32.github.io/ZeroAbility/day5and6/resume.html