Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30


Чувашия-это моя Россия

Базовые свойства блок в CSS.

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

Свойства блока являются основой формирования раскладки и дизайна средствами CSS. Эффекты, которые раньше можно было получить только при помощи таблиц, например размещение текста в цветном прямоугольнике, теперь можно получить, используя только таблицы стилей. Это лишь один из методов, освободивших разработчиков от необходимости неправильного использования (Х)НТМL-элементов для получения различных эффектов. Многие визуальные эффекты, создаваемые с помощью блока CSS, средствами (X)HTML получить просто невозможно. Блоковая модель предподносит множества проблем, возникающих у Web-разработчиков, а именно проблем, связанных с тем, что все версии Internet Explorer для Windows интерпретируют ширину блока иначе, чем все прочие CSS-совместимые браузеры. Разработчикам приходится всячески выкручиваться, чтобы раскладка одинаково отображалась во всех браузерах.

Познакомьтесь с основными свойствами блока в CSS, предназначенными для указания размера, добавления полей, границ и интервала. Эти свойства перечислены ниже:

                         height	
                         border      
                         border-top-style
                         border-right
                         border-top	
                         border-right-style
                         border-bottom-style
                         border-bottom 
                         border-left-style
                         border-left
                         border-top-width
                         border-right-width	   
                         border-bottom-width     
                         border-style
                         border-left-width
                         border-top-color 
                         border-right-color		 
                         max-height   
                         max-width	   	 
                         min-height           
                         min-width	      
                         margin-right 	
                         margin-left             
                         margin
                         margin-bottom
                         margin-top               
                         padding          
                         border-width       
                         border-color
                         border-left-color    
                         border-bottom-color
                         padding-right
                         padding-top 
                         padding-bottom
                         padding-left
                         width	
                         

Согласно CSS, каждый элемент документа сайта, будь он блочный или внутристрочный, образует прямоугольный блок, который называется блоком элемента. В основе блока элемента лежит собственно содержание, которое называется областью содержании. Ее границы называются внутренними краями блока элемента. Ширина и высота элемента определяются как расстояние между этими внутренними краями. Интервал padding - это область, находящаяся между областью содержания и дополнительной рамкой. Рамка border - это одна или несколько линий, окружающих элемент и его интервалы.

Фоновые цвета и изображения, примененные к элементу, видны в интервале и продолжаются под рамкой (если стиль рамки предполагает внутренний промежуток, то через этот промежуток будет виден фон). Наконец, за пределами рамки находятся поля произвольного размера. Область полей всегда является прозрачной, а это означает, что сквозь нее виден фон родительского элемента. Наружные границы области полей образуют наружные края блока элемента. Общая ширина элемента, т. е. место, которое элемент занимает на странице, измеряется от одного наружного края до другого и включает в себя ширину области содержания плюс совокупный размер интервалов, рамки и полей.

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

Именно здесь и лежит проблема блоковой модели в IE/Windows. Браузер Internet Explorer, за исключением IE 6 и 7, работающих в стандартном режиме, использует свойство width как всю ширину блока элемента, от одного наружного края до другого. Если также используются поля, рамки и интервалы, это может привести к существенным различием между определениями размера элемента и тем, как он выглядит в IE для Windows.

Можно тут заметить с браузером IE всегда не приятная история, всегда отстает и всякое несоответствия возникают. Ну, да ладно, речь пока не об этом.

обратно    назад    дальше     продолжение темы

Если Вы устали и решили покурить, то лучше почитайте как легко и просто бросить курить.

Можно вернуться на начало страницы как создать сайт

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: