讀《css世界》筆記（1）

浠ラ箍發(fā)布于2019-08-30 15:56 / 1612人閱讀

摘要：流體布局下的寬度分離原則寬度分離原則就是將獨(dú)立占用一層標(biāo)簽而利用流動(dòng)性在內(nèi)部自適應(yīng)呈現(xiàn)。為了不影響之前的布局我們需要重新計(jì)算的寬度。但是不支持屬性還是需要手動(dòng)計(jì)算值。使用不建議使用通配符設(shè)置盒模型。

css流體布局下的寬度分離原則

寬度分離原則就是將width獨(dú)立占用一層標(biāo)簽,而border、margin、padding利用流動(dòng)性在內(nèi)部自適應(yīng)呈現(xiàn)。

為什么要寬度分離

分離是為了便于維護(hù)如下面的css

.box{
    width:100px;
    border:1px solid
}

此時(shí).box的寬度是102px,然后設(shè)計(jì)師需要20px的留白那么現(xiàn)在我們需要增加padding:20px;

.box{
    width:100px;
    border:1px solid;
    padding:20px;
}

此時(shí)的.box的寬度是142px增加了40px,跟原來的寬度差異明顯,顯然布局容易出現(xiàn)問題。為了不影響之前的布局,我們需要重新計(jì)算.box的寬度。

.box{
    width:60px;
    border:1px solid;
    padding:20px;
}

如果我們使用了寬度分離原則

.father{
    width:102px;
}
.son{
    padding:20px;
    border:1px solid;
}

布局寬度還是102px,只不過子元素的context-box的寬度變?yōu)榱?0px;無論我們?cè)趺锤膒adding值,都不會(huì)影響整體布局,瀏覽器自動(dòng)計(jì)算子元素的寬度。

但是可能會(huì)有人說寬度分離多了一層標(biāo)簽，產(chǎn)生了HTML成本。我們還有更好的一種方法,通過改變width的box-sizing屬性。

改變width/height作用細(xì)節(jié)的box-sizing

box-sizing的作用是改變width的作用細(xì)節(jié)它一下幾種屬性

.box{box-sizing:content-box}/*默認(rèn)屬性*/
.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;方便簡(jiǎn)潔,不會(huì)產(chǎn)出多余的標(biāo)簽。
但是?。?！box-sizing不支持margin屬性,還是需要手動(dòng)計(jì)算margin值。
使用box-sizing:border-box;不建議使用通配符*{box-sizing:border-box}設(shè)置盒模型。

云服務(wù)器 GPU云服務(wù)器兼容筆記印象筆記筆記云筆記

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

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

相關(guān)文章

《CSS世界》筆記五：CSS層疊規(guī)則及元素隱藏

摘要：元素層疊順序補(bǔ)充說明位于最下面的特指層疊上下文元素后面會(huì)詳解的邊框和背景色。界中可能有其他的層疊結(jié)界，而自身也可能處于其他層疊結(jié)界中。上一篇：《CSS世界》筆記四：流的保護(hù)與破壞寫在前面《CSS世界》這本書還剩六章，但是這本書的精華部分主要是前面的內(nèi)容，這里僅把后面章節(jié)相對(duì)重要的內(nèi)容以博客展示，想著了解更多的小伙伴還是去閱讀原文的好，畢竟三百多頁(yè)的一本書并不是小小幾篇博客能完全說...

godruoyi 2019-08-29 16:21 評(píng)論0 收藏0
Angular4學(xué)習(xí)筆記——數(shù)據(jù)綁定

摘要：所以，在的世界中，唯一的作用是用來初始化元素和指令的狀態(tài)。當(dāng)進(jìn)行數(shù)據(jù)綁定時(shí)，只是在與元素和指令的和事件打交道，而就基本上靠邊站了，只有比較特殊的情況才會(huì)用到他。事件綁定事件名事件綁定分為對(duì)原生事件綁定和自定義事件綁定。數(shù)據(jù)綁定總體而言有三種類型： {{...}} 插值表達(dá)式綁定屬性綁定（包括property和attitude 事件綁定插值表達(dá)式綁定既可以寫在html結(jié)構(gòu)中，...

MRZYD 2019-08-21 17:48 評(píng)論0 收藏0
《CSS世界》筆記一：流/元素/尺寸

摘要：一流體布局引出的幾種網(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揭密》...

hizengzeng 2019-08-30 15:54 評(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 2019-08-29 16:09 評(píng)論0 收藏0
《CSS世界》筆記四：流的保護(hù)與破壞

摘要：和可以看作是同父異母的兄弟關(guān)系。例子如下結(jié)果如下而父元素設(shè)置屬性的方式則是利用了的特性下面將會(huì)詳細(xì)講解結(jié)界全稱為，中文為塊級(jí)格式化上下文。上一篇：《CSS世界》筆記三：內(nèi)聯(lián)元素與對(duì)齊下一篇：《CSS世界》筆記五：CSS層疊規(guī)則及元素隱藏寫在前面原本博客名為浮動(dòng)與定位，但是《CSS世界》第六章節(jié)的內(nèi)容不僅有浮動(dòng)定位，很大一部分篇幅都在講BFC和overflow。更吸引人的是，作者將...

he_xd 2019-08-29 16:20 評(píng)論0 收藏0