[week6] - CSS 基本：Box-model

##css

Posted by

Kayla on 2020-12-30

一個物件在畫面中，所佔掉的大小。包含width、border、padding、margin......

內容 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>
width 和 height 將不起作用。Ex:對 span 做寬高設定，不會起作用。使用 padding、margin、border 會生效，但會影響蓋過周遭元素

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>
width 和 height 設定可發揮作用
padding、margin、border 會向周圍 “推開”
預設的寬度，佔掉一整列空間

inline-block

width 和 height 設定可發揮作用
使用padding、margin、border 會生效，且推開周遭元素。

區塊之間設定 inline-block，會因為行內元素程式空白而子層之間空隙。

解決方法：

程式之間註解掉原始碼

將父層設定 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

Kayla

Related Posts

Comments