上一篇:《CSS世界》筆記三:內聯元素與對齊
下一篇:《CSS世界》筆記五:CSS層疊規則及元素隱藏php
本來博客名爲「浮動與定位」,可是《CSS世界》第六章節的內容不只有浮動定位,很大一部分篇幅都在講BFC和overflow。更吸引人的是,做者將float/absolute/relative形容爲「魔界三兄弟」,將本來枯燥的理論知識硬生生變成了玄幻小說。css
absolute
和float
能夠看做是「同父異母」的兄弟關係。它們的父親是同一我的,是CSS世界的大魔王,屬於魔界;但母親不是一我的,absolute
的母親來自魔界,而float
的母親來自人界若是說
float
和absolute
是同父異母的兄弟關係,那麼relative
則是absolute
的親大哥html當年魔界聖母
position
生了好幾個兒子,其中一個就是法力很強也很霸道的absolute
,考慮到往後absolute
會找float
的麻煩而去正常流世界,以其個性和霸道的能力,必定會影響正常流世界的秩序,因而聖母position
讓其性格敦實的大兒子relative
直接在正常流世界生活,幫忙盯着absolute
,不要讓absolute
這個小魔鬼處處惹是生非web
浮動本質:實現文字環繞效果chrome
現階段使用浮動通常是用來實現盒子水平顯示(左右兩欄佈局),可是每每會形成浮動元素父盒子的塌陷;那麼應該如何清除浮動的影響呢?segmentfault
網上隨意百度便可查詢到清除浮動的方法:瀏覽器
上面二、3兩種方法都是用clear進行清除,而clear清除浮動屬性本質:clear 屬性是讓自身不能和前面的浮動元素相鄰,從而作到了清除浮動的效果。例子以下:佈局
/* ul>li*7 */ li { width: 20px; height: 20px; background-color: #ccc; margin: 5px; float: left; } li:nth-of-type(3) { clear: both; }
結果以下:
url
而「父元素設置overflow屬性」的方式則是利用了BFC的特性(下面將會詳細講解)spa
BFC
全稱爲block formatting context
,中文爲「塊級格式化上下文」。相對應的還有IFC
,也就是inline formatting context
,中文爲「內聯格式化上下」
BFC表現原則:若是一個元素具備 BFC,內部子元素再怎麼翻江倒海、翻雲覆雨,都不會影響外部的元素。因此,BFC 元素是 不可能發生 margin 重疊的,由於 margin 重疊是會影響外面的元素的;BFC 元素 也能夠用來清除浮動的影響,由於若是不清除,子元素浮動則父元素高度塌陷,必然會影響後面元素佈局和定位,這顯然有違 BFC 元素的子元素不會影響外部元素的設定
如何觸發BFC:
<html>
根元素所以:只要知足上面任何一條(觸發了BFC),元素就不會發生margin重疊和float帶來的「高度塌陷」問題
張大大布拉布拉用了大量的篇幅對比了實現BFC的各類方式,最後得出結論:overflow:hidden
是觸發BFC最理想反作用最小的方式
<div class="father"> <img src="1.jpg"> <p class="bfc">我是帥哥,好巧啊,我也是帥哥,原來看這篇博客的人都是帥哥~</p> </div> .father { max-width: 200px; border: 1px solid #444; } .father img { float:left; width: 60px; margin-right: 10px; } .bfc { overflow: hidden; }
展現以下:
原理:利用BFC的結界特性避免了文字環繞(浮動),實現左側固定,右側自適應的兩欄佈局
再次聲明:overflow:hidden是觸發BFC的最佳結界
滾動條相關知識
移動端的屏幕尺寸自己就有限, 滾動條通常都是懸浮模式,不會佔據可用寬度,可是在 PC端,尤爲Windows操做系統下,幾乎全部瀏覽器的 滾動欄都會佔據寬度,並且這個寬度 大小是固定的
如何獲取瀏覽器滾動欄寬度:
<div class="box"> <div id="in" class="in"></div> </div> .box { width: 400px; overflow: scroll; } console.log(400 - document.getElementById("in").clientWidth);
自定義滾動條屬性:
平時開發中比較經常使用的三個屬性:
::-webkit-scrollbar { /* 血槽寬度 */ width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { /* 拖動條 */ background-color: rgba(0,0,0,.3); border-radius: 6px; } ::-webkit-scrollbar-track { /* 背景槽 */ background-color: #ddd; border-radius: 6px; }
小技巧:處理頁面滾動條晃動問題(通常出如今加載數據後超過一屏)
html { overflow-y: scroll; /* for IE8 */ } :root { overflow-y: auto; overflow-x: hidden; } :root body { position: absolute; } body { width: 100vw; overflow: hidden; }
單行文本溢出:
.ell { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
多行文本溢出(此處爲2行):
.ell-rows-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
兩種狀況能夠觸發錨點定位行爲的發生:
(1)URL地址中的錨鏈與錨點元素對應並有交互行爲;
<a href="#1">發展歷程></a> <h2 id="1">發展歷程</h2>
利用上面的結構,點擊a標籤,可以使頁面滾動到h2處
(2)focus 錨點定位,可focus的錨點元素處於focus狀態
「focus 錨點定位」指的是相似連接或者按鈕、輸入框等能夠被 focus 的元素在被 focus 時發生的頁面重定位現象。舉個很簡單的例子,在 PC 端,咱們使用 Tab 快速定位可 focus 的元素的時候,若是咱們的元素正好在屏幕以外,瀏覽器就會自動重定位,將這個屏幕以外的元素定位到屏幕之中
錨點定位的兩個小案例,以供參考:
注意!注意!注意!元素設置了 overflow:hidden 聲明,裏面內容高度溢出的時候,滾動依然存在,僅僅滾動條不存在!,因此咱們能用錨點定位或者js控制滾動
(1)塊級元素:相對於第一個position不爲static的祖先元素,直到html
(2)行內元素:
直接看概念通常是一頭霧水,上圖吧(紅色虛線區域爲包含塊)
案例:基於行內元素定位的tips實現
<div class="tip icon" data-title="刪除"></div> .icon { margin: 50px 0 0 50px; display: inline-block; width: 20px; height: 20px; background: url(http://demo.cssworld.cn/images/6/delete.png) no-repeat center; } .tip { position: relative; &::before, &::after { position: absolute; transform: translateX(-50%); left: 50%; visibility: hidden; } &::before { content: attr(data-title); top: -33px; padding: 2px 10px 3px; line-height: 18px; border-radius: 2px; background-color: #333; text-align: left; color: #fff; font-size: 12px; /* 必須加,不然一柱擎天 */ white-space: nowrap; } &::after { content: ""; border: 6px solid transparent; border-top-color: #333; top: -10px; } &:hover::before, &:hover::after { transition: visibility .1s .1s; visibility: visible; } }
最終實現效果:
注意:absolute 是很是獨立的 CSS 屬性值,其樣式和行爲表現不依賴其餘任何 CSS 屬性就能夠完成,正是基於這一點纔有了無依賴定位的強大
首先思考一個問題:若是一個標準流元素後面接着一個absolute元素(未設置left等方位屬性),此時如何顯示?定位元素後又接着一個標準流元素,此時又該如何顯示?
<div class="demo"> 哈哈,我在定位元素前面 <span class="poa"></span> 吶!我還在定位元素後面呢 </div> .poa { position: absolute; width: 20px; height: 20px; background: rgba(255, 0, 0, .5); }
展現結果:
僅設置絕對定位時,定位元素仍會保持在html結構位置,且不佔據空間。由此,咱們可使用margin相對於原始位置定位該元素以實現各類功能。下面是幾個案例:
(1)案例1:簡單圖標定位
.icon-hot { position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; }
(2)案例2:校驗表單
/* 郵箱報錯小圖標 */ .icon-warn { position: absolute; margin-left: -18px; width: 16px; height: 20px; background: url(/images/6/warn.gif) no-repeat center; } /* 定位在盒子外部的紅色星號 */ .regist-star { position: absolute; margin-left: -1em; font-family: simsun; color: #f30; }
(3)案例3:input中的icon和下拉
/* 搜索按鈕的無依賴絕對定位 */ .search-btn { width: 20px; height: 20px; border: 9px solid #fff; background: #ddd url(search.png) no-repeat center; position: absolute; margin: 1px 0 0 -40px; } /* 下拉列表的無依賴絕對定位 */ .search-datalist { position: absolute; width: 248px; border: 1px solid #e6e8e9; background-color: #fff; }
text-align 竟然能夠改變 absolute 元素的位置
<p><img src="1.jpg"></p> p { text-align: center; } img { position: absolute; }
原理:img前的「幽靈空白節點」受text-align:center;
的影響居中,圖片的「無依賴絕對定位」在「幽靈空白節點」後面
<div class="constr"> <div class="alignright"> <span class="follow"> <img src="circle.png"> <img src="backtop.png"> </span> </div> </div> .constrcons { width: 80%; margin: auto; background-color: #f0f3f9; } .alignright { height: 0; text-align: right; overflow: hidden; } .alignright:before { content: "\2002"; } .follow { position: fixed; bottom: 100px; z-index: 1; } .follow > img { display: block; margin: 10px; }
優點:icon相對於主體內容定位,而不是相對於html
剪裁屬性 clip 要想起做用,元素必須是絕對定位或者固定定位,也就是 position 屬性值必須是 absolute 或者 fixed
最佳可訪問性隱藏
.clip { position: absolute; clip: rect(0 0 0 0); }
採用這種方法隱藏的元素本來的行爲特性也很好用。例如,依然能夠被 focus,並且很是可貴的是就地剪裁,由於屬於「無依賴的絕對定位」
當 absolute 遇到 left/top/right/bottom 屬性的時候,absolute 元素才真正變成絕對定位元素
absolute流體特性的條件是:對立方向同時發生定位的時候
left:0; right:0;
表現爲格式化寬度,水平方向保持流動性top:0; bottom:0;
表現爲格式化高度,垂直方向保持流動性絕對定位元素的margin:auto
的填充規則和普通流體元素的如出一轍:
.element { width: 300px; height: 200px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }