css繪製特殊圖形，meida查詢，display inline-box間隙問題以及calc(）函數

標籤：選擇   ati   文章   而且   表達   使用   int   href   idt   

 本文同時發表於本人個人網站 www.yaoxiaowen.com

距離上一篇文章已經一個月了，相比於寫代碼，發現寫文章的確是更需要堅持的事情。言歸正傳，梳理一下這一個月來，在寫ife任務時，有必要記錄的問題吧。
一，css畫特殊圖形。
在網頁中，需要一些特殊圖形時。比如半圓形，三角形等，我們一般是讓ui切圖，但是實際上，利用css的邊框 （border）屬性，我們可以繪製一些有規律的圖形。
盒模型中元素有四個角，那麼每個角就存在一個弧度的屬性。
先看代碼：

1 .half_circle{2 width: 50px;3 height: 50px;4 border-radius: 25px 0 0 0;5 border-color: blue olivedrab red black;6 border-width: 2px;7 }

然後如下：

當然，這個圖不是很直觀，如果圖形能標註出圓心半徑，邊框長度等資訊，這樣才能一目瞭然，不過比較抱歉，做這樣一個標註圖太麻煩了，所以我就不做了，但是我覺的，學過高中數學的人，應該都能看出來，左上方的那個圓弧到底是怎麼畫出來，總長度是50，左上方圓弧半徑為25，從左上方沿著左邊框和上邊框分別移動25，找到兩個點，然後做個圓弧正好與這兩個點相切，其實算起來圓心正好是這個盒子的正中心。所以其實 border-radius 來畫圓弧的基本原理就是，從某個角作為起點，沿著兩條邊框分別移動x個長度，然後依據這兩個點，做兩條垂直的線，然後交叉點就是圓心，x作為半徑，然後就可以畫圓弧了。

 

然後再看下面兩個圖形的主要代碼：

 1 .four_triangle_1{ 2 width: 0px; 3 height: 0px; 4 border-color:red green blue pink; 5 border-width: 25px; 6 } 7  8 .four_triangle_2{ 9 width: 0px;10 height: 0px;11 border-color:red green blue pink;12 border-width: 20px 10px 30px 40px;13 }

。

仔細琢磨一下，這兩段代碼，以及對應的圖，明白其中的原理就可以了（主要是它交叉的點是怎麼確定的）。然後就可以利用想象力來繪製各種圖了，網上講述css來繪製各種圖形的文章太多了，但是萬變不離其宗，理解了基本的原理，剩下的稍微一琢磨，就可以寫了。

另外，我們在android當中，繪製圓弧都是用 shape資源的corners屬性，假設 使用rectangle，在一個控制項左右繪製 半圓，可是有時候為什麼會繪製的不是我們想要的半圓呢， 那是因為這個控制項的高度是 wrap_content。我們只有知道了控制項的確切高度，才能在兩邊繪製出完美的半圓。

二, 命名規則 Hyphen ？underscore
我之前在html當中命名id或者class時，使用的都是底線（underscore）,因為c，java之類的代碼都是使用底線的，所以也都習慣了，但是我在使用[attribute|=value] 選取器時， 這樣寫的[class|=col],發現根本沒效果，測試了好幾次，在w3c文檔中，關於 [attribute|=value] 選取器 說明時，發現了這樣一句話，
該值必須是整個單詞，比如 lang="en"，或者後面跟著連字號，比如 lang="en-us"。

然後才明白，我代碼中 使用underscore，對於這個選取器沒效果，必須使用 連字號 （Hyphen,有時候也稱為中劃線）。前端的坑真多啊，網上看了一下css命名規範，關於 Hyphen還是 underscore的問題，普遍還是建議的使用 Hyphen的好。（並且這個還牽扯到瀏覽器安全色問題）。

三，media 媒體查詢
在android中，針對不同的手機尺寸解析度，我們使用資源時可以進行區分，比如 drawable-xhpi, mdpi,layout_w360dp之類的，前端也需要面對不同的裝置，以及各種尺寸，那麼解決這個問題的方式就是 media。

@media 查詢，可以針對不同的媒體類型（比如 screen螢幕，speech 發聲裝置等），以及不同的螢幕尺寸，來設定不同的css樣式，
例如這樣

1 @media (min-width: 769px) ｛...｝2 @media (max-width: 768px ) ｛...｝

 

這樣我們就能依據螢幕尺寸是否大於768px，來使用不同的樣式表。
按照規範的定義，是這樣的
媒體查詢包含一個可選的媒體類型和零或多個滿足CSS3規範的運算式來描述媒體特徵,這些運算式會被解析為true或false。
它不僅包含min-width，device-height，orientation這些常用的媒體功能，而且還支援 and，not,only邏輯操作符，以及 使用逗號來分隔列表。這樣它就可以組成各種複雜的查詢條件。

四：display：inline-box 存在多餘的間隙

前幾天碰到了的這個問題，類似下面這樣的，
html代碼:

1 <div id="wrapper">2 <div class="box">1</div>3 <div class="box">2</div>4 <div class="box">3</div>5 <div class="box">4</div>6 </div>

css代碼:

 1 #wrapper{ 2 width: 400px; 3 border: 1px blue dotted; 4 } 5  6 .box{ 7 width: 25%; 8 display: inline-block; 9 border: 1px red solid;10 }

我的本意是，是希望每個box佔據25%寬度，然後正好是一行。這樣的需求還是比較常見的的。
可是看看實際效果吧。
：

 

我使用了display：inline-block，但是每個box後面，竟然產生了空隙。這讓我非常納悶，上網搜尋，才明白其中的原理。
某個大神的部落格解釋的比較清晰：

HTML 中的分行符號、空格符、定位字元等產生了空白符，而這些歸根結底都是字元，那麼它們的大小都是受 font-size 來控制的，字型大小直接導致 inline 或者 inline-block 後元素之間空隙的大小，把 inline-block 元素間的空隙認為總是某個固定大小是錯誤的。

也就說，我們使用inline-box,其實元素性質是inline，但是從一行內來說，其實還是box，所以產生了 white space，這是曆史問題，因為西方文字本來就是使用空格來作為分割，而東方文字則不是如此。
而根據其原理，解決方案其實也很簡單，在父元素當中，添加 font-size: 0，不過這樣解決也會帶來一個麻煩，那就是每個裡面的子項目，font－size都需要重新設定。

五，box-sizing 以及 calc() 函數
上一個問題的解決方式，來看看實際效果。
： 

可以看到，中間的間隙的確為0了，但是四個box依舊沒有充滿一行，原因很簡單，我們設定width:25%,但是根據標準盒子模型，這個width，height，僅僅包含內容區（content），不包括padding，border，更不包括margin。所以雖然我們設定了width:25%,但是每個box，加上border，他們的實際所佔據的寬度是超過25%的，

當然，不包括margin是合乎邏輯的，但是不包括 padding，border，其實不符合人類的思維習慣。所以在比較早的IE瀏覽器盒子模型中，（也叫做 IE怪異模式），它的盒子的width，就是包含 padding和border的。

但是目前的w3c標準的width，height僅僅包含content地區，在有些情境下，會對我們寫布局造成麻煩，就拿上面那個問題來說，寬度是百分比，而不是固定值啊，那怎麼解決這個問題呢。css中有 calc(） 函數，這是個計算函數，使用“+”、“-”、“*” 和 “/”四則運算，以及 百分比、px、em、rem等單位，可以進行混合計算，來動態計算值。

我把上面那個布局css中，設定來寫

1 .box{2 width: calc(25% - 2px);3 height: 50px;4 display: inline-block;5 border: 1px red solid;6 }

：

這樣就能達到我們想要的目的了。
關於 calc()函數還要注意兩點。
1,四個運算子前後要有空格。
2,實際上，calc()函數，並不只是計算 <length>,其他的像<frequency>, <angle>, <time>, <number>, <integer>它也是可以使用的。

解決上述問題，除了 calc() 函數，還有沒有其他辦法呢？
我們把css代碼改成這樣。

1 .box{2 box-sizing: border-box;3 width: 25%;4 display: inline-block;5 border: 1px red solid;6 }

測試一下，也能達到我們想要的效果，因為前面所說的，盒模型僅僅包含content，不直觀，所以我們設定了 box-sizing: border-box,其實就相當於 IE怪異模式一樣的計算方式，將padding，border也計算進盒子width當中。

其他一點感悟：
在寫ife task1_7的時候，這個頁面比較複雜，內容比較多。後來發現自己寫的太亂了，有時候改動 某個地區的某個內容，會影響到其他地區的內容，這就說明，我寫的代碼耦合度太高了，解耦，應該是軟體工程領域的銀彈之一吧。今後在寫html，css時需要注意這個問題，比如float的內容，要把父元素清除浮動；使用 absolute,relative 定位方式時，也要注意讓他們的參考點，盡量是依據於直接父元素。

css繪製特殊圖形，meida查詢，display inline-box間隙問題以及calc(）函數