Skip to content

Latest commit

 

History

History
219 lines (187 loc) · 4.96 KB

常见问题2.md

File metadata and controls

219 lines (187 loc) · 4.96 KB
Raw

清除浮动

参考链接：https://blog.csdn.net/h_qingyi/article/details/81269667

方案1：触发 BFC 实现清除浮动

.fahter{
  width: 400px;
  overflow: hidden;
}

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

方案2：使用 after 伪元素清除浮动

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear:both;
  visibility: hidden;
}
.clearfix{
 *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

优点：符合闭合浮动思想，结构语义化正确 缺点：ie6-7 不支持伪元素：after，使用 zoom:1 触发 hasLayout.

方案3：使用 before 和 after 双伪元素清除浮动

.clearfix:after,.clearfix:before{
  content: "";
  display: table; /* ??? */
}
.clearfix:after{
  clear: both;
}
.clearfix{
  *zoom: 1;
}

两侧宽度固定、中间宽度自适应的三栏布局

参考链接

https://blog.csdn.net/Cinderella_hou/article/details/52156333

https://chokcoco.github.io/CSS-Inspiration/#/./layout/holy-grail-layout

https://www.cnblogs.com/hfdj/p/7554933.html

https://www.jianshu.com/p/81ef7e7094e8

解决方案：绝对定位、圣杯布局及双飞翼布局方案、 flex 方案

圣杯布局

原理：

  • 圣杯布局的关键点是通过 margin-left 与 left 属性将左右两列放置到准确的位置
  • 圣杯布局的关键点父元素需要设置 padding
  • 圣杯布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的

缩放浏览器能看到自适应效果，分析过程见链接1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>三栏自自适应布局</title>
  </head>
  <style>
    body {
      min-width: 550px;
      margin: 0;
      padding: 0;
    }

    #container {
      padding-left: 200px; 
      padding-right: 150px;
    }

    #container .column {
      float: left;
      height: 100vh;
    }

    #center {
      width: 100%;
      background: red;
    }

    #left {
      width: 200px; 
      margin-left: -100%;
      position: relative;
      right: 200px;
      background: green;
    }

    #right {
      width: 150px; 
      margin-right: -150px; 
      background: blue;
    }

    #footer {
      clear: both;
    }
  </style>
  <body>
      <div id="header"></div>
      <div id="container">
        <div id="center" class="column"></div>
        <div id="left" class="column"></div>
        <div id="right" class="column"></div>
      </div>
      <div id="footer"></div>
  </body>
</html>

双飞翼布局

双飞翼布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。

双飞翼布局与圣杯布局的不同之处，圣杯布局的的左中右三列容器，中间middle多了一个子容器存在，通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度。

  • 双飞翼布局的关键点是通过 margin-left 属性将左右两列放置到准确的位置，通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度
  • 双飞翼布局的关键点父元素不需要设置 padding
  • 双飞翼布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>三栏自自适应布局</title>
  </head>
  <style>
    body {
      min-width: 500px;
      margin: 0;
      padding: 0;
    }

    #container {
      width: 100%;
    }

    .column {
      float: left;
      height: 100vh;
    }
            
    #center {
      margin-left: 200px;
      margin-right: 150px;
      background: orange;
      height: 100vh;
    }
            
    #left {
      width: 200px; 
      margin-left: -100%;
      background: greenyellow;
    }
            
    #right {
      width: 150px; 
      margin-left: -150px;
      background: skyblue;
    }
            
    #footer {
      clear: both;
    }
  </style>
	<body>
      <div id="header"></div>
      <div id="container" class="column">
        <div id="center"></div>
      </div>
      <div id="left" class="column"></div>
      <div id="right" class="column"></div>
      <div id="footer"></div>
	</body>
</html>

我感觉 float 布局就是玄学吧.......

使用 flex

<!-- DOM结构 -->
<div id="container">
  <div id="center"></div>
  <div id="left"></div>
  <div id="right"></div>
</div>
#container {
    display: flex;
}

#center {
    flex: 1; // 1 1 auto
}

#left {
    flex: 0 0 200px;
    order: -1;
}

#right {
    flex: 0 0 150px;
}