CSS(5)---通俗講解盒子模型

時間  2019-11-10
標籤 css 通俗 講解 盒子 模型 欄目 CSS 简体版
原文   原文鏈接

CSS(5）---盒子模型

盒子模型四個關鍵字：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具有這些屬性。css

1、概念

一、 概念

盒子的概念就比如你如今網上買了一個蘋果手機，那麼新手機確定是放在一個盒子裏給你寄來。html

那麼這蘋果手機自己就指的是 內容（content）,前端

爲了讓手機安全寄到會在盒子裏放點泡沫這就是 填充（padding）,後端

那麼這個盒子自己確定是有它的寬度的這叫 邊框（border),瀏覽器

每一個盒子與每一個盒子之間的距離叫 邊界（margin)。安全

如圖運維

二、元素的寬度和高度

重要 當您指定一個CSS元素的寬度和高度屬性時，實際只是設置內容區域的寬度和高度。要知道，徹底大小的元素，你還必須添加填充，邊框和邊距。測試

寬高公式3d

總寬度 = 內容寬度 + padding寬度(左右) + border寬度(左右) + margin寬度(左右)code

總高度 = 內容高度 + padding高度(上下) + border高度(上下) + margin高度(上下)

舉例 求下面的總寬度是多少？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>寬和高</title>
    <style>
        div {
            background-color: lightgrey;
            width: 300px;
            border: 25px solid green;
            padding: 25px;
            margin: 25px;
        }
    </style>
</head>
<body>
   <div> 這裏是盒子內的實際內容。有 25px 內間距，25px 外間距、25px 綠色邊框。</div>
</body>
</html>

運行結果

咱們在看下它的盒子模型

咱們很明顯看出在盒子模型中，咱們設置的寬度都是內容寬度，不是整個盒子的寬度。

這裏總寬度 = 300px (寬) + 50px (左 + 右填充) + 50px (左 + 右邊框) + 50px (左 + 右邊距) = 450px

三、盒子邊框(border)

邊框主要有三個屬性：寬度(border-width)、樣式(border-style)、顏色(border-color)

border-style 肯定邊框的顯示樣式
    none:  沒有邊框
    solid:  實線
    dashed：虛線
    dotted： 點線
    double： 雙線
border-width 邊框寬度：具體的像素值px
border-color 邊框顏色

1)邊框-簡寫屬性

上下左右同一屬性

border-style：屬性1，屬性2，屬性3，屬性4
上->右->下->左
border-style：屬性1，屬性2，屬性3
上->左右->下
border-style：屬性1，屬性2
上下->左右
border-style：屬性1
上下左右屬性相同

不一樣屬性寫在一塊兒

border : border-width  border-style  border-color

2)示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>boder</title>
    <style>
        .one {
            border-left-width: 10px; /*  樣式分開寫 */
            border-left-style: solid; 
            border-left-color: red; 
        }

        .two {
            border-width: 5px 10px 15px 20px; /* 同一屬性樣式寫在一塊兒 */
            border-style: dashed; 
            border-color: red; 
        }

        .three {
            border: 5px solid red; /* 不一樣屬性樣式寫在一塊兒 */
        }
    </style>
</head>

<body>
    <p class = "one">樣式分開寫</p>
    <p class = "two">上下左右寫在同一屬性中</p>
    <p class = "three">三個屬性寫在一個屬性中</p>
</body>
</html>

運行結果

有關boder的詳細屬性能夠參考：CSS 邊框

四、盒子padding（填充）

padding屬性用於設置內邊距。 是指 邊框與內容之間的距離。

屬性以下

padding-top:   上內邊距
padding-right: 右內邊距
padding-bottom:下內邊距
padding-left:  左內邊距

它也能夠簡寫,它的同一屬性簡寫和boder一致。簡寫的單詞爲：padding

五、盒子margin(外邊距)

margin屬性用於設置外邊距。 設置外邊距會在元素之間建立「空白」， 這段空白一般不能放置其餘內容。

屬性以下

margin-top:   上外邊距
margin-right: 右外邊距
margin-bottom:下外邊距
margin-left:  上外邊距

它也能夠簡寫,它的同一屬性簡寫和boder一致。簡寫的單詞爲：margin


2、經典實例

一、實現盒子居中

可讓一個盒子實現水平居中，須要知足一下兩個條件：

1. 必須是塊級元素。  
2. 盒子必須指定了寬度（由於塊級元素寬大小爲瀏覽器寬長度）

而後就給左右的外邊距都設置爲auto，就可以使塊級元素水平居中。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子水平居中</title>
    <style>
    div {
        border: 1px;
        border-style: dotted;
        width: 300px;
        height: 100px;
        background-color: pink;
          margin: 0 auto; /*通俗寫法 0 auto  上下是 0  左右是auto  自動  水平居中對齊 */
         /* margin-left: auto;
          margin-right: auto; 自動充滿*/
         /* margin: auto; 上下左右都是auto*/

    }
    </style>
</head>
<body>
    <div>
        盒子水平居中
    </div>
</body>
</html>

運行結果

當div盒子設置 margin: 0 auto;盒子會自動居中。 使用margin: 0 auto; 要注意：

　　1.使用margin: 0 auto;水平居中盒子必須有width，要有明確width;
　　2.只有標準流下的盒子 才能使用margin:0 auto; 當一個盒子浮動了，固定定位，絕對定位(後面會講)， 不能用了
　　3.margin：0 auto;居中是盒子。而不是居中文本，上面若是須要文字水平居中則需使用text-align: center;

二、外邊距塌陷問題

概念 當上下相鄰的兩個塊元素相遇時，若是上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距

不是margin-bottom與margin-top之和，而是二者中的較大者。這種現象被稱爲相鄰塊元素垂直外邊距的合併（也稱外邊距塌陷）

如圖

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外邊距塌陷</title>
    <style>
    div {
        width: 300px;
        height: 200px;
        background-color: purple;
    }
    .one {
        margin-bottom: 100px;
    }
    .two {
        background-color: pink;
        margin-top: 150px;  /*最終兩個盒子的距離是  最大的那個爲準  150*/
    }
    </style>
</head>
<body>
    <div class="one">底部margin爲 100px</div> <!-- 按照正常它們的距離爲 100px+150px = 250px 但實際爲150px -->
    <div class="two">頂部margin爲 150px</div>
</body>
</html>

解決方案： 避免就行了。

三、嵌套塊元素垂直外邊距的合併問題

概念 對於兩個嵌套關係的塊元素，若是父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合併，合併後的外邊距爲二者中的較大者，

即便父元素的上外邊距爲0，也會發生合併。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套塊元素垂直外邊距的合併</title>
    <style>
    .father {
        width: 500px;
        height: 500px;
        background-color: pink;
        /*border-top: 1px solid pink; 1. 用border*/ 
        /*padding-top: 1px;           2 用padding */
        /*overflow: hidden; */ /*     3. 用這個單詞能夠解決，具體單詞的意思咱們後面講*/
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: purple;
        margin-top: 50px;  /*這裏要father頂部距離爲 50px;*/
        margin-left: 50px;/* 這裏要fatherz左部距離爲 50px;*/
    }
    </style>
</head>
<body>
    <div class="father">         <!-- 實際運行發現只會離left有50px，距top卻爲0. -->
        <div class="son"></div>  <!-- 當把上面3個註釋任意打開一個，距top爲50px纔會成功 -->
    </div>
</body>
</html>

四、圓角邊框示例

實現以下效果

附上代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圓角</title>
    <style>
    body {
        background-color: #ccc;
    }
    .radius a {
       width: 100px;
       height: 100px;
       border-radius: 50%;    /*若是是畫圓 那麼盒子的長和寬應該一致，50%表明半徑爲長或者通常*/
       background-color: #fff;
       display: inline-block; /* 將行內標籤轉爲行內塊標籤*/
       margin: 30px; 
       text-align: center;
       line-height: 100px;
       color: red;
       text-decoration: none; /*由於連接默認是有下劃線的，這裏要去掉下劃線*/
    }
    .radius a:hover {         /*僞類 當得到焦點時*/
        background-color: red;
        color: #fff;
    }
    </style>
</head>
<body>
    <div class="radius">
        <a href="#">前端</a>
        <a href="#">後端</a>
        <a href="#">測試</a>
        <a href="#">運維</a>
    </div>
</body>
</html>

五、盒子陰影

陰影語法格式

box-shadow: h-shadow v-shadow blur spread color inset;
前兩個屬性是必須寫的。其他的能夠省略。

屬性值

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子陰影</title>
    <style>

    div {
        width: 200px;
        height: 200px;
        box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4);
        /*transition: all 1s;*/
        
    }
    div:hover {  /*鼠標通過div時候的樣子。。。*/
        box-shadow: 0 15px 30px rgba(255,0,0,0.5);
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

運行結果




你若是願意有所做爲，就必須善始善終。(7)
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程