成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

扯點(diǎn)：Box Modal - 盒模型

Tony / 2165人閱讀

摘要：在文檔中，元素被表示為一個矩形的盒子。在中，使用盒模型描述這些矩形盒子中的每一個。規(guī)定以具體單位計(jì)的內(nèi)邊距值，比如像素厘米等。但不允許使用負(fù)值。實(shí)際測試的百分比，測試結(jié)果并不是等于，而是近似等于。

在文檔中，元素被表示為一個矩形的盒子。

在CSS中，使用盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內(nèi)容。每個盒子有四個邊：外邊距邊(margin), 邊框邊(border), 內(nèi)填充邊(padding)與內(nèi)容邊(content)。

計(jì)算元素寬高

box-sizing 決定元素寬度和高度如何計(jì)算

box-sizing支持的屬性

content-box | border-box
值 描述
content-box 寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。
border-box 為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制
padding
值 描述
auto 瀏覽器計(jì)算內(nèi)邊距。
length 規(guī)定以具體單位計(jì)的內(nèi)邊距值，比如像素、厘米等。默認(rèn)值是 0px。但不允許使用負(fù)值。
% 規(guī)定基于父元素的寬度的百分比的內(nèi)邊距。

實(shí)際測試padding的百分比，測試結(jié)果并不是等于，而是近似等于。瀏覽器計(jì)算會存在偏差，

border

border繪制在“元素的背景之上”,換句話來說，元素的背景是內(nèi)容、內(nèi)邊距和邊框區(qū)的背景。

border默認(rèn)樣式border-style:none;

默認(rèn)顏色border-color: 元素文本顏色。利用這個特性，解決邊框和文本顏色需要保持的設(shè)計(jì)要求。

實(shí)現(xiàn)透明邊框 border-color:transparent;

margin
值 描述
auto 瀏覽器計(jì)算外邊距。
length 規(guī)定以具體單位計(jì)的外邊距值，比如像素、厘米等。
% 規(guī)定基于父元素的寬度的百分比的外邊距
margin: auto計(jì)算規(guī)則

設(shè)置margin: auto后，

行內(nèi)元素，行內(nèi)塊級元素margin取值0；

塊級元素，在文檔流中

margin-bottom和margin-top取值0；

margin-left和margin-right取值相同，按照下面公式計(jì)算

"margin-left" + "border" + "padding" + "width" + "margin-right" = width of containing block

塊級元素，不在文檔流中

margin-left和margin-right取值相同，按照下面公式計(jì)算

"margin-left" + "border" + "padding" + "width" + "margin-right" = width of containing block

margin-top和margin-bottom取值相同，按照下面公式計(jì)算

"margin-top" + "border" + "padding" + "height" + "margin-bottom" = height of containing block

margin collapsing(外邊距塌陷、外邊距合并)

在同一個文檔流中，同一個BFC內(nèi)，兩個相鄰塊級元素的垂直方向上外邊距（margin-top/margin-bottom）會合并

當(dāng)兩個元素屬于不同的BFC時，這兩個元素的外邊距不會合并。

發(fā)生外邊距塌陷的三種基本情況

相鄰的兄弟姐妹元素

塊級父元素與其第一個/最后一個子元素

空塊塊級元素

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111792.html

相關(guān)文章

  • 扯點(diǎn)：FC - Formatting Context

    摘要：指頁面中一個渲染區(qū)域，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。兩個同胞盒間的垂直距離取決于屬性。同一個塊格式化上下文中的相鄰塊級盒的垂直外邊距將折疊。 FC（Formatting Context）指頁面中一個渲染區(qū)域，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。常見的FC有BFC、IFC，GFC和FFC。 BF...

    notebin 評論0 收藏0

  • 編碼規(guī)范系列：css規(guī)范

    摘要：只有在必須將樣式限制在父元素內(nèi)也就是后代選擇器，并且存在多個需要嵌套的元素時才使用嵌套。制定一致的注釋規(guī)范。設(shè)置文件編碼為。 語法 用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。 為選擇器分組時，將單獨(dú)的選擇器單獨(dú)放在一行。 為了代碼的易讀性，在每個聲明塊的左花括號前添加一個空格。 聲明塊的右花括號應(yīng)當(dāng)單獨(dú)成行。 每條聲明語句的 : 后應(yīng)該插入...

    fnngj 評論0 收藏0

  • 你不知道的CSS（二）

    摘要：用來控制表格單元格寬度你也許遇到過給表格設(shè)置了寬度，但是不起作用的問題。這是因?yàn)閱卧竦膶挾仁歉鶕?jù)其內(nèi)容進(jìn)行調(diào)整的。顯而易見的，默認(rèn)情況下，單元格寬度受其內(nèi)容約束。而設(shè)置了后，其單元格寬度變得可控了。 本文首發(fā)于我的博客在上文《你不知道的CSS（一）》中，介紹了兄弟選擇器美化表單，font-size:0消除間隙，overflow清除浮動，border繪制三角形等7個實(shí)用技巧。由于文章長...

    sewerganger 評論0 收藏0

  • 基于狀態(tài)機(jī)模型的斗地主游戲（NodeJs&SocketIO）

    摘要：系統(tǒng)結(jié)構(gòu)系統(tǒng)考慮使用和實(shí)現(xiàn)服務(wù)器端邏輯，前端使用。邏輯流程主要邏輯包括用戶進(jìn)入游戲等待對家進(jìn)入游戲游戲過程結(jié)束統(tǒng)計(jì)這個過程。 1. 系統(tǒng)結(jié)構(gòu) 系統(tǒng)考慮使用Nodejs和SocketIo實(shí)現(xiàn)服務(wù)器端邏輯，前端使用HTML5。showImg(https://segmentfault.com/img/remote/1460000007643089); 2. 邏輯流程 1 . 主要邏輯包括用戶...

    NoraXie 評論0 收藏0

  • 基于狀態(tài)機(jī)模型的斗地主游戲（NodeJs&SocketIO）

    摘要：系統(tǒng)結(jié)構(gòu)系統(tǒng)考慮使用和實(shí)現(xiàn)服務(wù)器端邏輯，前端使用。邏輯流程主要邏輯包括用戶進(jìn)入游戲等待對家進(jìn)入游戲游戲過程結(jié)束統(tǒng)計(jì)這個過程。 1. 系統(tǒng)結(jié)構(gòu) 系統(tǒng)考慮使用Nodejs和SocketIo實(shí)現(xiàn)服務(wù)器端邏輯，前端使用HTML5。showImg(https://segmentfault.com/img/remote/1460000007643089); 2. 邏輯流程 1 . 主要邏輯包括用戶...

    xcold 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<