者：Isabella

博客：https://www.jianshu.com/u/e8ffabd1fca9

先看我

移動(dòng)端（Android/iOS）開(kāi)發(fā)的小伙伴，是不是覺(jué)得不需要學(xué)習(xí)web開(kāi)發(fā)了？不能因?yàn)槭莣eb相關(guān)內(nèi)容的而望而旋走是不是？畢竟大家都是大前端的，互相了解才能師夷長(zhǎng)技以制夷對(duì)不對(duì)？（霧）

移動(dòng)開(kāi)發(fā)不等于只有app開(kāi)發(fā)，所有的技術(shù)浪潮都可以融入到移動(dòng)開(kāi)發(fā)體系中。作為前端工程師，無(wú)論是對(duì)頁(yè)面的實(shí)現(xiàn)方式要求高大上，表現(xiàn)形式的完美，還是性能的極致，都是我們不斷追求的目標(biāo)。

由于前端技術(shù)棧的不斷更新，效率提高，同樣的前端人數(shù)，能完成比以前更多的職責(zé)范圍。在不少企業(yè)，1個(gè)優(yōu)秀的前端工程師就能搞定Web和移動(dòng)端的開(kāi)發(fā)，甚至負(fù)責(zé)一部分后端。移動(dòng)端的同學(xué)還不趕緊上web的車(chē)？

css和html的關(guān)系？

既然總是先看臉，那就開(kāi)始CSS的表演吧~

在Android開(kāi)發(fā)中，都在xml里寫(xiě)app的布局，那web中的html和css，到底是什么關(guān)系呢？

看圖比較直觀：

1

2

在web中，HTML是骨架，CSS是皮膚，JavaScript是肌肉。

而如果用一扇門(mén)比喻三者之間的關(guān)系：HTML是門(mén)的門(mén)板，CSS是門(mén)上的油漆或者花紋，JavaScript則是門(mén)的開(kāi)關(guān)。

現(xiàn)在認(rèn)真認(rèn)識(shí)下CSS~

了解CSS

CSS的官方名字叫做層疊樣式表，他的出現(xiàn)是為了解決內(nèi)容和表現(xiàn)分離的問(wèn)題，一般存放在 .css 文件里。

CSS的出現(xiàn)，拯救了混亂的HTML，讓網(wǎng)頁(yè)的形式更加豐富多彩。

它最大貢獻(xiàn)就是： 讓HTML從樣式中解脫苦海， 實(shí)現(xiàn)了HTML專(zhuān)注去做結(jié)構(gòu)呈現(xiàn)。 而樣式交給CSS后，你完全可以放心地早點(diǎn)洗洗睡了！

如果JavaScript是網(wǎng)頁(yè)的魔法師，那么CSS就是網(wǎng)頁(yè)的美容師。

論美容師的重要

理論上講它可以規(guī)定網(wǎng)頁(yè)的一切表現(xiàn)，位置、顏色、大小、距離…設(shè)計(jì)稿上的所有效果都可以借助它一一呈現(xiàn)，但是在實(shí)際應(yīng)用中配合功能和性能以及各方面的要求，導(dǎo)致設(shè)計(jì)師的構(gòu)想并不一定能夠完整表達(dá)。

各類(lèi)布局，都是為了美觀，而布局之美，根本是要理解透盒子模型，熟悉各種布局。

沒(méi)有一種東西是絕對(duì)好的，只有不斷地進(jìn)步。

Remember that.

CSS組成與規(guī)則

組成：

兩個(gè)主要部分：選擇器，一條或者多條聲明。

樣式規(guī)則：

使用HTML時(shí)，需要遵從一定的規(guī)范。CSS亦如此，要想熟練地使用CSS對(duì)網(wǎng)頁(yè)進(jìn)行修飾，首先需要了解CSS樣式規(guī)則，具體格式如下：

理論比較枯燥，看實(shí)際來(lái)感受下css的魅力吧！

怎樣用css實(shí)現(xiàn)下面布局效果呢？

九宮格圖

從上圖我們可以分析出如下需求：

• 圖片大小自適應(yīng)；

• 圖片個(gè)數(shù)不同時(shí)，圖片按照指定方式排列；

• 圖片相鄰處有1px空白間隙。

以圖6為例，

來(lái)看如何用css一步一步實(shí)現(xiàn)效果。

float！

最容易想到的，也是最簡(jiǎn)單的方案，就是 float 布局：

• 圖片大小自適應(yīng)：寬度百分比，高度使用 padding-top 百分比

• 圖片個(gè)數(shù)不同時(shí)，圖片按照指定方式排列：使用 nth-child 偽類(lèi)指定不同情況下的元素大小

• 圖片相鄰處有1px空白間隙：使用 border-box + border模擬邊框

<div class="float">
<div class="item">1</div>
...
<div class="item">6</div>
</div>

.float {
overflow: hidden;
}
.item {
float: left;
padding-top: 33.3%;
width: 33.3%;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
}
.item:nth-child(1) {
padding-top: 66.6%;
width: 66.6%;
}
.item:nth-child(2), .item:nth-child(3), .item:nth-child(6) {
border-right: 0 none;
}
.item:nth-child(1), .item:nth-child(2) {
border-top: 0 none;
}

但實(shí)際效果并不理想，如下圖：

float布局效果

可以看到 float 布局不能做到真正的流體布局。至少width要自己去算百分比。它的優(yōu)點(diǎn)是DOM結(jié)構(gòu)十分簡(jiǎn)單，缺點(diǎn)是容易出現(xiàn)空白間隙錯(cuò)位，優(yōu)缺點(diǎn)都十分明顯，它更適用于js計(jì)算的版本。

還有誰(shuí)？flex！

flex，即伸縮布局盒模型（Flexible Box）

• 可以將 flex 布局下的元素展示在同一水平、垂直方向上；

• 可以支持自動(dòng)換行、換列；

• 可以指定 flex 布局下的元素如何分配空間，可以讓元素自動(dòng)占滿父元素剩余空間；

• 可以指定 flex 布局下的元素的展示方向，排列方式

使用 flex 布局與 float 布局不同的地方在于，移動(dòng)端目前主要還是-webkit-box，因此圖片個(gè)數(shù)不同時(shí)，我們需要使用不同的html，組合出不同的塊。

flex布局上下劃分

使用傳統(tǒng)css文檔流自上而下的方式來(lái)劃分，稱(chēng)為上下劃分，如下圖:

上面一塊包含左側(cè)1個(gè)2/3的大塊，右側(cè)2個(gè)1/3的小塊，下面一塊則是3個(gè)1/3的小塊。

我們指定2/3的大塊寬度是66.6%，1/3的小塊寬度是33.3%（實(shí)際可以使用-webkit-box-flex來(lái)分配，這里為了下面的計(jì)算方便）。

主要實(shí)現(xiàn)：

<div class="wrap-box wrap-6">
<div class="flex-inner">
<div class="flex-box1 flex-item"></div>
<div class="flex-box2">
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
</div>
<div class="flex-inner">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
</div>

.wrap-box {
display: -webkit-box;
}

.flex-inner {
-webkit-box-flex: 1;
display: -webkit-box;
}

.flex-item {
-webkit-box-flex: 1;
position: relative;
}
.wrap-6 {
-webkit-box-orient: horizontal;
}
.wrap-6 .flex-inner {
-webkit-box-flex: 0;
-webkit-box-orient: vertical;
}
.wrap-6 .flex-inner:first-child {
width: 66.6%;
}
.wrap-6 .flex-inner:last-child {
width: 33.3%;
}
.wrap-6 .flex-item {
padding-top: 100%;
}
.wrap-6 .flex-box2 .flex-item {
padding-top: 50%;
}
.wrap-6 .flex-box2 {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.wrap-6 .flex-inner:first-child,
.wrap-6 .flex-box2 .flex-item:first-child {
margin-right: 1px;
}
.wrap-6 .flex-box1,
.wrap-6 .flex-inner:last-child .flex-item:first-child,
.wrap-6 .flex-inner:last-child .flex-item:nth-child(2) {
margin-bottom: 1px;
}

實(shí)現(xiàn)效果：

中間那條豎空白間隙錯(cuò)位了，為什么？按照預(yù)期我們上面塊左側(cè)寬度66.6%，下面塊左側(cè)寬度33.3% + 33.3%，兩個(gè)寬度應(yīng)該相等才對(duì)。

然而我們忽略了flex一個(gè)重要特性，子元素會(huì)自動(dòng)占滿父元素剩余空間，這時(shí)子元素寬度計(jì)算受flex控制，下面塊的3個(gè)子元素寬度計(jì)算并非一定是相等的，會(huì)有些許差異，此時(shí)66.6% != 33.3% + 33.3%。

怎么破！別急，冷靜下來(lái)重新思考如何劃分。

flex左右劃分

問(wèn)題在于豎間隙涉及到的左右側(cè)寬度計(jì)算不穩(wěn)定，既然如此，我們可以考慮依據(jù)豎間隙左右劃分，排除不穩(wěn)定因素，如下圖：

這樣就解決了豎間隙錯(cuò)位問(wèn)題，但我們依然有所擔(dān)心，中間的橫間隙會(huì)錯(cuò)位嗎？我們來(lái)算一下。

整體父元素寬度確定，為W；整體父元素高度由子元素?fù)伍_(kāi)，不確定；

左側(cè)大塊高度：左側(cè)flex父元素寬度（W * 66.6%） * 100% = W * 66.6%；

左側(cè)小塊高度：左側(cè)flex父元素寬度（ W * 66.6%） * 50% = W * 33.3%；

右側(cè)小塊高度：右側(cè)flex父元素寬度（ W * 33.3%） * 100% = W * 33.3%。

依然是66.6%與33.3% + 33.3%的等式，但這次高度計(jì)算會(huì)受 flex 影響嗎？

不會(huì)，因?yàn)榇藭r(shí)整體父元素的高度是不確定的，是由子元素內(nèi)容撐開(kāi)的，flex的高度也是由子元素來(lái)?yè)伍_(kāi)的。

最終 66.6% === 33.3% + 33.3%。

實(shí)際效果：

Perfect~

css是不是很好用？

這篇的概念先介紹這么多了，后續(xù)再做深入學(xué)習(xí)~

參考文檔：

• Flex布局的基本概念https://juejin.im/post/5c0731e951882516da0e373d

• 我就是要用CSS實(shí)現(xiàn)http://www.alloyteam.com/2016/01/let-see-css-world

與內(nèi)容相關(guān)聯(lián)文章：

• 蘋(píng)果手機(jī)不能在中國(guó)銷(xiāo)售了！那iOS開(kāi)發(fā)豈不是。。。

• 你真的認(rèn)識(shí)View嗎？
  

• 分頁(yè)加載哪家強(qiáng)？Paging 來(lái)幫忙！

等等，先別走！「碼個(gè)蛋」又有活動(dòng)了！參與活動(dòng)不但可以培養(yǎng)自己的好習(xí)慣，還能拿到「碼個(gè)蛋」IP系列專(zhuān)屬獎(jiǎng)品，速度要快...

今日問(wèn)題：

移動(dòng)端的小伙伴上web的車(chē)了嗎？

留言格式：

打卡x 天，答：xxx。

告訴你一個(gè)小技巧：

只需3步，你將不會(huì)錯(cuò)過(guò)任何一篇文章！