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

時間 2019-11-29

標籤 css世界那些實用技巧欄目 CSS 简体版

原文原文鏈接

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

《css世界》這是一本專門寫css的書，書中並無涉及css3的知識，可是它所展示的東西不少都是我從未知道或之前未重視的。這是一本可以開闊視野的書，我把這本書推薦全部從事前端的人。html

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

max-width

max-系列的權重很是的高，甚至超越了!important。以下代碼p最後的寬度是150px

p {
  width: 200px !important;
  max-width: 150px;
}
複製代碼

當min-width與max-width大小有衝突的時候會採用最大原則，即誰大取誰的值。以下代碼最後的寬度是1400px

.container {
  min-width: 1400px;
  max-width: 1200px;
}
複製代碼

當咱們實現一個元素高度逐漸變大的效果，可是咱們又不知道這個元素的具體高度，這個時候咱們就能夠用max-height 的方式。咱們不須要給以具體高度值就能夠實現這個效果。固然這樣作會出現元素高度達到實際高度可是動畫還沒結束。會有動畫延遲的感受。

.element {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s;
}
.element.active {
  max-height: 666px; /* 一個足夠大的最大高度值 */
}
複製代碼

content attr

相似於img的 alt。css3

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

padding 與 margin

這種三道扛的效果咱們常常要遇到，咱們能夠藉助 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;
}
複製代碼

當咱們要實現這種兩端對齊的效果,咱們給每個列表都設置 margin-right而後去掉最後一個的 margin-right。實現這種效果須要藉助css3的新增選擇器，有時候還須要js,或者直接用 flex佈局。但咱們利用給父級 margin 負值就能夠輕鬆實現。

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

border

由於 ie6 下 border 設置虛線顯示的是圓點。因此用這種方法能夠在ie6下實現一個圓。

.box {
  width: 150px;
  height: 150px;
  /* 超出區域隱藏，只顯示一個圓 */
  overflow: hidden;
}
.dotted {
  width: 100%;
  height: 100%;
  border: 149px dotted #cd0000;
}
複製代碼

利用邊框製做三角形實際上是一個廣爲人知的方法，仍是寫一下吧。

注意：邊框也是css標準的上右下左的設置順序，須要上面方向的三角形就給它相反的方向設置想要的顏色，其餘方向都設爲透明色。佈局

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

ex

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

這種圖標和字垂直居中的佈局咱們常常見到，只要這樣設置就能夠簡單實現，並且還不會受字號，頁面高度的影響。

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

vertical-align

能夠利用 vertical-align 實現水平垂直居中，這種定位方法不用知道居中元素的寬高度，兼容ie6flex

下面模擬的是一個全屏的對話框。這種居中方法核心是父元素的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。ui

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

overflow

滾動條是html所產生的全部想要頁面禁止出現滾動條不必拉着body一塊兒設置overflow:hidden，
當頁面加載很是慢的時候會出現頁面向左偏移的狀況，由於滾動條佔據了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;
}
複製代碼

absolute 與 text-align 相配合實現水平居中。

代碼以下

<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的支持

font-size

這種效果也能夠藉助 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世界》

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。