Как работает прокладка в ответном квадрате CSS?

Question

Теперь я изучаю, как разрабатывать гибкие жидкие конструкции CSS и наткнулся на технику, где элементы отображения блоков (например, div) имеют% размеров. Для их отображения используется следующий код CSS:

.class:before { 
    content: ""; 
    display: block; 
    padding-top: 100%; 
} 

Мое замешательство возникает из-за свойства заполнения. Насколько мне известно, в модели CSS box (CSS2) отступы влияют на внутреннюю часть элемента блока, а не на внешнюю. Но в используемой технике без него элемент не виден. Может ли кто-нибудь объяснить мне в терминах модели коробки, что здесь делает свойство дополнения?

В случае мое объяснение сбивает с толку, я прилагаю две ссылки с рабочими примерами:

http://www.mademyday.de/css-height-equals-width-with-pure-css.html

http://jsfiddle.net/josedvq/38Tnx/

Александр.

Answer 1

CSS псевдо элемент ::before (:before) или ::after (:after) + content, создает дочерний элемент внутри контейнера.

И процент padding значение по отношению к width контейнера - W3C spec, padding-top:100% + display:block создает квадрат.

.square { 
 
    width: 10%; 
 
    background: blue; 
 
} 
 
.square:before { 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 100%; 
 
}

<div class="square"></div>

Answer 2

Основной ответ: если у вас есть пустой элемент в HTML, ширина и высота элемента, отображаемого на странице, будут равны 0, что делает элемент невидимым. Это имеет смысл: если в нем нет ничего, а размер 0, ну кто хочет его увидеть !?

То, что вы делаете с заполнением, составляет 100% от значения родительского поля для заполнения. Поскольку отступы влияют на внутреннюю часть блока (и оставляют его на внешней стороне), общая ширина и высота коробки изменяются. Это заставляет окно рисоваться на экране и создает синий квадрат, который вы видели в jsFiddle.

Причина, по которой ваша коробка не отображается при удалении, является атрибутом overflow: hidden. Когда вы это скажете, вы вырезаете любой дополнительный контент из окна, если содержимое внутри должно было переполнять размер окна. Если вы удалите overflow: hidden и padding 100%, тогда вы получите небольшой белый текст.

EDIT: несколько других вещей, которые происходят: Youre также использует position: absolute, который удаляет элемент коробки из обычного потока страницы. Это, и четыре следующих top, left, bottom, right тегов делают поле имеющим предопределенное местоположение. Снятие position: absolute приносит div обратно в поле зрения как синяя коробка вокруг белого текста

Это мнение: CSS - это кошмар. Это не мнение: отличным способом изучения CSS было бы однократно добавлять или вычитать строки CSS, чтобы увидеть, что они делают в отдельности. W3 школы, к счастью, также содержит огромный список всех атрибутов в CSS и HTML, а это значит, что вы можете обычно узнать howsoemthing на этих языках должны работать по поиску «W3 mythingyhere»