第三天

桂城發表於2024-07-20
盒模型/框模型 
<!-- 元素分為兩類，內聯元素，塊元素

對應的排列方式與頁面的排列方式是一致的

所有頁面是一個二維的空間，只有寬和高

二維空間中的元素排列只有兩種方法：水平，垂直
預設先水平，排列不下，在換行按垂直方向排列

只要這個元素的型別確定，列如是一個內聯元素 display：inline,則這個元素就水平排列，一行顯示不下就換行顯示

如果這個元素的display：block,就是一個塊元素，

塊元素兩邊預設會自動新增換行，兩邊不允許存在其他元素，總是獨佔一行 -->

<!-- 所以，頁面中的所有元素，都是以一個可視的矩形塊進行排列布局的 -->

<!-- 這個矩形塊就是盒子，它的描述方式就是：“盒模型” -->

<div class="box">Hello world!</div>
<div class="box">Hello world!</div>
<style>
  .box {
    width: 150px;
    height: 150px;
    display: block;

    /* 可視屬性只有兩個，邊框和背景色  */
    border: 5px dashed red;
    background-color: violet;
    background-clip: content-box;
    /* 可以透過新增內邊距，讓內容與邊框之間可以呼吸 */
    padding: 10px;

    margin: 10px;
  }
  /* 為了簡化佈局，計算方便，我們通常直觀的認為盒子的width,height應該就是盒子最終的大小 */
  .box {
    /* width/height  = padding + border + width/height */
    box-sizing: border-box;
    /* content-box = width/height  */
    /* box-sizing: content-box; */
  }
  /* box-sizing: border-box;計算盒子大小時，將內邊距與邊框全部計算在內
         所以，width:,height就是最終大小，從而簡化佈局 */
  */

         /* 實現須有元素樣式的初始化 */
         * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  /* 盒模型常用屬性
         1.width 寬度
         2.height 高度
         3.border 邊框
         4.padding 內邊距
         5.margin  */
</style>

相關文章