圣杯布局 和 双飞翼布局 小记

主要内容	学习文献
圣杯布局	几种常见的布局- 掘金
双飞翼布局	实现三栏布局的几种方法 —— github
HTML语义化标签
	鱼人码头 三栏布局见解 ——— 全面
	四种方法介绍三栏布局 - 优快云

圣杯 与 双飞翼 布局两者的不同之处，在于圣杯布局的 左中右 三列容器没有多余的子容器来参与布局； 而双飞翼布局三列容，中间的middle多了一个子容器的存在；

圣杯布局是通过父元素的padding 空出左右两列的宽度 来实现效果的；

双飞翼布局是通过控制middle 的子容器的 margin 或者 padding 空出左右两列的宽度 来实现的；

---

1、圣杯布局：

具体实现步骤 ： 圣杯布局实现步骤

.g-container {
    position: relative;
    height: 100vh;
    min-width: 400px;
    /* 空出左右两栏的宽度 */
    padding: 0 200px;
}

.g-container > div {
    height: 100vh;
    float: left;
    line-height: 100vh;
    text-align: center;
    font-size: 2vw;
    color: #fff;
}

.g-middle {
    position: relative;
    width: 100%;
    background: #cc6630;
}

.g-left {
    position: relative;
    left: -200px;
    width: 200px;
    margin-left: -100%;
    background: #ffcc00;
}

.g-right {
    position: relative;
    right: -200px;
    width: 200px;
    margin-left: -200px;
    background: #ffbcc8;
}

2、双飞翼布局:

最原始的办法就是利用float来实现，代码如下：

.g-container {
    position: relative;
    height: 100vh;
    min-width: 400px;
}

.g-container > div {
    height: 100vh;
    float: left;
    line-height: 100vh;
    text-align: center;
    font-size: 2vw;
    color: #fff;
}

.g-middle {
    position: relative;
    width: 100%;
    background: #cc6630;

}
.g-middle-inner {
    margin: 0 200px;
}

.g-left {
    position: relative;
    width: 200px;
    background: #ffcc00;
    margin-left: -100%; /* 向左移动100%的距离 */
}

.g-right {
    position: relative;
    width: 200px;
    background: pink;
    margin-left: -200px;  /* 向左移动自身的距离  */
}

<div class="g-container">
	<div class="g-middle">
		<div class="g-middle-inner">双飞翼布局</div>
	</div>
	<div class="g-left"></div>
	<div class="g-right"></div>
</div>

---

1、对于Web设计，我们经常会分为三个层： (1)、结构层；(2)、表现层；(3)、行为层； 与此对应 HTML、CSS 和 JavaScript；

同时在HTML5中也新添加了一些像 header 、footer、article 等语义化的标签

2、对于语义化标签的意义：

1）、语义化标签，保证页面去掉样式具有良好的结构和可读性，同时符合Web标准；
2）、语义化标签更清楚的表达网站的逻辑与内容，搜索引擎更加友好，更利于解析上下文环境，抓取各个关键字的权重；
3）、尽可能使用有语义的标签在合适的地方来替代无语义标签div、span；
4）、代码的可读性与可维护性更强；

---

3、Html中空格：