css--盒子模型--塌陷問題及處理


盒子模型  

1 絕大多數標簽都可以看作盒子,可以設置寬高或設置內容;在CSS中,"box model"這一術語是用來設計和布局時使用。

  CSS盒模型本質上是一個盒子,封裝周圍的HTML元素,它包括:邊距,邊框,填充,和實際內容。

  盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

  下面的圖片說明了盒子模型(Box Model):


CSS box-model

content  盒子的內容

padding  內邊距  內容到邊框的距離

border  邊框

margin  外邊距 元素與元素的間距

 

2 盒子模型的屬性

  1) width 寬     height高   均指內容放入寬高,而非盒子的

  2) padding 內邊距          內容到邊框的距離

    padding:10px; 一個值相當於四個方向值相同(上 右 下 左)

    padding:10px  20px;   上10px  右20px  下10px  左20px

    padding:10px 20px 30px;  上 右  下   左20px

    padding:10px 20px 30px 40px;    上 右 下 左

    

    上  padding-top  

    右padding-right   

    下 padding-bottom 

    左padding-left

  

  2)border 邊框

  按三要素:border-width 邊框寬度

         border-style  邊框樣式    solid實線  dashed虛線

        border-color  邊框顏色    

  按方向:border:10px solid  blue    四個方向均同樣設置

      border-top   

      border-right   

      border-bottom  

      border-left

 

      background-color:#000;黑

      border-width:20px;

      border-style:solid  dashed  dotted doble; 上右下左

      border-color:red green blue pink;  上右下左

      border-bottom:5px  solid blue;  下邊框設置3個樣式

 

   3)margin 外邊距 元素與元素的間距

    margin:20px 30px  上右下左    同padding

    margin-top  

    margin-right

    margin-bottom

    margin-left

  

    水平居中: text-align:center;

         margin: 0  auto;   上下邊距為0   auto讓有寬度的塊級元素水平居中 eg:div  p

3 margin塌陷問題及解決

 

   父子塌陷問題
          父親沒有設置padding  border 內容時,子元素垂直方向的margin會疊加給父親
          一旦發生塌陷,疊加規則:父親最終垂直方向的margin為父子中最大的margin值,並非相加     
       
          解決方法:  1 把兒子的margin轉換成父親的padding 注意盒子總高度變化問題
                              2 給父親增加一個屬性 overflow:hidden;    //觸發了BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        /*margin 父子塌陷問題
          父親沒有設置padding  border 內容時,子元素垂直方向的margin會疊加給父親
          一旦發生塌陷,疊加規則:父親最終垂直方向的margin為父子中最大的margin值,並非相加      
        
          解決方法:  1 把兒子的margin轉換成父親的padding 注意盒子總高度變化問題
                    2 給父親增加一個屬性 overflow:hidden;    //觸發了BFC
        */

        .box1{
            width: 150px;
            height: 150px;
            background-color: pink;
           /* padding: 20px; */   
           /* overflow: hidden; */
        }
        .p1{
            width: 50px;   /*內容的寬*/
            height: 50px;   /*內容的高*/
            background-color: aqua;

            padding: 10px  20px; /*內邊距   內容到邊框的距離  上下為10px 左右20px*/
            border: 2px dashed red;
            border-bottom: 2px solid blue;
            margin: 20px;
        }

    </style>
</head>
<body>
 <div class="box1">
     <p class="p1">這是內容1</p>
 </div>

</body>
</html>
margin父子塌陷

4 並列元素(兄弟塌陷)

  垂直方向上相遇的盒子模型,會發生margin塌陷;現象就是元素二者之間的距離並非之和,而是二者之間最大的

  解決方法:只配置一個方向即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        .box1,.box2{
            width: 50px;
            height: 50px;
            background-color: red;
        }

        /*
            並列元素(兄弟)塌陷:垂直方向上的盒子模型,會發生margin塌陷
            即兩個盒子模型的margin值選二者中最大的
            解決方式:只設置一個方向
        */
        .box1{
            margin-bottom: 50px;          /*只在其中一個設置,即只設置margin-bottom 或margin-top*/
            /* margin-bottom: 30px; */   /*會發生並列元素塌陷*/
        }
        .box2{
            margin-top: 0px;
            /* margin-top: 20; */
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
    
</body>
</htm
並列元素塌陷

 

5 背景屬性

  1)背景顏色  background-color

  2) 背景圖片 background-img:url(xxx.jpeg);  // 默認平鋪

  3)背景重復 background-repeat:repeat-x;   //不寫時默認圖片平鋪   

    控制圖片平鋪:repeat x,y方向均重復; repeat-x x方向平鋪; repeat-y y方向平鋪; no-repeat 不平鋪;
  
  4)背景圖定位
    background-position:50px 50px;
    background-position:center center;
    background-position:50% 50%; //圖片中心點參考body100%移動50% 相當於center center
    background-position:left top; //左上
    background-position:right bottom; //右下
 
  簡寫:background:blue url(xxx.jpg) no-repeat cener cernter fixed; //若不需要,后四個屬性值可以不寫
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 默認圖片平鋪
            控制圖片平鋪:repeat  x,y方向均重復; repeat-x x方向平鋪;repeat-y y方向平鋪;
                        no-repeat  不平鋪;
        
        */
        .box1{
            width: 1500px; 
            height: 1500px; 
            /* background-image: url(../ddr.png);
            background-repeat: no-repeat;
            background-position: right bottom;   */

            /*簡寫 若不需要設置,后面四個屬性值可以不寫*/
            background: grey url(../ddr.png) no-repeat  center center fixed;
        }
    </style>
</head>
<body>
<div class="box1"></div>
    
</body>
</html>
background

 

5 css元素的顯示模式

  元素根據表現的特性分為:塊級元素、行內元素、行內塊元素

  

  默認特點:

  塊級元素 div p li dt dd h1~h6 ul dl

  1)獨占一行

  2)設置寬高有效 (padding margin line-height)

  3)不設置寬高,默認是父親的100%

 

  行內元素 span em i b strong

  1)可以與其他行內元素並排

  2)設置寬高無效 (行高 line-height可設置,不支持垂直方向 padding margin)

  3)元素靠內容撐開

  

  行內塊元素 img

  1)可以與其他行內元素 或 行內塊元素並排

  2)可以設置寬高

 

  一般通過如下方法去除默認的padding margin

  *{

    padding:0;

    margin:0;

  }

 

6 display 改變元素的顯示模式

  display:block; 轉化為塊級元素

  display:inline; 轉化為行內元素

  display:inline-block; 轉化為行內塊元素

  display:none; 隱藏元素

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM