CSS メモ -- パディング、マージンは、percentage_html/css_WEB-ITnose を計算する際の参照オブジェクトです-htmlチュートリアル-php.cn

CSS メモ -- パディング、マージンは、percentage_html/css_WEB-ITnose を計算する際の参照オブジェクトです

WBOY

リリース： 2016-06-24 11:22:55

オリジナル

747 人が閲覧しました

div のパディングがパーセンテージである 2 つのケース

padding-top、padding-bottom、margin-top、margin-bottom は、現在の要素の幅に基づくパーセンテージです親要素 を計算するには

1. div の幅がパーセンテージの場合

html コード

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta chaset="utf-8"><title>无标题</title><style type="text/css">html,body{margin:0;padding:0;height:100%;}.row{width:100%;}.row:before , .row:after{display: block;content:'';height: 0;clear:both;}.col-md-4{float: left;width:33.33%;}.blue-bg{padding-top: 33.33%;background-color: #428bca;}.red-bg{padding-top: 33.33%;background-color: red;}.yellow-bg{padding-top: 33.33%;background-color: yellow;}.container{width:100%;}</style></head><body><div class="container"><div class="row"><div class="col-md-4 blue-bg"></div><div class="col-md-4 red-bg"></div><div class="col-md-4 yellow-bg"></div></div></div></body></html>

ログイン後にコピー

レンダリング

2.幅が特定のピクセルの場合

html

rree

レンダリング