css

写个淘宝首页需要几天

垂直居中

提示

利用CSS进行元素的水平居中，比较简单，行内元素设置其父元素的text-align:center，块级元素设置其本身的 margin-left和margin-right为auto即可。设置垂直居中则有些麻烦，现整理记录如下。

line-height方法

demo

通过设置子容器的line-height, 让line-height的高度大于font-size来实现垂直居中。或者设置子容器的height与line-height相等来解决。

注意：line-height方法适用于一行文字的垂直居中，多行会有问题。

垂直居中图片

demo

给父容器一个line-height，然后设置子容器vertical-align:middle;即可实现图片的垂直居中。

CSS Table方法

demo

父容器设置display: table; 子容器设置display: table-cell; vertical-align: middle; 即可实现居中，且内容为多行也可以居中。据说ie7的bug，子容器要用display: inline-block;解决。

绝对定位和负外边距

demo

父容器相对定位，子容器绝对定位，子元素的left、top为50%，这时中心是子元素的左上角，所以要向top、left移动元素宽、高的一半。设置margin为负值即可。若知道子元素的固定宽高更适合。这种方式设置了子元素的水平垂直都居中。

绝对定位和拉伸

demo

子绝父相，记得曾经稀里糊涂面试了几个前端开发后学会了这个词。通过设子元素top, left, right, bottom都为0，不仅实现了垂直居中，水平方向也居中了。（不支持ie7及以下，难道还有人用IE7 #_#）

等上下的padding

demo

很有意思的方法，都留出padding值，使内容居中，还不用定位。在CSS中设置的顶部和底部的两个等高距离的填充。确保在子容器的内容将是垂直的。

兄弟元素浮动弟元素浮动

demo

兄弟元素浮动，高度为50%，设置负margin值，为居中元素高度的一半，即可垂直居中。不过引入了空标签.floater;

Flexbox布局

demo

最简单的一种布局方式，在写法上。之前工作中写过flex，留下了阴影，导致至今听到flex就不寒而栗。Flexbox为CSS3属性，对于旧式浏览器兼容性不好，慢慢会流行，手机端的布局貌似已经用上了。

垂直水平居中

CSS布局分块：

盒子内部的布局
- 文本的布局
- 盒模型本身的布局
盒子之间的布局 visual-formatting
- 脱离正常流（normal flow）的盒子布局
  - absolute布局
  - float布局
- 正常流（normal flow）的盒子布局
  - BFC布局
  - IFC布局
  - FFC布局
  - table布局
  - CSS grid布局

所有的CSS布局其实都是围绕着这些布局模块来的，水平垂直居中也是一样。

1. 文本的垂直水平居中

line-height + text-align: center;

demo

仅适合单行

2.利用盒模型的垂直水平居中

一般我们说的盒模型指的是块级盒的盒模型，也只有块级盒的盒模型用的多一点，块级盒的block-level box又是分别由margin-box, border-box, padding-box, content-box。

padding填充

给个链接

calc()计算的方式

我觉得用padding来设置边距有点问题，实际不应这么做，当然这也只是我现在的想法。

margin填充

水平居中靠谱

使用margin填充需要知道元素的宽度，这点不灵活，CSS3 width: fix-content，可动态计算元素的宽度，可以解决问题。

fix-content

双飞翼、圣杯布局

双飞翼

<div class="header">header</div>

<div class="content">
  <div class="middle">
    <div class="inner">inner</div>
  </div>

  <div class="left">left</div>
  <div class="right">right</div>
</div>

<div class="footer" >footer</div>

.content {
  overflow: hidden;
}

.middle,
.left,
.right {
  float: left;
}

.middle {
  width: 100%;
}

.inner {
  margin: 0 100px;
}

.left,
.right {
  width: 100px;
}

.left {
  margin-left: -100%
}

.right {
  margin-left: -100px;
}

圣杯布局

<div class="header">header</div>
<div class="content">
  <div class="middle">middle</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<div class="footer">footer</div>

.content {
  overflow: hidden;
  padding: 0 100px;
}

.middle,
.left,
.right {
  float: left;
}

.middle {
  width: 100%
}

.left,
.right {
  width: 100px;
}

.left {
  position: relative;
  margin-left: -100%;
  left: -100px;
}

.right {
  margin-right: -100px;
}

三列布局

绝对定位法
流体布局
BFC三栏布局
BFC，Block Formatting Context，块级格式上下文。是一个独立渲染的区域,与外部区域互不影响。
BFC规则：
1. 内部的Box在垂直方向，一个接一个的放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
3. 每个元素的marginbox的左边，与包含块border box的左边相接触（对于从左往右的格式化,否则相反）。即使存在浮动也是如此。
4. BFC区域不会与float box重叠。
5. BFC就是页面上一个隔离的独立容器，容器里面的元素不会影响到外边的元素。反之亦如此。
6. 计算BFC高度时，浮动元素也参与计算。
如何生成BFC:
1. 根元素？
2. float属性值不为none
3. position为absolute或者fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不为visible
用处：（稍后补例子）
1. 两栏布局
2. 清除内部浮动
3. 防止垂直margin重叠

绝对定位布局、流体布局、BFC三栏布局的共性缺点，就是主体内容放在最后加载，影响了用户体验。

布局题：高度为宽度的一半

提示

实现一个布局，div宽度占80%，高度为宽度的一半。

高度为宽度的一半

<div class="con">
  <div class="box">
    this is page 1
  </div>
</div>

方式一

.con {
  width: 80%;
  height: 0;
  padding-bottom: 40%;

  /* 此处为了展示形象，和题目本身无关 */
  margin: auto;
  background: #777;
}

方式二

 .con{
  width: 80vw;
  height: 40vw;

  /* 此处为了展示方便 */
  background-color: #999;
  margin: 0 auto;
}

实现正方形布局

<body>
  <div class="con">
    <span>6666</span>
  </div>
  <div class="con">
    <span>6666</span>
  </div>
</body>

body {
  font-size: 0;
  text-align: center;
}

.con {
  display: inline-block;
  width: 50%;
  background-color: #ddd;
  font-size: 12px;
  position: relative;
  vertical-align: middle;
}

.con:nth-child(2) {
  background: orange;
}

.con::before {
  content: '';
  display: inline-block;
  padding-bottom: 100%;
  width: .1px;
  vertical-align: middle;
}

span {
  display: inline-block;
  vertical-align: middle;
  font-size: 4em;
  color: #fff;
}