資訊專欄INFORMATION COLUMN
摘要：流體布局下的寬度分離原則寬度分離原則就是將獨立占用一層標簽而利用流動性在內(nèi)部自適應呈現(xiàn)。為了不影響之前的布局我們需要重新計算的寬度。但是不支持屬性還是需要手動計算值。使用不建議使用通配符設置盒模型。
css流體布局下的寬度分離原則
寬度分離原則就是將width獨立占用一層標簽,而border、margin、padding利用流動性在內(nèi)部自適應呈現(xiàn)。
為什么要寬度分離分離是為了便于維護如下面的css
.box{
width:100px;
border:1px solid
}
此時.box的寬度是102px,然后設計師需要20px的留白那么現(xiàn)在我們需要增加padding:20px;
.box{
width:100px;
border:1px solid;
padding:20px;
}
此時的.box的寬度是142px增加了40px,跟原來的寬度差異明顯,顯然布局容易出現(xiàn)問題。為了不影響之前的布局,我們需要重新計算.box的寬度。
.box{
width:60px;
border:1px solid;
padding:20px;
}
如果我們使用了寬度分離原則
.father{
width:102px;
}
.son{
padding:20px;
border:1px solid;
}
布局寬度還是102px,只不過子元素的context-box的寬度變?yōu)榱?0px;無論我們怎么改padding值,都不會影響整體布局,瀏覽器自動計算子元素的寬度。
但是可能會有人說寬度分離多了一層標簽，產(chǎn)生了HTML成本。我們還有更好的一種方法,通過改變width的box-sizing屬性。
改變width/height作用細節(jié)的box-sizingbox-sizing的作用是改變width的作用細節(jié)它一下幾種屬性
.box{box-sizing:content-box}/*默認屬性*/
.box{box-sizing:border-box}/*全部支持*/
.box{
box-sizing:border-box;
width:100px;
}
寬度是100px;
.box{
box-sizing:border-box;
width:100px;
border:1px solid;
}
現(xiàn)在width還是100px;
用box-sizing:border-box;方便簡潔,不會產(chǎn)出多余的標簽。
但是?。。ox-sizing不支持margin屬性,還是需要手動計算margin值。
使用box-sizing:border-box;不建議使用通配符*{box-sizing:border-box}設置盒模型。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/117550.html
摘要：元素層疊順序補充說明位于最下面的特指層疊上下文元素后面會詳解的邊框和背景色。界中可能有其他的層疊結(jié)界，而自身也可能處于其他層疊結(jié)界中。 上一篇：《CSS世界》筆記四：流的保護與破壞 寫在前面 《CSS世界》這本書還剩六章，但是這本書的精華部分主要是前面的內(nèi)容，這里僅把后面章節(jié)相對重要的內(nèi)容以博客展示，想著了解更多的小伙伴還是去閱讀原文的好，畢竟三百多頁的一本書并不是小小幾篇博客能完全說...
摘要：所以，在的世界中，唯一的作用是用來初始化元素和指令的狀態(tài)。當進行數(shù)據(jù)綁定時，只是在與元素和指令的和事件打交道，而就基本上靠邊站了，只有比較特殊的情況才會用到他。事件綁定事件名事件綁定分為對原生事件綁定和自定義事件綁定。 數(shù)據(jù)綁定總體而言有三種類型： {{...}} 插值表達式綁定 屬性綁定（包括property和attitude 事件綁定 插值表達式綁定 既可以寫在html結(jié)構(gòu)中，...
摘要：一流體布局引出的幾種網(wǎng)頁布局方式布局方式描述特點場景靜態(tài)布局，傳統(tǒng)設計，網(wǎng)頁上的所有元素的尺寸一律使用作為單位。世界中，提出了流體布局的概念所謂流體布局，指的是利用元素流的特性實現(xiàn)的各類布局效果。 下一篇：《CSS世界》筆記二：盒模型四大家族 寫在前面 初讀《CSS世界》還是在深圳，屬于換工作前的充能。那時候除了工作，其他時間基本都在這本書里了，因為它的確吸引人。之前看過《CSS揭密》...
摘要：基本上，等高布局只能滿足欄的情況，除非正好是等比例的，那還可以使用實現(xiàn)最多欄布局上一篇世界筆記一流元素尺寸下一篇世界筆記三內(nèi)聯(lián)元素與對齊 上一篇：《CSS世界》筆記一：流/元素/尺寸下一篇：《CSS世界》筆記三：內(nèi)聯(lián)元素與對齊 寫在前面 在讀《CSS世界》第四章之前，粗淺的認為盒模型無非是margin/border/padding/content而已，再多無非在不同box-sizing...
摘要：和可以看作是同父異母的兄弟關(guān)系。例子如下結(jié)果如下而父元素設置屬性的方式則是利用了的特性下面將會詳細講解結(jié)界全稱為，中文為塊級格式化上下文。 上一篇：《CSS世界》筆記三：內(nèi)聯(lián)元素與對齊下一篇：《CSS世界》筆記五：CSS層疊規(guī)則及元素隱藏 寫在前面 原本博客名為浮動與定位，但是《CSS世界》第六章節(jié)的內(nèi)容不僅有浮動定位，很大一部分篇幅都在講BFC和overflow。更吸引人的是，作者將...
閱讀 1390·2021-10-11 10:57
閱讀 2105·2021-09-02 15:15
閱讀 1712·2019-08-30 15:56
閱讀 1261·2019-08-30 15:55
閱讀 1216·2019-08-30 15:44
閱讀 1037·2019-08-29 12:20
閱讀 1413·2019-08-29 11:12
閱讀 1129·2019-08-28 18:29
