《css世界》的那些實(shí)用技巧

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

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

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

max-width

  1. max-系列的權(quán)重非常的高，甚至超越了!important。如下代碼p最后的寬度是150px
p {
  width: 200px !important;
  max-width: 150px;
}
  1. 當(dāng)min-width與max-width大小有沖突的時(shí)候會采用最大原則，即誰大取誰的值。如下代碼最后的寬度是1400px
.container {
  min-width: 1400px;
  max-width: 1200px;
}
  1. 當(dāng)我們實(shí)現(xiàn)一個元素高度逐漸變大的效果，但是我們又不知道這個元素的具體高度，這個時(shí)候我們就可以用max-height 的方式。我們不需要給以具體高度值就可以實(shí)現(xiàn)這個效果。當(dāng)然這樣做會出現(xiàn)元素高度達(dá)到實(shí)際高度但是動畫還沒結(jié)束。會有動畫延遲的感覺。
.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

image

這種三道扛的效果我們經(jīng)常要遇到，我們可以借助 background-clip 與padding 實(shí)現(xiàn)這種效果。不需要任何圖片。

.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;
}

image

當(dāng)我們要實(shí)現(xiàn)這種兩端對齊的效果,我們給每一個列表都設(shè)置margin-right然后去掉最后一個的margin-right。實(shí)現(xiàn)這種效果需要借助css3的新增選擇器，有時(shí)候還需要js,或者直接用flex布局。但我們利用給父級margin 負(fù)值就可以輕松實(shí)現(xiàn)。

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

border

  1. 因?yàn)?ie6 下 border 設(shè)置虛線顯示的是圓點(diǎn)。所以用這種方法可以在ie6下實(shí)現(xiàn)一個圓。
.box {
  width: 150px;
  height: 150px;
  /* 超出區(qū)域隱藏，只顯示一個圓 */
  overflow: hidden;
}
.dotted {
  width: 100%;
  height: 100%;
  border: 149px dotted #cd0000;
}
image

利用邊框制作三角形其實(shí)是一個廣為人知的方法，還是寫一下吧。

注意：邊框也是css標(biāo)準(zhǔn)的上右下左的設(shè)置順序，需要上面方向的三角形就給它相反的方向設(shè)置想要的顏色，其他方向都設(shè)為透明色。

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

ex

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


image

這種圖標(biāo)和字垂直居中的布局我們經(jīng)常見到，只要這樣設(shè)置就可以簡單實(shí)現(xiàn)，而且還不會受字號，頁面高度的影響。

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

vertical-align

可以利用 vertical-align 實(shí)現(xiàn)水平垂直居中，這種定位方法不用知道居中元素的寬高度，兼容ie6

下面模擬的是一個全屏的對話框。這種居中方法核心是父元素的text-aglin:center，在寫一個居中元素的兄弟元素給與display: inline-block;height: 100%;vertical-align: middle;三個屬性，自身設(shè)置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一種觸發(fā)BFC的方法，其實(shí)以下都能出發(fā)BFC。

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

overflow

  1. 滾動條是html所產(chǎn)生的所有想要頁面禁止出現(xiàn)滾動條沒必要拉著body一起設(shè)置overflow:hidden，

  2. 當(dāng)頁面加載非常慢的時(shí)候會出現(xiàn)頁面向左偏移的情況，因?yàn)闈L動條占據(jù)了body的寬度導(dǎo)致body偏移。下述代碼是讓body占據(jù)整個 window 的寬度。這樣不會出現(xiàn)頁面加載慢時(shí)導(dǎo)致居中元素偏移的問題。(現(xiàn)在用戶寬帶大幅度提升基本上不會有這種情況了)

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

absolute

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

無依賴的布局，即不使用傳統(tǒng)的子決父相的方式。不使用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 相配合實(shí)現(xiàn)水平居中。
image

代碼如下

<p > <img src="1.jpg" > </p > 

p {
  text-align: center;
}
img {
  position: absolute;
  margin-left: ...;
}

雖然本示例中圖片位置確實(shí)受 text-align 屬性影響，但是并不是 text-align 和 absolute 元素直接發(fā)生關(guān)系，absolute 元素的 display 計(jì)算值是塊狀的，text-align是不會有作用的。這里之所以產(chǎn)生了位置變化，本質(zhì)上是“幽靈空白節(jié)點(diǎn)”和“無依賴絕對定位”共同作用的結(jié)果


“幽靈空白節(jié)點(diǎn)”是內(nèi)聯(lián)盒模型中非常重要的一個概念，具體指的是：在 HTML5 文檔聲明
中，內(nèi)聯(lián)元素的所有解析和渲染表現(xiàn)就如同每個行框盒子的前面有一個“空白節(jié)點(diǎn)”一樣。這
個“空白節(jié)點(diǎn)”永遠(yuǎn)透明，不占據(jù)任何寬度，看不見也無法通過腳本獲取，就好像幽靈一樣，
但又確確實(shí)實(shí)地存在，表現(xiàn)如同文本節(jié)點(diǎn)一樣，因此，我稱之為“幽靈空白節(jié)點(diǎn)”。


當(dāng)然我們是需要知道內(nèi)聯(lián)元素的寬度的。margin-left的值與負(fù)的一般寬度。與父元素position:relative 然后定位元素設(shè)置left:50%的方法類似。但不會有層級問題。


  1. absolute 與 overflow
    關(guān)于絕對定位元素是否會受到overflow的影響有如下判斷


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

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

注意：由于 transform 在各個瀏覽器對overflow的支持不一樣所以當(dāng)元素還是被裁剪的話，試著找找是不是transform的原因


  1. absolute 與流體自適應(yīng)

當(dāng)一個絕對定位元素的相對方向都有定位的時(shí)候該元素就會擁有一種和文檔流相似的流體特性如

.box {
position: absolute;
left: 0; right: 0;
}

當(dāng)一個絕對定位元素有如下的設(shè)置就能覆蓋整個瀏覽器。注意它的寬度高度是一種"格式化寬度/高度"，于width:100%完全不同。給與margin也不會出現(xiàn)超出屏幕。

.box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

根據(jù)上面所說可以使用margin:auto實(shí)現(xiàn)水平居中的效果,如果有沒有left: 0; right: 0;這種能夠激發(fā)流體特性的屬性就不會有這種居中效果。當(dāng)然想要用margin:auto auto實(shí)現(xiàn)垂直水平居中是不能的。畢竟在標(biāo)準(zhǔn)文檔流也沒有這種效果。

代碼如下

.element {
  width: 300px;
  height: 200px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

fixed

fixed也可以用無依賴布局，如下實(shí)現(xiàn)一個在元素內(nèi)部的固定定位

<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等定位屬性。

獲取滾動條寬度

如下代碼可以獲取滾動條寬度，避免了禁用滾動條之后的頁面偏移現(xiàn)象。

//顯示
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的支持

image

font-size

image

這種效果也可以借助vertical-align和font-size實(shí)現(xiàn)。

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

子元素vertical-align使用百分比可以實(shí)現(xiàn)圖標(biāo)與文字居中的問題而且不受字體大小的影響，但是會受到行高的影響。如果是 ex 不僅可以實(shí)現(xiàn)而且不會受到行高的影響。

text-decoration

在中文下text-decoration有可能與下一行的字出現(xiàn)重疊這時(shí)候我們用邊框來作為下劃線，邊框不要設(shè)置顏色，它會默認(rèn)的和字體一個顏色。

顯示與隱藏

利用visibility和絕對定位來實(shí)現(xiàn)隱藏而且不占位置。或者透明度加絕對定位

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

.opacity {
  position: absolute;
  opacity: 0;
  filter: Alpha(opacity=0);
}

visibility 與 display 的小區(qū)別

visibility的子元素會被隱藏但是如果設(shè)置了visibility:visible就會顯現(xiàn)出來，但是display:none的元素就沒有這樣的效果。



這些就是我閱讀《css世界》所學(xué)到的技巧，更多內(nèi)容請閱讀原書








引用： 《css世界》

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容