DAY3 圣杯布局 - 三个栏的C位争夺战(上)

圣杯和双飞翼，是布局PC常见的方法。上下有header,footer，中间三栏center,left,right并排。
明天会总结两个的不同，内容有点硬，坚持住看完压!!各位幼鸟加油唷~~
html布局

基本盘

有点不太懂 可以看个DAY1
圣杯html的基本结构是，<main>、<aside id="left">、<aside id="right">

  1. 用父元素<div id="container">包起来这三个
  2. 三个都有属性class:"column"

css的第一步设定是

  1. Reset margin=0 padding=0
  2. 设定left right宽度(自订)
  3. 设定<main> width:100%;
<body>
    <header>header</header>
    <div id="container">
        <main class="column">也可以叫他center <br> 放在最前面是为了SEO</main>
        <aside id="left" class="column">left</aside>
        <aside id="right" class="column">right</aside>
	</div>
	<footer>footer</footer>
</body>

body, h1, h2, h3, p, ul, ol, li, th, td, img{
    margin: 0px;padding: 0px;
}    /*去margin padding 可以复习day1*/
header{
    text-align: center;
    background-color:aquamarine;
}
main{
    background-color: black;
    width: 100%;
    color: darkgrey;
}
#left{
    background-color:crimson;
    width: 300px;
}
#right{
    background-color: cadetblue;
    width: 200px;
 }
footer{
    background-color:darkgoldenrod;
}

圣杯step1建立5个div

Float毒 和它的解药-Clear

圣杯和双飞翼都需要用到前一篇的float。不记得float的小小鸟 姊送你个回DAY2的通道。
有个前端传说：float是魔鬼专门影响别人，clear是小白只会影响自身。~~法力有点弱馁clear。~~前一篇说过，float会影响到後面元素的排版，很明显footer准备遭殃了。幼鸟们来帮他炼制解药吧

.column{
    float:left;
    height:100px;  /*让三栏等高*/
}
footer{
	clear:left;
}

圣杯step2中间三栏float 帮footer clear

拔拔帮你管 - 父元素处理 中间栏大小自适应

#container{
	padding-left:300px;   /*左边栏宽*/
	padding-right:200px;  /*右边栏宽*/
}

将<main>的父元素<div id="container">设定左边padding=左边栏宽，右边padding=右边栏宽。
虽然<main><aside id="left"><aside id="right">有float属性，父元素是塌陷的，但对子元素还是有那麽点影响力的。

插个话 ?稚鸟的疑惑?

看到网路上有人说圣杯是用padding，但其实我用margin实作结果一样。希望有看到的大神可以告诉我为甚麽一定要用padding，而不使用或比较不建议使用margin的原因~~tks
圣杯step3空出左右空位

左栏、右栏不要皮了 回去位置上坐好 - margin负值

margin负值，是一个稚鸟觉得有点tricky的地方，要耗点脑力理解地~~

  • margin-left、margin-top： 元素直接向上、左移动
  • margin-right、margin-bottom：元素不动，自身宽度在外界看起来少了x单位
#left{
	position:relative;
	margin-left:-100%;  /*padding最小为0,所以不要问为甚麽不用padding-left*/
	left:-300px;   /*左边栏宽*/
}
#right{
	margin-right:-200px;  /*右边栏宽*/
}
  • margin-left:-100%，与<main>的起点对齐，覆盖在<main>上方。
  • 再用left：-300px往前拉到位，前面需加position:relative，要不然没意义。
  • margin-right:-200px，外界看起来少200px=隐形，不占空间。但自身不受影响，所以还是看的到。

圣杯step最後 两边归队

看的到的隐形<aside id="right">为甚麽会往上跑?

在还没有设置container 时，因为「红红」跑去「小黑」上面(透过margin-left:-100%:)，「蓝灰」应该顺势黏到「小黑」屁股後面。不过有container，「蓝灰」只好被迫挤下去。
因为margin-right:-200px，「蓝灰」瞬间变阿飘，成为「小黑」专属背後灵。
圣杯解释marginRight负值
圣杯解释marginRight负值_取消

视窗缩小到太小时，圣杯大跑版怎麽办?

大跑版的原因是，当浏览器视窗小到，使中间自适应栏小於左边栏宽度时，让margin-left:-100%，无法完成往上一列的目的，导致大跑版。可以在container增加min-width=max{左边栏宽,右边栏宽}。

container{
	min-width:200px;
}

时间：9/1 10:48PM
音乐： 运气来得若有似无 告五人
饮料：白开水
地点：房间的深蓝色皮沙发
状态：第三天结束了，有点没把握文章大家的接受度，
也怕後面写不出东西，更有可能的是实作不出来 QQ


<<:  Day8. functional programming in Ruby - Block Part1

>>:  Day 08 Azure cognitive service: object detection- 匡出照片中的喵

《赖田捕手：番外篇》第 38 天：用 Netlify Functions 布署 Line Bot

《赖田捕手：番外篇》第 38 天：用 Netlify Functions 布署 Line Bot 从...

企划实现(12)

FB登入 第10步：开启 /app/res/values/strings.xml 档案。 FB会自动...

Day7 - 使用 Heroku 建立一个网站

GitHub 网址：https://github.com/ Heroku 网址：https://w...

予焦啦！附录：那些作业系统的巨人们与参考资料

没有人是一座孤岛，而技术与软件亦然。早在 Hoddarla 抵达系列文本篇最後的基本命令列功能之前、...

Day. 15 Bulls and Cows

Leetcode #299. Bulls and Cows 这一题简称1A2B，是一款猜数字的游戏，...