[week6] - CSS 基本:Box-model


Posted by Kayla on 2020-12-30

一個物件在畫面中,所佔掉的大小。包含widthborderpaddingmargin......

  • 內容 content-box
  • 內距 paddind-box
  • 邊框 boder-box
  • 外距 margin-box

box-sizing

控制寬高作用的對象,指定寬高給要設定的盒子使用。Ex:box-sizing: border-box 指將原先 content-box 尺寸,改設為 boder-box 尺寸。boder-box 指 boder 的內緣。

inline / block / inline-block

inline (行)

  • 排在同一列。<a><span><em><strong>
  • widthheight 將不起作用。Ex:對 span 做寬高設定,不會起作用。使用 paddingmarginborder 會生效,但會影響蓋過周遭元素
  • inline 物件居中對齊:需藉由父層設定來做對齊。

      <style>
      //CSS
      p{
          background-color: darkgoldenrod;
          text-align: center;
      }
      span{
          background-color: darkgray;
          width: 600px;
      }
      </style>
    
      //Html 
      <body>
          <p><span>dolor sit amet</span></p>   
      </body>
    

block (區塊)

  • 佔掉一整列的空間。<div><span>
  • widthheight 設定可發揮作用
  • paddingmarginborder 會向周圍 “推開”
  • 預設的寬度,佔掉一整列空間

inline-block

  • widthheight 設定可發揮作用
  • 使用paddingmarginborder 會生效,且推開周遭元素。
  • 區塊之間設定 inline-block,會因為行內元素程式空白而子層之間空隙 。
    • 解決方法:
    1. 程式之間註解掉原始碼 <!--註解-->
    2. 將父層設定 font-size: 0,但子層需要將 font-size 設定回去,不然會繼承父層字級大小。
      .wrap{ //父層
      width: 960px;
      margin: auto;
      font-size: 0px; //設定為 0
      background-color: cornsilk;
      } 
      .item{ //子層
      background-color: #eeeeee;
      width: 300px;
      font-size: 15px; //需設定字級,否則會繼承父層字級大小
      margin: 0 10px;
      display: inline-block;
      }
      

改變原先預設屬性設定:

  • block 改為 inline: display: inline
  • inline 改為 block: display: block
  • 同時擁有 inline 並排一列 和 block 設定寬高的特性。display: inline-block

##css







Related Posts

每日心得筆記 2020-07-09(四)

每日心得筆記 2020-07-09(四)

[Day 1] JS in Pipeline - DevOps for Local Development Environment (1)

[Day 1] JS in Pipeline - DevOps for Local Development Environment (1)

Spring Boot (1) - 安裝

Spring Boot (1) - 安裝


Comments