国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

《CSS世界》筆記一:流/元素/尺寸

hizengzeng / 2734人閱讀

摘要:一流體布局引出的幾種網(wǎng)頁(yè)布局方式布局方式描述特點(diǎn)場(chǎng)景靜態(tài)布局,傳統(tǒng)設(shè)計(jì),網(wǎng)頁(yè)上的所有元素的尺寸一律使用作為單位。世界中,提出了流體布局的概念所謂流體布局,指的是利用元素流的特性實(shí)現(xiàn)的各類布局效果。

下一篇:《CSS世界》筆記二:盒模型四大家族

寫在前面

初讀《CSS世界》還是在深圳,屬于換工作前的充能。那時(shí)候除了工作,其他時(shí)間基本都在這本書里了,因?yàn)樗拇_吸引人。之前看過《CSS揭密》,不過是對(duì)CSS3知識(shí)的講解和一些應(yīng)用,但是《CSS世界》這本書將CSS作為一個(gè)體系講解,顛覆了以往對(duì)CSS的認(rèn)知。這是“二進(jìn)宮”了,想著我是應(yīng)該寫點(diǎn)什么的。

一、 流體布局引出的幾種網(wǎng)頁(yè)布局方式
布局方式 描述 特點(diǎn) 場(chǎng)景
靜態(tài)布局 Static Layout,傳統(tǒng)Web設(shè)計(jì),網(wǎng)頁(yè)上的所有元素的尺寸一律使用px作為單位。不管瀏覽器尺寸具體是多少,網(wǎng)頁(yè)布局始終按照最初寫代碼時(shí)的布局來顯示。一般需要設(shè)置最小寬度 不能根據(jù)用戶的屏幕尺寸做出不同的表現(xiàn) 傳統(tǒng)PC網(wǎng)頁(yè)
流式布局 Liquid Layout,頁(yè)面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整,但整體布局不變。代表作柵欄系統(tǒng)(網(wǎng)格系統(tǒng)) 網(wǎng)頁(yè)中主要的劃分區(qū)域的尺寸使用百分?jǐn)?shù)(搭配min-、max-屬性使用) 屏幕分辨率變化時(shí),頁(yè)面里元素的大小會(huì)變化而但布局不變
自適應(yīng)布局 Adaptive Layout,使用@media分別為不同的屏幕分辨率定義布局,即創(chuàng)建多個(gè)靜態(tài)布局,每個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕分辨率范圍 屏幕分辨率變化時(shí),頁(yè)面里面元素的位置會(huì)變化而大小不會(huì)變化 -
響應(yīng)式布局 Responsive Layout,一個(gè)頁(yè)面在所有終端上(各種尺寸的PC、手機(jī)、手表、冰箱的Web瀏覽器等等)都能顯示出令人滿意的效果 每個(gè)屏幕分辨率下面會(huì)有一個(gè)布局樣式,即元素位置和大小都會(huì)變 多終端頁(yè)面
彈性布局 rem/em布局,包裹文字的各元素的尺寸采用em/rem做單位,而頁(yè)面的主要?jiǎng)澐謪^(qū)域的尺寸仍使用百分?jǐn)?shù)或px做單位 理想狀態(tài)是所有屏幕的高寬比和最初的設(shè)計(jì)高寬比一樣,或者相差不多,完美適應(yīng) 移動(dòng)端

結(jié)論:

如果只做pc端,那么靜態(tài)布局(定寬度)是最好的選擇;

如果做移動(dòng)端,且設(shè)計(jì)對(duì)高度和元素間距要求不高,那么彈性布局(rem+js)是最好的選擇,一份css+一份js調(diào)節(jié)font-size搞定;

如果pc,移動(dòng)要兼容,而且要求很高那么響應(yīng)式布局還是最好的選擇,前提是設(shè)計(jì)根據(jù)不同的高寬做不同的設(shè)計(jì),響應(yīng)式根據(jù)媒體查詢做不同的布局。

《CSS世界》中,提出了“流體布局”的概念:

所謂“流體布局”,指的是利用元素“流”的特性實(shí)現(xiàn)的各類布局效果。因?yàn)椤傲鳌北旧?具有自適應(yīng)特性,所以“流體布局”往往都是具有自適應(yīng)性的。但是,“流體布局”并不等同于 “自適應(yīng)布局”。“自適應(yīng)布局”是對(duì)凡是具有自適應(yīng)特性的一類布局的統(tǒng)稱,“流體布局”要狹窄得多。例如,表格布局也可以設(shè)置為100%自適應(yīng),但表格和“流”不是一路的,并不屬于“流體布局”。

通俗的說,流體布局就是在width:auto;或者格式化寬/高中,通過設(shè)定margin/border/padding來影響content的布局的方式

二、為什么 list-item 元素會(huì)出現(xiàn)項(xiàng)目符號(hào)

每個(gè)元素都兩個(gè)盒子, 外在盒子和內(nèi)在盒子(容器盒子)。外在盒子負(fù)責(zé)元素是可以一行顯示,還是只能換行顯示;內(nèi)在盒子負(fù)責(zé) 寬高、內(nèi)容呈現(xiàn)什么的

display 外在盒子 容器盒子 表現(xiàn)
inline-block inline block 尺寸可定義,一行顯示多個(gè)
block block block 尺寸可定義,單行顯示
inline inline inline 尺寸不可定義,一行顯示多個(gè)

相對(duì)應(yīng)的,外在盒子有外部尺寸,內(nèi)部盒子有內(nèi)部尺寸。外部尺寸盒子表現(xiàn)為“充分利用可用空間”,既有“流”的特性

所謂流動(dòng)性,并不是看上去的寬度100%顯示這么簡(jiǎn)單,而是一種 margin/border/padding 和 content 內(nèi)容區(qū)域自動(dòng)分配水平空間的機(jī)制

如何創(chuàng)建具有流動(dòng)性的盒子:

width:auto; 的塊級(jí)盒子

格式化寬/高的盒子

三、width 注意點(diǎn)

寬度值的作用區(qū)域與當(dāng)前盒子的box-sizing相關(guān),默認(rèn)的box-sizing: content-box;,寬度值等于盒子content寬度,添加padding和border時(shí)盒子占位會(huì)擴(kuò)大。box-sizing: border-box;時(shí),寬度值等于盒子border*2+padding*2+content,占位不變,內(nèi)容區(qū)域會(huì)改變。

絕對(duì)定位的寬高百分比計(jì)算是相對(duì)于 padding box 的,也就是說會(huì)把 padding 大小值計(jì)算在內(nèi),但是,非絕對(duì)定位元素則是相對(duì)于 content box 計(jì)算的

width:100%;的設(shè)置會(huì)影響盒子的“流動(dòng)性”,

四、max-/min- width/height

特性1:超越!important;超越!important指的是max-width會(huì)覆蓋width,即使在width上添加!important


img { max-width: 256px; }

// 此刻,圖片展示寬度為256px

特性2:超越最大;超越最大指的是min-width覆蓋max-width,此規(guī)則發(fā)生在min-widthmax-width沖突的時(shí)候

.container {
    min-width: 1400px;
    max-width: 1200px;
}
// 此刻,container展示為至少1400px

應(yīng)用

/* 使用max-height實(shí)現(xiàn)任意高度元素的展開收起動(dòng)畫 */
@mixin slide-vertical($maxHeight, $initMaxHeight:0, $duration:.25s) {
  max-height: $initMaxHeight;
  overflow: hidden;
  transition: max-height $duration;
  &.active {
    max-height: $maxHeight;
  }
}
五、內(nèi)聯(lián)盒模型基本概念理解

內(nèi)容區(qū)域:文本選中的背景色區(qū)域作為內(nèi)容區(qū)域;

內(nèi)聯(lián)盒子:光禿禿的文字-匿名內(nèi)聯(lián)盒子;由行內(nèi)元素包裹的屬于內(nèi)聯(lián)盒子

行框盒子:每一行就是一個(gè)“行框盒子”,每個(gè)“行框盒子”又是由一個(gè)個(gè)“內(nèi)聯(lián)盒子” 組成的

包含盒子:由行框盒子組成

幽靈空白節(jié)點(diǎn):

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

證明幽靈空白節(jié)點(diǎn)存在的最簡(jiǎn)單案例:

div { background-color: #cd0000; } span { display: inline-block; }

代碼中沒有設(shè)置高度,最終的頁(yè)面卻有高度。這個(gè)可以由幽靈空白節(jié)點(diǎn)解釋

下一篇:《CSS世界》筆記二:盒模型四大家族

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/116924.html

相關(guān)文章

  • CSS世界》閱讀筆記(二)——塊級(jí)元素與基本尺寸

    摘要:塊級(jí)元素基本概念塊級(jí)元素是一個(gè)水平流上只能單獨(dú)顯示一個(gè)元素,多個(gè)塊級(jí)元素則換行顯示。其中內(nèi)部尺寸由內(nèi)部元素決定還有一類叫作外部尺寸寬度由外部元素決定。所以子元素的高度設(shè)為是無效的。此時(shí)的就會(huì)有計(jì)算值,即使祖先元素的計(jì)算為也是如此。 塊級(jí)元素基本概念 塊級(jí)元素:是一個(gè)水平流上只能單獨(dú)顯示一個(gè)元素,多個(gè)塊級(jí)元素則換行顯示。 塊級(jí)元素和display 為 block 的元素不是一個(gè)概念。 每...

    lylwyy2016 評(píng)論0 收藏0
  • CSS世界筆記二:盒模型四大家族

    摘要:基本上,等高布局只能滿足欄的情況,除非正好是等比例的,那還可以使用實(shí)現(xiàn)最多欄布局上一篇世界筆記一流元素尺寸下一篇世界筆記三內(nèi)聯(lián)元素與對(duì)齊 上一篇:《CSS世界》筆記一:流/元素/尺寸下一篇:《CSS世界》筆記三:內(nèi)聯(lián)元素與對(duì)齊 寫在前面 在讀《CSS世界》第四章之前,粗淺的認(rèn)為盒模型無非是margin/border/padding/content而已,再多無非在不同box-sizing...

    icyfire 評(píng)論0 收藏0
  • css世界》- 詳細(xì)重點(diǎn)筆記與技巧

    摘要:概述在世界這本書中有一些黑魔法給列舉出來,在結(jié)合自己的理解。篇幅有點(diǎn)長(zhǎng),希望大家能夠堅(jiān)持看完,一定會(huì)有收獲以下是摘自每章內(nèi)一些重要的概念與技巧。 概述 在《css世界》這本書中有一些黑魔法給列舉出來,在結(jié)合自己的理解。篇幅有點(diǎn)長(zhǎng),希望大家能夠堅(jiān)持看完,一定會(huì)有收獲!!!以下是摘自每章內(nèi)一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標(biāo)與文字居中問題等; ps: 特別是 line-h...

    MasonEast 評(píng)論0 收藏0
  • css世界》- 詳細(xì)重點(diǎn)筆記與技巧

    摘要:概述在世界這本書中有一些黑魔法給列舉出來,在結(jié)合自己的理解。篇幅有點(diǎn)長(zhǎng),希望大家能夠堅(jiān)持看完,一定會(huì)有收獲以下是摘自每章內(nèi)一些重要的概念與技巧。 概述 在《css世界》這本書中有一些黑魔法給列舉出來,在結(jié)合自己的理解。篇幅有點(diǎn)長(zhǎng),希望大家能夠堅(jiān)持看完,一定會(huì)有收獲!!!以下是摘自每章內(nèi)一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標(biāo)與文字居中問題等; ps: 特別是 line-h...

    趙連江 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<