CSS屬性-【盒子模型】or【溢位屬性】

阿新 • • 發佈：2022-04-15

一、盒子模型

1.內邊距padding

1個值，4個方向一樣 padding：10px;

2個值，上下，左右 padding：10px 10px ;

3個值，上左右下 padding：10px 10px 10px;

4個值，上右下左 padding：10px 10px 10px 10px;

2.內邊距特性

1.可以設定單一方向

padding-方向:top bottom left lright

2.清除所有元素的內邊距

*{
	padding:0;
}

3.背景色蔓延

3.邊框 border

border:10px solid red ;
邊框: 粗細 樣式 顏色;
樣式: solid(單實線) double(雙實線) dashed(虛線) dotted(點狀線)

1.可以對邊框設定單一方向

上邊框 border-top：
下邊框 border-bottom:
左邊框 border-left:
右邊框 border-right:

2.對border進行拆分，單獨寫樣式

邊框粗細 border-width:
邊框樣式 border-style:
邊框顏色 border-color:

注: 都可以實現對四個方向的單獨設定

4.外邊距 margin

1個值，4個方向一樣 margin：10px;

2個值，上下，左右 margin：10px 10px ;

3個值，上左右下 margin：10px 10px 10px;

4個值，上右下左 margin：10px 10px 10px 10px;

5.外邊距特性

1.可以設定單一方向

margin-方向:top bottom left lright

margin-top：10px;

2.背景色沒有蔓延

3.清除所有元素的外邊距

*{
	margin:0;
}

4.外邊距支援負值

負值是往反方向走的

margin-top:-100px; 就是往上移100px

5.螢幕居中

margin:0 auto; 橫向居中

6.兄弟關係，兩個盒子垂直外邊距與水平外邊距問題

垂直方向，外邊距取最大值
水平方向，外邊距會進行合併處理

7.父子關係，給子加外邊距，但作用於父身上了，如何解決

將子盒子的margin-top====>改為父盒子的padding-top,注意高度的計算

 <style>
        .box1{
            width: 400px;
            height: 350px; 對應的父盒子高度也需減掉50px
            background-color: blue;
            padding-top: 50px; 父盒子加了50px的內邊距
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: red;            
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
        
        </div>
    </div>    
</body>

給父盒子設定邊框

border:1px solid transparent(透明)

高度還需要減去2px

<style>
        .box1{
            width: 398px;	但是對應的父盒子高度和寬度需要減掉2px
            height: 398px;	
            background-color: blue;
            border: 1px solid transparent;  給父盒子設定了邊框,transparent(顏色透明)        
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 50px; 設定子盒子外邊距為50px
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
        </div>
    </div>
    
</body>

給其中一個盒子加上浮動

<html lang="en">
<head>
    <title>Document</title>
    <style>
        .box1{
            width: 400px;
            height: 400px;
            background-color: blue;
            float: left;           
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
        </div>
    </div>
</body>
</html>

給父盒子加overflow:hidden;

<html lang="en">
<head>
    <title>Document</title>
    <style>
        .box1{
            width: 400px;
            height: 400px;
            background-color: blue;           
            overflow: hidden; 
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
        </div>
    </div>  
</body>

二、溢位屬性

1.溢位屬性

說明：

overflow:visible/hidden(隱藏)/scroll/auto(自動)/inherit;

visible：預設值，溢位內容會顯示再元素之外

hidden：溢位內容隱藏；

scroll：滾動，溢位內容以滾動條方式顯示；

auto：如果有溢位會自動新增滾動條，沒有溢位正常顯示；

inherit：固定應該遵從父元素繼承overflow屬性的值；

overflow-x：X軸溢位；

overflow-y：Y軸溢位；

溢位屬性案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>溢位屬性案例</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 清除盒子的邊距 */
        #box{
            width: 890px;
            height: 290px;
            /* background: pink; */
            margin: 0 auto;
            overflow: auto; /*給盒子設定滾動條自動顯示*/
        }
        .info{
            width: 162px;
            height: 112px;
            border: 1px solid #808080;
            float: left;
            margin-right: 48px;
            margin-bottom: 20px; 
        }
        /*設定info寬度和高度的時候，注意減去邊框*/
        .info div{
            height: 84px;
            background: #cccccc;
            font-size: 13px;
        }
        .info .price{
            height: 63px;
            line-height: 63px;/*文字設定為垂直居中*/
            padding-left: 21px;
            color: #b5b5b5;
        }
        .info .date{
            padding-left: 21px;
            color: #b5b5b5;
            padding-bottom: 10px;
        }
        .info .category{
            height: 28px;
            line-height: 28px;
            color: #000000;
            background:white;
            text-align: center;
            font-size: 12px;
        }
        .info:hover div{
            background: #219cea; 
        }
        /*給info設定偽類，滑鼠移上去，盒子背景顏色變為藍色*/
        .info:hover .price{
            color: white;   
        }
        /*滑鼠移上去，字型顏色變為白色*/
        .info:hover .date{
            color: white;   
        }
        .info:hover .category{
            color: #219cea;
            background-image: url(/day05/img/icon.png);  /*新增一個圖示*/
            background-repeat: no-repeat; /*圖片不平鋪*/
            background-position:right bottom ;/*設定小圖示的位置為右下角*/
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="info">
            <div>
                <p class="price">￥100.00元</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店鋪類][商城類]</p>
        </div>

        <div class="info">
            <div>
                <p class="price">￥100.00元</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店鋪類][商城類]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">￥100.00元</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店鋪類][商城類]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">￥100.00元</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店鋪類][商城類]</p>
        </div>
        <div class="info">
            <div>
                <p class=