4

1.导航条垂直居中

导航条nav 从左到右分为 nav-left , nav-mid , nav-mid ,怎样达到从左到右依次排列,且全部垂直居中的效果呢?
全部设置 float:left , 这样之后才可以方便的使 nav-left, nav-right, nav-right 都垂直居中,只需要设置一次父元素nav的 line-height 等于它的 height 就可以啦~

1.1 ul>li>a 构成的导航条内部导航水平居中:
ul设置 text-align:center;
li和a都设置 display: inline-block;

2.清除父元素的浮动

假设父元素为 wrap ,未设置高度,包含三个子元素 left mid right,需要实现水平三列布局
首先,对left mid right 三部分应用 float: left;并设置合理的宽度,假设都为30%
这时由于内部元素全部浮动而脱离文档流,导致父包含块高度无法被撑开,缩成了一条。下面,需要对父包含块做清除浮动。
此时,clear:both; 是不好用的,因为它只能应用于清除左侧或右侧的浮动。

方法一、overflow: hidden;

我们需要对父元素应用overflow: hidden; 来清除浮动。原理是 overflow 的值只要不是默认值visible,就触发了 BFC。
而 BFC 是傲娇的小公举,有她自己的布局规则:

内部的Box会在垂直方向,一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边,
与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。 BFC的区域不会与float
box重叠。 BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时,浮动元素也参与计算

注意最后一条,因为计算BFC高度时,浮动元素也参与计算,所以父元素的高度被撑开。而这也正符合包含块未设置高度(height: auto;)时的裁切准则。因为包含块高度(height: auto;),所以永远不会出现内容超出包含块的情况,因此overflow:hidden应用后,需要计算内部所有元素高度才能进行裁切。

补充下哪些元素会生成BFC:

根元素
float属性不为none
position为absolute或fixed
display为inline-block,table-cell, table-caption, flex, inline-flex
overflow不为visible

方法二、clearfix:after{ ... }

clear属性清除浮动通用方案:.clearfix:after{ ... } 实际上是添加了一个看不见的元素。

主要代码:

.clearfix: after {
  content: " ";
  display: block;
  clear: both;
  //用于清除浮动:设置了clear:both的块级元素可以清除浮动
  overflow: hidden;
  visibility: hidden;
}

将clearfix这个class添加到浮动元素的父元素上,就清除了因为子元素浮动缩成一条的父元素的影响,完整代码见:
jsfiddle栗子

3.水平三列等宽布局

水平三列等宽布局 当页面宽度变化时,怎样一直保持三列始终均匀的居中显示?
(实在不知道该怎样简洁的描述“均匀的居中”。。。意思就是左右两列与页面之间的间隙,以及列与列之间的间隙,这四块间隙一样宽。)
其实就是考算术的。按照设计稿样式计算3个列以及4个空隙的百分比宽度,让它们相加约等于100%,比如 26% * 3 + 5% * 4 = 78% + 20% = 98%

//html
<div class="wrap">
    <div class="left">left</div>
    <div class="mid">middle</div>
    <div class="right">right</div>
</div>
//css
.wrap {
  margin: 0 auto;
  width: 400px;
  background: yellow;
  overflow: hidden;
}
.left, .mid, .right {
  float: left;
  margin-left: 5%;
  width: 26%;
}
.left {
  background: blue;
}
.mid {
  background: pink;
}
.right{
  background: red;
}

效果就是下图介样子:

图片描述

更多方法参考这篇文章:页面架构之等分布局

4.三行自适应布局:header(定高) + main(高度自适应) + footer(定高)

方法一、position

jsfiddle中的栗子

//html
<div class="header">header</div>
<div class="main">
  <div class="content">content</div>
</div>
<div class="footer">footer</div>

//css
.header {position: absolute;top: 0;left: 0; width: 100%; height: 100px;background-color: pink;}
.footer {position: absolute;bottom:0;left:0; width: 100%;height: 100px;background-color: pink;}

.main {position: absolute; top: 100px;left:0; bottom: 100px;right: 0;overflow: auto;background-color: yellow;}
.content {height: 1000px;}

header 和footer 的css属性基本一样。
main的设置注意两点:
1.用了同时设置top与bottom , left与right,撑开元素的技巧。
2.overflow:auto; 用来在内部元素超出时显示进度条。
这样在页面高度变化,或者内部的content高度变化时,都始终可以保持正常的三行布局。

图片描述

方法二、flex (三行高度自适应 + 两列宽度自适应)

可以直接看 jsfiddle栗子

主要代码:

//html
<div class="header">header</div>
<div class="body">
  <div class="side">side</div>
  <div class="main">main</div>
</div>
<div class="footer">footer</div>

//css
body { display: flex; flex-flow: column;}
.heater, footer { height: 100px; }
div.body { flex: 1; display: flex; width: 500px; align-self: center; }
//div.body 既做三行flex布局的item,也是两列flex布局的container
.side { width: 200px; }
.main { flex: 1; } // 其实是flex-grow: 1; 占满剩余宽度的1/n,而这里的n就是1

图片描述

可以看到我们的div.body还是水平居中的,其实是我们给.body设置了一个定宽 width: 500px; 加上本元素交叉轴上的对齐方式 align-self: center; 的作用。


一只瓦罐
954 声望47 粉丝