《css世界》的那些實用技巧

當然我沒扯淡發表於2018-03-27
CSS

下面所有的內容都來至張鑫旭所著的《css世界》。

《css世界》這是一本專門寫css的書，書中並沒有涉及css3的知識，但是它所展現的東西很多都是我從未知道或以前未重視的。這是一本能夠開闊視野的書，我把這本書推薦所有從事前端的人。

下面都是我在看這本書所記錄的一些新奇但實用的佈局技巧。

max-width

  1. max-系列的權重非常的高，甚至超越了!important。如下程式碼p最後的寬度是150px
p {
  width: 200px !important;
  max-width: 150px;
}
複製程式碼
  1. 當min-width與max-width大小有衝突的時候會採用最大原則，即誰大取誰的值。如下程式碼最後的寬度是1400px
.container {
  min-width: 1400px;
  max-width: 1200px;
}
複製程式碼
  1. 當我們實現一個元素高度逐漸變大的效果，但是我們又不知道這個元素的具體高度，這個時候我們就可以用max-height 的方式。我們不需要給以具體高度值就可以實現這個效果。當然這樣做會出現元素高度達到實際高度但是動畫還沒結束。會有動畫延遲的感覺。
.element {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s;
}
.element.active {
  max-height: 666px; /* 一個足夠大的最大高度值 */
}
複製程式碼

content attr

類似於img的 alt。

.icon:before {
  content: attr(data-title);
}
複製程式碼

padding 與 margin

《css世界》的那些實用技巧

這種三道扛的效果我們經常要遇到，我們可以藉助 background-clip 與padding 實現這種效果。不需要任何圖片。

.icon-menu {
  display: inline-block;
  width: 140px;
  height: 10px;
  padding: 35px 0;
  border-top: 10px solid;
  border-bottom: 10px solid;
  background-color: currentColor;
  background-clip: content-box;
}
複製程式碼

《css世界》的那些實用技巧
當我們要實現這種兩端對齊的效果,我們給每一個列表都設定margin-right然後去掉最後一個的margin-right。實現這種效果需要藉助css3的新增選擇器，有時候還需要js,或者直接用flex佈局。但我們利用給父級margin 負值就可以輕鬆實現。

ul {
  margin-right: -20px;
}
ul > li {
  float: left;
  width: 100px;
  margin-right: 20px;
}
複製程式碼

border

  1. 因為 ie6 下 border 設定虛線顯示的是圓點。所以用這種方法可以在ie6下實現一個圓。
.box {
  width: 150px;
  height: 150px;
  /* 超出區域隱藏，只顯示一個圓 */
  overflow: hidden;
}
.dotted {
  width: 100%;
  height: 100%;
  border: 149px dotted #cd0000;
}
複製程式碼

《css世界》的那些實用技巧
利用邊框製作三角形其實是一個廣為人知的方法，還是寫一下吧。

注意：邊框也是css標準的上右下左的設定順序，需要上面方向的三角形就給它相反的方向設定想要的顏色，其他方向都設為透明色。

div {
  width: 0;
  border: 10px solid;
  border-color: #f30 transparent transparent;
}
複製程式碼

ex

ex是一個被忽略的距離單位，它表示一個小寫字母x(x、y、z的x)的高度。是一個相對單位，它和父元素的字號有關係。

《css世界》的那些實用技巧
這種圖示和字垂直居中的佈局我們經常見到，只要這樣設定就可以簡單實現，而且還不會受字號，頁面高度的影響。

.icon-arrow {
  display: inline-block;
  width: 20px;
  height: 1ex;
  background: url(xxx.png) no-repeat center;
}
複製程式碼

vertical-align

可以利用 vertical-align 實現水平垂直居中，這種定位方法不用知道居中元素的寬高度，相容ie6

下面模擬的是一個全屏的對話方塊。這種居中方法核心是父元素的text-aglin:center，在寫一個居中元素的兄弟元素給與display: inline-block;height: 100%;vertical-align: middle;三個屬性，自身設定display: inline-block; vertical-align: middle;

<div id="container">
  <div id="dialog">....</div>//要居中的元素
  <div id="assist"></div>
</div>
複製程式碼
#container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5), none;
  text-align: center;
  white-space: nowrap;
  font-size: 0;
  z-index: 99;
}
#dialog {
  display: inline-block;
  vertical-align: middle;
}
#assist {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
複製程式碼

BFC

以前就知道overflow:hidden一種觸發BFC的方法，其實以下都能出發BFC。

  • <html>根元素；
  • float 的值不為 none；
  • overflow 的值為 auto、scroll 或 hidden；
  • display 的值為 table-cell、table-caption 和 inline-block 中的任何一個；
  • position 的值不為 relative 和 static。

overflow

  1. 滾動條是html所產生的所有想要頁面禁止出現滾動條沒必要拉著body一起設定overflow:hidden，

  2. 當頁面載入非常慢的時候會出現頁面向左偏移的情況，因為滾動條佔據了body的寬度導致body偏移。下述程式碼是讓body佔據整個 window 的寬度。這樣不會出現頁面載入慢時導致居中元素偏移的問題。(現在使用者寬頻大幅度提升基本上不會有這種情況了)

html {
  overflow-y: scroll; /* for IE8 */
}
:root {
  overflow-y: auto;
  overflow-x: hidden;
}
:root body {
  position: absolute;
}
body {
  width: 100vw;
  overflow: hidden;
}
複製程式碼

absolute

當我使用絕對定位的時候，總會老老實實的子決父相。但是無依賴的絕對定位效果會更好。

無依賴的佈局，即不使用傳統的子決父相的方式。不使用left和top控制，用 margin 或者 transform 來控制位置。

.icon-warn {
  position: absolute;
  margin-left: -20px;
  width: 20px;
  height: 20px;
  background: url(warn.png) no-repeat center;
}
複製程式碼
  1. absolute 與 text-align 相配合實現水平居中。

《css世界》的那些實用技巧
程式碼如下

<p > <img src="1.jpg" > </p > 
複製程式碼
p {
  text-align: center;
}
img {
  position: absolute;
  margin-left: ...;
}
複製程式碼

雖然本示例中圖片位置確實受 text-align 屬性影響，但是並不是 text-align 和 absolute 元素直接發生關係，absolute 元素的 display 計算值是塊狀的，text-align是不會有作用的。這裡之所以產生了位置變化，本質上是“幽靈空白節點”和“無依賴絕對定位”共同作用的結果


“幽靈空白節點”是內聯盒模型中非常重要的一個概念，具體指的是：在 HTML5 文件宣告 中，內聯元素的所有解析和渲染表現就如同每個行框盒子的前面有一個“空白節點”一樣。這 個“空白節點”永遠透明，不佔據任何寬度，看不見也無法通過指令碼獲取，就好像幽靈一樣， 但又確確實實地存在，表現如同文字節點一樣，因此，我稱之為“幽靈空白節點”。


當然我們是需要知道內聯元素的寬度的。margin-left的值與負的一般寬度。與父元素position:relative 然後定位元素設定left:50%的方法類似。但不會有層級問題。


2. absolute 與 overflow 關於絕對定位元素是否會受到`overflow`的影響有如下判斷

overflow 不是定位元素，同時絕對定位元素和 overflow 容器之間也沒有定位元素 如果 ，則overflow 無法對 absolute 元素進行剪裁。

根據上述所言。無依賴的absolute不會被父級的overflow所裁剪。

注意：由於 transform 在各個瀏覽器對overflow的支援不一樣所以當元素還是被裁剪的話，試著找找是不是transform的原因


3. absolute 與流體自適應

當一個絕對定位元素的相對方向都有定位的時候該元素就會擁有一種和文件流相似的流體特性如

.box {
position: absolute;
left: 0; right: 0;
}
複製程式碼

當一個絕對定位元素有如下的設定就能覆蓋整個瀏覽器。注意它的寬度高度是一種"格式化寬度/高度"，於width:100%完全不同。給與margin也不會出現超出螢幕。

.box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
複製程式碼

根據上面所說可以使用margin:auto實現水平居中的效果,如果有沒有left: 0; right: 0;這種能夠激發流體特性的屬性就不會有這種居中效果。當然想要用margin:auto auto實現垂直水平居中是不能的。畢竟在標準文件流也沒有這種效果。

程式碼如下

.element {
  width: 300px;
  height: 200px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
複製程式碼

fixed

fixed也可以用無依賴佈局，如下實現一個在元素內部的固定定位

<div class="father" > 
    <div class="son" > </div > 
</div >
複製程式碼
.father {
  width: 300px;
  height: 200px;
  position: relative;
}
.son {
  width: 40px;
  height: 40px;
  position: fixed;
  margin-left: -40px;
}
複製程式碼

與絕對定位的無依賴一樣不能使用left等定位屬性。

獲取滾動條寬度

如下程式碼可以獲取滾動條寬度，避免了禁用滾動條之後的頁面偏移現象。

//顯示
var widthBar = 17,
  root = document.documentElement;
if (typeof window.innerWidth == "number") {
  widthBar = window.innerWidth - root.clientWidth;
}
root.style.overflow = "hidden";
root.style.borderRight = widthBar + "px solid transparent";
//隱藏
var root = document.documentElement;
root.style.overflow = "";
root.style.borderRight = "";
複製程式碼

z-index

z-index在css2 中只對定位元素有用但是在 css3 中加入了對flex的支援

《css世界》的那些實用技巧

font-size

《css世界》的那些實用技巧
這種效果也可以藉助vertical-align和font-size實現。

p {
  font-size: 16px;
  line-height: 1.5;
}
p > img {
  vertical-align: -25%;
  vertical-align: 0.6ex；;
}
複製程式碼

子元素vertical-align使用百分比可以實現圖示與文字居中的問題而且不受字型大小的影響，但是會受到行高的影響。如果是 ex 不僅可以實現而且不會受到行高的影響。

text-decoration

在中文下text-decoration有可能與下一行的字出現重疊這時候我們用邊框來作為下劃線，邊框不要設定顏色，它會預設的和字型一個顏色。

顯示與隱藏

利用visibility和絕對定位來實現隱藏而且不佔位置。或者透明度加絕對定位

.hidden {
  position: absolute;
  visibility: hidden;
}

.opacity {
  position: absolute;
  opacity: 0;
  filter: Alpha(opacity=0);
}
複製程式碼

visibility 與 display 的小區別

visibility的子元素會被隱藏但是如果設定了visibility:visible就會顯現出來，但是display:none的元素就沒有這樣的效果。


這些就是我閱讀《css世界》所學到的技巧，更多內容請閱讀原書



引用： 《css世界》

相關文章