今天搞一搞box-sizing?

Alfred 發布于2019-08-02 15:59 / 1931人閱讀

摘要：講到首先你要知道什么是的盒子模型盒子模型有兩種分別是的和的看了圖可能你就已經明白了不過還要繼續簡單來說標準盒子模型的范圍包括，并且部分不包含其他部分則是包含的標準外盒尺寸計算元素空間尺寸空間高度空間寬度內盒尺寸計算元素大小為內容高度

講到box-sizing,首先你要知道什么是css的盒子模型!
盒子模型有兩種分別是IE的border-box和w3c的content-box.

看了圖可能你就已經明白了,不過還要繼續,簡單來說:

標準 w3c 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分,border-box則是content包含content,padding,border

W3C的標準Box Model:

  /*外盒尺寸計算（元素空間尺寸）*/
  Element空間高度 = content height + padding + border + margin
  Element 空間寬度 = content width + padding + border + margin
  /*內盒尺寸計算（元素大小）*/
  Element Height = content height + padding + border （Height為內容高度）
  Element Width = content width + padding + border （Width為內容寬度）

IE)傳統下Box Model（IE6以下，不含IE6版本或“QuirksMode下IE5.5+”）:

  /*外盒尺寸計算（元素空間尺寸）*/
  Element空間高度 = content Height + margin (Height包含了元素內容寬度，邊框寬度，內距寬度)
  Element空間寬度 = content Width + margin (Width包含了元素內容寬度、邊框寬度、內距寬度)
  /*內盒尺寸計算（元素大小）*/
  Element Height = content Height(Height包含了元素內容寬度，邊框寬度，內距寬度)
  Element Width = content Width(Width包含了元素內容寬度、邊框寬度、內距寬度)

到這基本上你就能夠明明白白的了吧?

想一想你再布局的時候有沒有遇到過因為paddingborder導致多列布局打亂了的情況,明明是想要每行四個元素,但是第四個就是被擠了下去的情況.

比如三欄布局來講:




    div {
        height: 700px;
        float: left;
    }
    div.left {
        width: 25%;
        background: red;
    }
    div.cent {
        width: 50%;
        box-sizing: border-box;
        /* 現在整個元素,包括填充在內,占頁面總寬度的50%,所有元素的組合寬度為100%*/
        background: yellow;
        padding: 0 20px;
        /*加了這個會使盒子內容溢出 但是box-sizing很好的自適應了*/
    }
    div.right {
        width: 25%;
        background: blue;
    }

或者是ul-li結構,每行展示四個元素等等情況的布局,巧妙的運用可以讓代碼更加精簡和優美.

最后瀏覽器的兼容性:ie9+,火狐加前綴-moz-,低版本ios和android加-webkit-

GPU云服務器云服務器搞一搞今天油價大于今天今天到期域名

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/54469.html

記一次使iview庫的Radio可取消的過程

摘要：概述庫用的是是我們非常常用的組件。有一個特征是選中之后無法取消。現實中取消的需求是常見且可以理解的。所以看到這個需求之后第一嘗試在組件之上搞一搞，這一搞就入坑了，現在就來理一理我的入坑之路吧。概述 ui庫用的是iview . radio、radioGroup是我們非常常用的組件。radio有一個特征是選中之后無法取消。現實中取消radio的需求是常見且可以理解的。所以看到這個需求之后...

荊兆峰 2019-08-26 13:37 評論0 收藏0
vue-cli3.0安裝與配置

摘要：安裝與配置最近公司要開新項目，用配置，讓我搞一搞，做個記錄。最好自己去官網過一遍的文檔安裝完成后檢測一下是否安裝成功，如下圖展示。顯示以上就安裝成功。第一個默認配置只會安裝和，其它的需要自己配置，不建議選，這里我們選擇第二個手動配置。 vue-cli3.0安裝與配置最近公司要開新項目，用vue-cli3.0配置，讓我搞一搞，做個記錄。安裝首先你要升級到cli3.0，命令如下。(最...

zilu 2019-08-23 16:17 評論0 收藏0
第三集: 從零開始實現一套pc端vue的ui組件庫(button組件其一)

摘要：第三集從零開始實現組件本集定位為什么要叫那因為我感覺這個組件細節比較多應該會講很多內容所以先把基礎功能在這一集實現下集去做拓展組件這是一個基本上每個工程都會用到的組件傳統的千篇一律的樣式仿佛按鈕不做的一樣就沒法用似的我偏要加一些別人沒加過的第三集: 從零開始實現(button組件1) 本集定位: 為什么要叫1那, 因為我感覺這個組件細節比較多, 應該會講很多內容, 所以先把基礎功...

chnmagnus 2019-08-30 15:44 評論0 收藏0
第三集: 從零開始實現一套pc端vue的ui組件庫(button組件其一)

摘要：第三集從零開始實現組件本集定位為什么要叫那因為我感覺這個組件細節比較多應該會講很多內容所以先把基礎功能在這一集實現下集去做拓展組件這是一個基本上每個工程都會用到的組件傳統的千篇一律的樣式仿佛按鈕不做的一樣就沒法用似的我偏要加一些別人沒加過的第三集: 從零開始實現(button組件1) 本集定位: 為什么要叫1那, 因為我感覺這個組件細節比較多, 應該會講很多內容, 所以先把基礎功...

yintaolaowanzi 2019-08-23 17:16 評論0 收藏0
老鳥學Javascript - 第一彈

摘要：順帶一提，跨域可以用解決。本文主要關注一些離散的，即學即用的知識點，和一些在日常編程中容易踩得坑。不做類型轉換，所以如果比較對象的類型不一致，直接返回。當程序員給一個變量賦值為時，通常表示這個變量已經不用了。原文：http://h01mes.com/veteran-new... 我仍然記得在一個ajax小項目踩到跨域問題(CORS)的坑，最后用Chrome插件解決。由此對Javasc...

AlexTuan 2019-08-20 17:43 評論0 收藏0