【day4】關於CSS padding屬性

2019 iT 邦幫忙鐵人賽

DAY 3

自我挑戰組

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

2019鐵人賽

Amy

2018-10-04 23:35:20

997 瀏覽

分享至

一、特性：

不支持負數值
支持百分比單位，且上下左右均是相對於父級的「寬度」計算。
請問以下範例，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 篇

RSS系列文訂閱系列文

23 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

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

【day4】關於CSS padding屬性

尚未有邦友留言

標記使用者

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