欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

CSS如何使用box-sizing屬性

這篇文章主要介紹了CSS如何使用box-sizing屬性，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名與空間、網(wǎng)絡空間、營銷軟件、網(wǎng)站建設、點軍網(wǎng)站維護、網(wǎng)站推廣。

CSS box-sizing屬性的正確用法

CSS自定義屬性（變量）

CSS box-sizing屬性允許我們在元素的總寬度和高度中包含填充和邊框。

沒有CSS box-sizing屬性

默認情況下，元素的寬度和高度計算如下： width + padding + border =元素的實際寬度 height + padding + border =元素的實際高度 這意味著：當您設置元素的寬度/高度時，元素通常看起來比您設置的大（因為元素的邊框和填充被添加到元素的指定寬度/高度）。 下圖顯示了兩個具有相同指定寬度和高度的<div>元素：

  CSS如何使用box-sizing屬性  

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ccs</title>
    <style>
        .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
        }

        .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<div class="div1">這個div更小(寬度為300px，高度為100px)。</div>
<br>
<div class="div2">這個div更大(寬度也是300px，高度也是100px)。</div>

</body>
</html>

box-sizing屬性解決了這個問題。

使用CSS box-sizing屬性

box-sizing屬性允許我們在元素的總寬度和高度中包含填充和邊框。如果box-sizing: border-box;在元素填充上設置并且邊框包含在寬度和高度中：

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

在線體驗一下

由于使用它的結果box-sizing: border-box;非常好，許多開發(fā)人員希望他們頁面上的所有元素都以這種方式工作。下面的代碼確保以更直觀的方式調整所有元素的大小。許多瀏覽器已經(jīng)box-sizing: border-box;用于許多表單元素（但不是全部 - 這就是輸入和文本區(qū)域在寬度上看起來不同的原因：100％;）。將其應用于所有元素是安全和明智的：

* {
  box-sizing: border-box;
}

CSS Box大小調整屬性

box-sizing 定義如何計算元素的寬度和高度:是否應該包含填充和邊框

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS如何使用box-sizing屬性”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

當前名稱：CSS如何使用box-sizing屬性
當前URL：http://chinadenli.net/article24/giohje.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供域名注冊、品牌網(wǎng)站建設、網(wǎng)站改版、App開發(fā)、App設計、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站