iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
0
自我挑戰組

CSS、JS-30天研究筆記系列 第 4

【day4】關於CSS padding屬性

  • 分享至 

  • xImage
  •  

一、特性:

  1. 不支持負數值
  2. 支持百分比單位,且上下左右均是相對於父級的「寬度」計算。
    請問以下範例,box2的width與hight會是多少px?
<style>
    #box1{
      width: 100px;
      height: 60px;
      background: #666600;
      text-align: center;
      vertical-align: middle;
    }
    #box2{
      width: 0px;
      height: 0px;
      padding: 10%;
      background: #660000;
    }
</style>
<body>
  <div id="box1">
    <div id="box2"></div>
  </div>
</body>

答: width:100px,因為不設定width會自動佔滿父級元素(可參考day1的分享);heigh:20px,父級寬度100*10%*2=20


二、應用-固定比例縮放圖片的配置:

<style>
  .box { 
    padding: 10% 50%;
    position: relative;
  }
  .box > img {
    position: absolute;
    width: 100%; height: 100%;
    left: 0; top: 0; 
  } 
</style>
<body>
  <div class="box">
    <img src="rimg.jpg">
  </div>
</body>

上一篇
【day3】關於CSS content屬性
下一篇
【day5】關於CSS margin屬性
系列文
CSS、JS-30天研究筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言