Каква ще бъде ширината по подразбиране на div. Задаване на размери на CSS блокове. Размери на блокови елементи в CSS

Влад Мержевич

Всеки блоков елемент се състои от набор от свойства, като зелеви листа, насложени един върху друг. Основата на блока е неговото съдържание (това може да бъде текст, изображение и т.н.), чиято ширина се определя от свойството width, а височината от height; има подложки около съдържанието, те създават празно пространство от съдържанието до вътрешния ръб на границите; след това идват самите граници (border) и блокът се допълва с полета (margin), невидимото празно пространство от външния ръб на границите. Ширината на блока е сложна стойност и се състои от няколко стойности на свойството:

• width - ширина на съдържанието, т.е. блоково съдържание;
• padding-left и padding-right - поле отляво и отдясно на съдържанието;
• border-left и border-right - дебелина на границата отляво и отдясно;
• margin-left и margin-right - ляво и дясно поле.

Някои свойства може да липсват, в който случай ширината не се влияе. Общата ширина е показана на фиг. 1 като черна пунктирана линия.

Ориз. 1. Ширина на блока

Ако ширината не е посочена, по подразбиране е автоматично. В този случай ширината на блока ще заема цялата налична ширина, като същевременно запазва стойностите на полетата, границите и подложките. В този случай наличната ширина означава ширината на съдържанието на родителския блок, а ако няма родител, тогава ширината на съдържанието на браузъра.

Да приемем, че следният стил е написан за слой.

Ширина: 300px; /* Ширина на слоя */ margin: 7px; /* Стойност на подложката */ рамка: 4px плътно черно; /* Опции за рамка */ padding: 10px; /* Полета около текст */

Ширината на слоя според този запис ще бъде равна на 342 пиксела, тази стойност се получава чрез добавяне на стойността на ширината на съдържанието плюс лявата подложка, лявата граница и лявото поле, плюс дясното поле, дясната граница и дясната подложка. Нека обобщим всички числа.

Ширина = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

Трябва да се отбележи, че блоковият модел с формиране на ширина носи със себе си много неудобства. Постоянно трябва да правите изчисления, когато трябва да зададете определена ширина на блока. Проблеми възникват и при комбинирането на различни мерни единици, по-специално проценти и пиксели. Да приемем, че ширината на съдържанието е зададена на 90%, ако добавим полетата и границите, посочени в пиксели, тогава е невъзможно да се изчисли общата ширина на блока, тъй като процентите не се преобразуват директно в пиксели. Това може да доведе до това, че общата ширина на блока надвишава ширината на уеб страницата, което води до хоризонтална лента за превъртане. Има два изхода от тази ситуация - промяна на алгоритъма на блоковия модел и използване на вложени слоеве.

Алгоритъм на блоков модел

Както споменахме, ширината на блока се формира от ширината на съдържанието и стойностите на полетата, границите и подложките. В браузъра Internet Explorer алгоритъмът се променя автоматично и ширината на целия блок се задава равна на width . Други браузъри не променят алгоритъма толкова лесно и освен това знаете, че режимът на съвместимост е зло. CSS3 има прекрасно свойство за оразмеряване на кутии, което ще ни бъде полезно. Когато е зададено на border-box, ширината започва да включва полета и граници, но не и подложка. По този начин, като свързваме оразмеряването на кутията със стойността на border-box към нашия стил, можем да зададем ширината като процент и безопасно да посочим граница и подложка, без да се страхуваме, че ширината на блока ще се промени. За съжаление, има малък проблем с това свойство, както обикновено се случва с браузърите - не всички браузъри го разбират. Радвам се, че браузърите поне поддържат специфични за браузъра свойства. В табл 1 показва поддръжка на браузъра.

Таблица 1. Поддръжка на браузър за свойството box-sizing

Браузър	Internet Explorer	Chrome	Опера	Safari	Firefox
Версия	8.0+	2.0+	7.0+	3.0+	1.0+
Имот	оразмеряване на кутията	-webkit-box-sizing	оразмеряване на кутията	-webkit-box-sizing	-moz-box-оразмеряване

Както можете да видите от таблицата, има объркване и колебание в свойствата, така че ще трябва да направите хибрид и да посочите и трите свойства (пример 1).

Пример 1: Ширина на блока

HTML5 CSS3 IE Cr Op Sa Fx

Този пример ще работи във всички браузъри, изброени в таблицата. 1 обаче не е валиден в CSS3 поради използването на нестандартни свойства, започващи с -moz и -webkit. Ширината на блока е 100%, включително стойностите за подпълване. Без свойството box-sizing в браузъра ще се появи хоризонтална лента за превъртане.

Вложени слоеве

Използването на свойството box-sizing е добро за всички, с изключение на това, че не работи в по-стари версии на IE. Ако проектирате уебсайт, базиран на IE7 и IE6, старият доказан метод за влагане на слоеве е подходящ за вас. Идеята е проста - за външния блоков елемент се задава само необходимата ширина, а за вложения блок се задава всичко останало - полета, граници и padding. Тъй като ширината по подразбиране на блок е равна на наличната ширина на неговия родител, блоковете в известен смисъл ще се припокриват, но действителната ширина на комбинирания елемент ще бъде ясно дефинирана. Пример 2 показва използването на вложени слоеве.

Пример 2: Вложени слоеве

HTML5 CSS 2.1 IE Cr Op Sa Fx

Резултатът от този пример е показан на фиг. 2.

Ориз. 2. Ширина на блока в проценти

Предимството на вложените слоеве е използването на отстъпи (оразмеряването на кутията не ги взема предвид), гъвкавостта на метода и факта, че фонът може да се добави към един или друг слой, ако желаете. Това донякъде променя външния вид на елементите; това е особено вярно, когато са включени фонови изображения. Сред недостатъците на метода може да се отбележи включването на допълнителен блок, което усложнява структурата на кода, особено ако методът се използва често. Но това може да се счита за малко нещо в сравнение с ползите.

Често на практика трябва да решаваме проблема с групирането и подравняването на съдържание с помощта на CSS. Днес ще разгледаме основните начини за поставяне на елементи в хоризонтален ред.

Материалът в тази статия има за цел да помогне на начинаещите уеб дизайнери да овладеят техниките за оформление на уеб страници.

Какво да изберете или методи

Има няколко начина за подреждане на структурни елементи в ред в хоризонтална равнина. Най-полезните от гледна точка на практическото приложение са:

• Метод "Float".
• Метод "Inline-block".
• Метод таблица-клетка

Всеки от тях има своите предимства, приложения и недостатъци. Нека ги разгледаме по ред.

„За пробив“ или малко теория

Всички структурни елементи на HTML могат да бъдат разделени на:

В редица(вграден) – вид img, spanи подобни. Ние нямаме възможност да променяме техния фон или да им даваме произволни линейни размери.

Блокирайте– заемащи цялата ширина на родителския блок, винаги започващи на нов ред – p, h, div.

Визуален пример за вградени и блокови структури е даден по-долу:

Метод на плаване

Както вече е известно (вижте по-горе), блоковият елемент се поставя на нов ред, независимо от посочената за него ширина ( ширина). Следователно, намаляване на хоризонталния размер див-О, не можете да строите блокове в един ред.

Най-популярният (особено сред начинаещите дизайнери на оформление) метод за решение е използването на имота плавам.

CSS свойство плавампридоби голяма популярност и практическа стойност след прехода от табличния метод на оформление към блоковия.

Плаване: ляво (дясно)трансформира блоков елемент в плаващ, подравнява го към левия (десния) ръб на родителския блок и задава текст и други елементи да се обвиват надясно (наляво).

Например, нека създадем четири блока, които трябва да бъдат поставени в един ред:

< html> < head> < meta charset= "utf-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "style.css" /> < body> < div class = "bblock" >Ние строим < div class = "bblock" >хоризонтална < div class = "bblock" >ред < div class = "bblock" >от диви

И външен стилов лист със следното съдържание:

div (float: ляво; /*Задаване на обвивката*/височина на реда: 120px; размер на шрифта: 40px; фон: dodgeblue; цвят: бял; margin-top: 60px; ширина: 320px; /*Коригиране на ширината на блока*/ }

Резултатът е четири блока, подредени в хоризонтален ред и подравнени към левия край на родителския блок:

Понякога на практика е необходимо блоковете да се подравнят към десния край на родителския елемент. Нека променим потока около блоковете в предишния пример:

плаващ: надясно;

Обърнете внимание на надписите, разположени в блоковете. На пръв поглед може да изглежда, че примерът работи криво. Но всъщност браузърът обработи кода правилно: прочете блоковете отгоре надолу и направи това, което поискахме от него - подравни го надясно. Моля, имайте това предвид, когато използвате имота float: прав.

За да прекъснете потока от елементи от определено място, използвайте реда:

< div style= "clear: both;" >

В примера, обсъден по-горе, задаваме разстоянието между блоковете с помощта на отстъп margin-right. Но какво да направите, ако при оформянето на страница имате задача: да поставите блокове в ред, да ги центрирате и също така да имате отстъпи само между тях, но не и отвън?

Алгоритъмът на действията е както следва.

< div class = "wrap" > < div class = "bblock" >Ние строим < div class = "bblock" >хоризонтална < div class = "bblock" >ред < div class = "bblock" >от диви

Обвиване (ширина: 1310px; /*фиксирайте ширината на обвивката*/марж: 0 авто; /*центрирайте го*/ фон: тъмносив; височина: 120px; /*Задайте височината на обвивката*/) . bblock (float: ляво; /*Задаване на обвивката*/височина на реда: 120px; /*Височина на реда + верт. центриране на текст*/размер на шрифта: 40px; фон: dodgeblue; цвят: бял; ширина: 320px; /*Коригиране на ширината на блока*/поле- дясно: 10px; текст- подравняване: център; /*Центрирайте текста хоризонтално*/) . обвиване: последен дъщерен ( margin- дясно: 0px; /*Премахване на полето на последния div*/ }

В резултат на това получаваме следната картина:

Е, не можете да разгледате всички практически ситуации, така че нека преминем към общите характеристики.

важно!!!

Метод "Inline-block".

Както вградените, така и блоковите елементи имат своите предимства и недостатъци в контекста на всяка конкретна задача, която се решава. Ами ако комбинирате предимствата им?

Запознайте се с акцента в програмата – имот дисплей: inline-block.

дисплей: inline-blockгенерира елемент от блокова линия, който по същество е елемент от линия, но запазва свойствата на блока - позволява ви да променяте линейните размери, да задавате полета, отстъпи и т.н.

Елементът с блокова линия има следните свойства:

• Височината и ширината на блока се определят автоматично въз основа на съдържанието и стойността на подплата ( подплата)
• височината и ширината на блока могат да се задават фиксирано
• Няма ефект от срутването на границите.

Нека да разгледаме пример за създаване на просто навигационно меню, съдържащо изображение и връзка.

< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Връзката към меню 1 е по-дълга от обикновено < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Връзка към менюто 2 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Връзка към менюто 3 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Връзка към менюто 4

Nav ( дисплей: вграден блок; /*Задаване на блоков ред*/ширина: 180px; /*задайте ширината на блока*/фон: dodgeblue; ) . низ (подравняване на текст: център; /*Подравнете текста хоризонтално*/ }

В резултат на това получаваме следното меню:

Както можете да видите, се оказа малко криво... Но не възнамеряваме да се разстройваме, затова прилагаме свойството CSS към нашите divs вертикално подравняване(вижте по-долу за подробности):

вертикално подравняване: отгоре;

Нашата навигационна лента вече е подравнена към горния ред:

Разбира се, даденият пример е примитивен, но съм сигурен, че въз основа на него можете да създадете истински шедьовър!!!

важно!!!

• За по-стари версии на Firefox добавете реда:
  

  дисплей: - moz- inline- стек;

  
  и обвийте елемента в допълнителна обвивка на div.
• IE 7 и по-стари версии - добавете редовете:
  

  увеличение: 1; /*set hasLayout*/ * дисплей: inline; /*звездичка – хак за IE */ _височина: 250px; /*min-height не работи в IE6*/

• Отбелязвам, че определени браузъри реагират избирателно на тези редове (Firefox на първия, IE на останалите).

Метод на таблицата

Табличният подход отдавна е стандарт за оформление, главно поради простотата и интуитивността на маркирането. Най-вероятно това е причината за появата на форматиране на таблици в CSS.

Имоти дисплей: таблица (таблица-клетка, вградена таблица), ви позволяват да извършвате таблично форматиране на елементи, без да използвате HTML таблици.

За да поставим блокове хоризонтално, се нуждаем от родителски елемент, който има свойството дисплей: таблица, и дъщерни елементи (клетки), притежаващи свойството дисплей: клетка-таблица:

< div class = "wrap" > < div class = "bblock" >Ние строим < div class = "bblock" >табличен < div class = "bblock" >ред < div class = "bblock" >от диви

Bblock (дисплей: клетка от таблица; размер на шрифта: 32px; ширина: 200px; височина: 200px; фон: златен; подравняване на текст: център; вертикално подравняване: средата; ) . обвиване (дисплей: таблица; разстояние между границите: 20px 20px; цвят на фона: тъмносив; )

важно!!!

1. За разлика от методите "Inline-block" и "float", при намаляване на ширината на прозореца на уеб браузъра клетките не се преместват надолу.
2. Нямате способността да зададете свойството margin за клетки на псевдо таблица.
3. Съвместимост между различни браузъри. Свойствата от дисплея: семейство таблица* не се поддържат от IE6, IE7. Освен това в IE8 може да видите грешка при динамично изобразяване на псевдотаблични елементи под формата на произволно липсващи клетки. Тази грешка най-често се появява при първоначалното изчертаване на документа.

Тази дълга обучителна статия ще бъде посветена на важни теми, чиято задача е да сортира методите за работа с блокови елементи, да обясни на читателя защо се използва промяна на модела за изчисляване на ширината и височината на елементите, как да управлявате препълването на блокови елементи и как да работите с минимални и максимални размери на елементите.

Докато изучавахме модела на CSS кутията, научихме, че свойствата за ширина и височина задават ширината и височината на вътрешната област на елемента ( област със съдържание), който може да съдържа текст, изображения и други елементи.

В модела на кутията на CSS има разлика между стойностите на ширината и височината, които давате на елемент, и количеството пространство, което браузърът запазва, за да го покаже. Общата ширина и височина на елемента представлява областта на прозореца на браузъра, която се състои от ширината и височината на подложките, границите и персонализираните стойности, посочени за тях.

Общата ширина на елемента се изчислява по формулата:

див(ширина: 150px; /* задава ширината на елемента */височина: 150px; /* задаване на височината на елемента */подложка: 10px; /* задаване на вътрешната подложка на елемента */граница: 5px; /* задава границите на елемента */ }

В нашия случай това спасява ситуацията и не се налага да правим никакви изчисления и в бъдеще се страхуваме от промени, които може да са необходими за нашите елементи. Нека оставим тези ненужни изчисления от страна на браузъра и да погледнем резултата от нашия пример:

За да разберем напълно този модел за изчисляване на ширината и височината на елементите, нека консолидираме знанията си със следния пример:

Стойността на свойството content-box е стойността по подразбиране и изчислява общата ширина и височина на елемента според класическата схема. Използване на ширина като пример:

150px (персонализирана ширина) + 10px (лява подложка) + 10px (дясна подложка) + 10px (лява граница) + 10px (дясна граница) = 190px.

Що се отнася до втория елемент, към който приложихме свойството border-box, персонализираната ширина и височина на елемента вече включват съдържанието, рамката и подложката на елемента. В повечето случаи използването на свойство със стойността border-box е за предпочитане на страниците, тъй като прави крайните размери на елемента очевидни и избягва някои от непредвидените ситуации, обсъдени по-горе.

Резултатът от нашия пример:

Контролиране на препълване на блоков елемент

По време на процеса на оформление ще срещнете ситуации, при които съдържанието на даден елемент ще се показва извън границите на елемента. По подразбиране браузърът показва това съдържание (изобразява се препълване на елемент), което в някои случаи води до визуални грешки. CSS свойството overflow е отговорно за това поведение на браузъра. Нека разгледаме неговите възможни стойности:

Нека разгледаме следния пример:

В този пример поставихме четириблокове с фиксирана ширина и височина, за които са посочени различни стойности на препълването на свойството CSS:

• Първи блок(видима стойност) – съдържанието излиза извън границите на елемента (стойност по подразбиране).
• Втори блок(скрита стойност) – съдържанието, което препълва елемента, се изрязва.
• Трети блок(стойност на превъртане) – Преливането се изрязва, но се добавя лента за превъртане.
• Четвърти блок(автоматична стойност) – както при стойността на превъртане, само лента за превъртане ще бъде добавена автоматично, ако блокът прелива по определена ос ( х- хоризонтално, или г- вертикално), вместо да се показва постоянно на страницата.

Резултатът от нашия пример.

Здравейте, скъпи читатели на сайта на блога. Днес ще говорим за това как можете да зададете размерите на областта със съдържание, като използвате височина и ширина и как да конфигурирате показването на това съдържание, в случай че има повече от него, отколкото може да се побере в пространството, разпределено за него (css правило за препълване с стойности скрити, превъртане, автоматично).

Първи параграф текст

Текст на втория

защото ширината и височината за тези абзаци не са посочени, тогава по подразбиране самият браузър ги изчислява въз основа на собственото си разбиране на стойността Auto. В резултат на това абзаците заемат цялото им пространство по ширина, а по височина съответстват на височината на съдържащото се в тях съдържание.

Нека сега направим първата промяна и твърдо кодираме ширината на първия абзац (width:50px):

Текст на първия

Текст на втория

Като цяло се случи очакваното - хоризонталният размер намаля до стойността, посочена в width:50px, а височината на абзаца все още се формира благодарение на height:auto (стойността по подразбиране). В резултат на това той стана такъв, че можеше да съдържа целия текст.

Но нека сега ограничим височината на контейнера с помощта на height:15px.

В резултат на това получихме, че текстът вече не се вписва в нашия малък контейнер за абзаци и затова безопасно се втурна в областта на своя съсед. Именно това служи за контролиране на поведението на съдържанието в подобни ситуации. правило за преливане.

Overflow означава "преливане" или с други думи "преливане на съдържание". Той говори за това какво трябва да се случи със съдържанието, ако то не се побира в зоната (контейнер), която му е разпределена.

Overflow има няколко валидни стойности, но по подразбиране е видим (покажи):

Ето защо в последния ни пример текстът на горния абзац припокри долния (overflow:visible беше използван по подразбиране - показване на съдържание, което не се побира в контейнера). Можем да използваме другата крайност - препълване: скрито. Тогава всичко, което не се побира в контейнера, няма да бъде показано на уеб страницата:

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

Но би било много по-логично да се използва стойността Автоматиченза Overflow, ако трябва да направите ленти за превъртане. В този случай браузърът сам ще изчисли кога да ги покаже и по кои оси.

Например, ако използваме overflow:auto, ще можем да превъртаме само по оста, където съдържанието не се побира в границите на контейнера:

Текст на първия

Текст на втория

За да обобщим, можем да кажем, че Overflow позволява доста гъвкаво конфигуриране на опциите за показване на съдържаниев случай, че излезе от контейнера си. Ще имате възможност да покажете съдържанието, което е напуснало (видимо), да не го показвате (отрязване - скрито) или да направите задължително превъртане (превъртане) или превъртане според нуждите (автоматично).

Има и варианти за писане на това правило, свързани с CSS3, но които се поддържат от всички браузъри, което означава, че могат да се използват безопасно. Говоря за опциите overflow-x и overflow-y, които ви позволяват да зададете или не зададете превъртане по отделните оси (x - хоризонтална, y - вертикална).

Ако например трябва да се уверите, че хоризонталното превъртане никога не се появява, а вертикалното превъртане се появява само когато е необходимо (ако съдържанието не пасва), тогава за Html елемента ще трябва да посочите overflow-x:hidden и overflow- y:auto . Това е всичко, проблемът ще бъде решен, защото този трик с ушите се поддържа от всички браузъри.

Височина и ширина като процент - защо ви е необходим doctype?

Сега нека поговорим за това от какво се изчислява ширината, определена като процент. Не забравяйте, че в началото на статията обещах да насоча вниманието ни към това. Е, всъщност правилото за ширината на CSS не е изключение тук и точно като подложката и полето се изчислява като процент от хоризонталния размер на контейнера със съдържание.

Ситуацията е малко по-объркваща с височината на областта на съдържанието, посочена като процент. Би било логично да се предположи, че същото важи и за височината на контейнера. Но тук започваме да се сблъскваме с дуализъм (два модела на поведение) - както преди и както сега според приетите стандарти. В тази връзка трябва отново да се докоснем до темата за режимите на дисплея, които обсъдихме по-рано.

Исторически, след приемането на стандартите, все още имаше голям брой документи, генерирани според старите правила на чист Html език и трябваше да се направи нещо с тях. В същото време той също се развиваше (появи се стилов език за маркиране и някои тагове и атрибути станаха остарели), така че беше необходимо по някакъв начин да се покаже на браузъра по какви стандарти ще трябва да анализира този код.

За да се разделят новите документи (които взеха предвид всички нововъзникващи стандарти) и старите (които често не взеха предвид нищо друго освен чист Html), Melkosoft предложи да се използва малка функция от XML езика, който току-що се появи по това време . Тази функция беше услуга и сега се нарича doctype декларация.

Може да изглежда различно (прочетете повече за това в статията, спомената малко по-горе), но тази опция винаги ще работи:

По този начин браузърът получи маркер какви стандарти трябва да използва, за да анализира документа. Ако декларацията на doctype присъства, тогава тя преминава в стандартен режим. Ако браузърът не намери doctype на първия ред от кода на документа (или е написан неправилно, което е идентично с липсата му), тогава се преминава към т.нар. триков режим(режим странности).

Документ, който няма doctype, ще се появи в браузъра, сякаш е много стар (античен). Ако добавите декларация към същия документ, тогава браузърът ще изхвърли своята древност и ще започне да работи с кода на документа според всички приети в момента стандарти.

Но концепцията за античността е много различна. Например, на колко години може да бъде сега популярният браузър Google Chrome, който се появи едва през 2008 г.? IE, разбира се, има доста богата история. Следователно всички браузъри от всяка версия ще покажат документа без декларация (в режим на странности или трикове) по същия начин, както би го направил стар, защото това е версията, която се счита за основна.

Защо говорих толкова дълго за режимите на показване на браузъра? Но тъй като за тези два режима, определянето на височината на областта на съдържанието като процент е много различно по отношение на изчисляването на същата тази височина.

Задаването на височината (в проценти) на областта със съдържание в стандартен режим (когато в началото на документа е посочен правилният doctype) изобщо няма да бъде възможно, освен ако височината за контейнера, в който е затворено това съдържание (посочена от вие в процентна височина ще бъдете игнорирани).

Ако премахнем декларацията на doctype от кода на документа, ще видим следната картина:

За режима на следване на стандартите (в началото на документа е написана декларация), първо трябва да зададете височината на контейнера (в нашия случай, за Div, контейнерът ще бъде Body таг) и едва след това браузъра ще се справи правилно с височина:100%:

В резултат на това получихме два напълно различни подхода при задаването на височината на областта на съдържанието като процент, така че за да избегнете проблеми, определено ви съветвам да посочете правилната декларация на doctypeв началото на всички ваши документи (уеб страници). Има още един пример, при който разликата между режима на следване на стандарти и режима на трикове ще бъде колосална.

Ако зададете височината и ширината за областта на съдържанието за който и да е Html елемент и също така посочите подложката и ширината на границата за този таг, тогава в режим на quirks (без писмена декларация) в различни браузъри всичко това може да се интерпретира по различни начини.

В стария браузър IE 5.5 подложката и ширината на рамката ще се броят навътре от размерите, посочени чрез височина и ширина. Тези. общият размер на елемента ще съответства на това, което е зададено в тези свойства на CSS (това е наследена схема, която вече не се използва).

В други модерни браузъри подложката и ширината на рамката ще бъдат добавени към размерите, които са посочени във височина и ширина. Тези. в този случай (триков режим без doctype), първоначално зададените размери на областта на съдържанието ще бъдат разширени с размера на вътрешната подложка и рамката.

Е, ако напишете директива в документа, тогава в абсолютно всички съвременни и стари браузъри тези проблеми с двойствеността на подхода могат лесно да бъдат избегнати. В този случай и в IE 5.5 подложката и ширината на рамката ще бъдат сумирани с размерите на областта на съдържанието, както се изисква от съвременните CSS стандарти. Следователно, за да се избегне винаги използвайте doctype.

Късмет! Ще се видим скоро на страниците на сайта на блога

Може да се интересувате

Позиция (абсолютна, относителна и фиксирана) - начини за позициониране на Html елементи в CSS (правила отляво, отдясно, отгоре и отдолу)
Плаване и изчистване в CSS - инструменти за блоково оформление
Padding, Margin и Border - задайте вътрешна и външна подложка в CSS, както и граници за всички страни (отгоре, отдолу, отляво, отдясно)
Позициониране с помощта на Z-индекс и CSS Cursor правило за промяна на курсора на мишката
За какво е CSS, как да свържете каскадни стилови таблици към Html документ и основния синтаксис на този език
Таг, клас, Id и универсални селектори, както и селектори на атрибути в съвременния CSS
Приоритети в Css и тяхното увеличаване поради Важно, комбинация и групиране на селектори, потребителски и авторски стилове Различен стил за вътрешни и външни връзки чрез CSS
Размерни единици (пиксели, Em и Ex) и правила за наследяване в CSS
Display (block, none, inline) в CSS - задайте типа на показване на Html елементите на уеб страницата