Используйте размер коробки для реализации рамки имитации div

Автор：Eve Cole Время обновления：2009-12-07 16:08:04

[ Браузеры, участвующие в тесте : IE6/IE7/IE8/FF3/OP10/SF4/Chrome2]
[ Операционная система : Windows]

Давайте сначала посмотрим на код:

Окно запуска кода
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Чомо" />
<link rel="start" href=" http://www.14px.com " title="Home" />
<title>Использование размера поля для реализации рамки имитации div</title>
<style type="text/css">
* { поле: 0; дополнение: 0;}
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; переполнение: скрыто;}
HTML, тело {высота: 100%;}
.top {позиция: относительное; маржа-верх:-100 пикселей высота: 100 пикселей; фон: # f60;}
.side { позиция: относительная; высота: 100%; переполнение: авто; ширина: влево; поле вправо: 0! важно; переполнение: авто;}
.main {позиция: относительное; переполнение: авто; высота: 100%; фон: # f30;}
.bottom {позиция: относительная высота: 100 пикселей фон: # f60;
</стиль>
</голова>
<тело>
<div class="top">
вершина
</div>
<div class="side">
сторона
 
 
 
 
 
 
</div>
<div class="main">
основной
 
 
 
 
 
 
</div>
<div class="дно">
нижний
</div>
</тело>
</html>

[Ctrl+A: Советы по выбору всех: сначала вы можете изменить часть кода, а затем нажать «Выполнить»]

Ключевые части :

html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; переполнение: скрыто;}

Принцип, наверное, такой :

Тысячи слов не стоят изображения. Благодаря сравнению до и после пластической операции каждый сможет увидеть эффект от размера коробки: границы-коробки.

Студенты, которые разбираются в размерах блоков, должны знать, что это происходит из мира CSS3, который находится далеко от Weiguo, поэтому IE6/IE7 не поддерживается, но я очень ответственен и говорю: эта демонстрация обычно совместима с IE6/IE7.

Потому что...

в IE6/IE7 значением размера окна <html> по умолчанию является border-box (Примечание: IE7 немного ненормален, и сознание восстановилось после переполнения: скрыто, что не повлияет на нормальную работу это демо). ,

Теперь вопрос в том, стоит ли использовать этот метод. Давайте сравним преимущества и недостатки, и вы сможете решить сами:

лучше использовать метод абсолютного позиционирования. В настоящее время этот метод имеет два основных преимущества:

в основном для каждого браузера. тот же метод, CSS-код прост, его легко изменить и легко понять.
совместимый. Метод абсолютного позиционирования существует в OP10. В настоящее время нет способа исправить ошибку, поэтому мне придется пойти в обход.

Самый большой его недостаток в том, что он негибкий. Если бы не было IE6, думаю, я бы обязательно выбрал метод абсолютного позиционирования.

Ниже приведен пример демо-приложения.

Окно запуска кода
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Чомо" />
<link rel="start" href=" http://www.14px.com " title="Home" />
<title>Использование размера поля для реализации рамки имитации div</title>
<style type="text/css">
* { поле: 0; дополнение: 0;}
html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; положение: относительное; скрыто;}
HTML, тело {высота: 100%;}
.top {позиция: относительное; маржа-верх:-100 пикселей высота: 100 пикселей; фон: # f60;}
.side { позиция: относительная; высота: 100%; переполнение: авто; ширина: влево; поле вправо: 0! важно; переполнение: авто;}
.main {позиция: относительное; переполнение: скрыто; фон: # f30; поле-верх: -100 пикселей; поле-лево: 0; z-индекс:2;}
.main iframe {высота: 100%; ширина: 100%; фон: #fff; позиция: абсолютная; сверху: 0;}
.bottom {позиция: относительная высота: 100 пикселей фон: # f60;
</стиль>
</голова>
<тело>
<div class="top">
вершина
</div>
<div class="side">
сторона
 
 
 
 
 
 
</div>
<div class="main">
<iframeframeborder="0" src=" http://www.g.cn/"></iframe >
 
 
 
 
 
 
</div>
<div class="дно">
нижний
</div>
</тело>
</html>

[Ctrl+A Все советы по выбору: сначала можно изменить часть кода, а затем нажать «Выполнить».]

Проблема, на которую следует обратить внимание :

не давайте переполнения: скрыто в теле, оно безжалостно скроет все, что находится за его пределами. Вещи, включая верх/низ (верхний/нижний колонтитул);

один важный момент, который следует понимать :

метод генерации высоты [100%+(N)px]: div { height:100%; )px;} .