Главная → Программирование → by

Полное руководство по использованию отрицательных полей

С рекомендацией CSS2 еще в 1998 году, использование таблиц постепенно отошли на второй план, и в книгах по истории.В связи с этим, CSS макетов с тех пор стало синонимом кодирования elegance.

Из всех CSS концепции дизайнеров когда-либо использовали, награда, вероятно, должно быть уделено использованию Отрицательные Margins как наиболее least говорил о методе позиционирования.Это как табу онлайн-все делают это, но никто не хочет говорить о it.

1.Настройка записи straight

Мы все используем в наших полях CSS, но когда дело доходит до отрицательных полей, наши отношения так или иначе удается занять очередь к худшему.Использование отрицательных полей в веб-дизайне настолько разделились, что, хотя некоторые из нас просто в восторге, есть и те, кто просто думаю, it’ с работой devil.

Отрицательные поля выглядит следующим образом: 

#content {margin-left:-100px;}

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

  • Они чрезвычайно действительными CSS
    Я не шучу на это.W3C даже говорит, что « Отрицательные значения для свойств полей допускаются … ” ‘Nuff сказал.Проверьте article более details.
  • Отрицательные поля не hack
    Это особенно верно.Это потому, что не понимания отрицательные поля правильно, что он получил свое hackish изображение.Он становится только рубить, если вы используете его, чтобы исправить ошибку совершили вы, elsewhere.
  • Он идет с flow
    Это не нарушает поток страницу, если применяются к элементам без поплавков.Так что, если вы используете отрицательные поля, чтобы подтолкнуть элемент вверх, все последующие элементы будут толкнул как well.
  • Очень compatible
    Отрицательные поля, полностью поддерживается всеми современными браузерами (IE6 и в большинстве случаев)
  • Он реагирует по-разному, когда поплавки applied
    Отрицательные поля не являются повседневной CSS, таким образом они должны применяться с care.
  • Dreamweaver не понимает it
    Отрицательные поля don’ T появляется в режиме конструктора DW.Почему вы даже проверку вашего сайта в режиме конструктора в любом случае

2.Работа с отрицательным margins

Отрицательные поля являются очень мощным при правильном использовании.Есть 2 типа сценариев, в которых принимают отрицательные поля центре stage.

Отрицательные поля на статических Elements

Negative margins motion on static elements

Статический элемент является элементом с no поплавка применяется.На рисунке ниже показано,как статические элементы реагируют на негативные margins.

  • При статических элементов дается отрицательная маржа по top/left, то pulls элемента в том, что указанные направления.Например: 
    /* Moves the element 10px upwards */

#mydiv1 {margin-top:-10px;}
  • Но если вы примените его к bottom/right, то doesn’ T переместить элемент вниз / вправо, как вы могли бы подумать.Вместо этого, он pulls любой последующий элемент into основной элемент, перекрывая ее. 
    /* 
* All elements succeeding #mydiv1 move up by
* 10px, while #mydiv1 doesn’t even move an inch.
*/

#mydiv1 {margin-bottom:-10px;}
  • Если ширина не применяется, добавив, отрицательные поля, чтобы его левый / правый тянет элемента в обоих направлениях увеличения его ширины.Это здесь, что маржа действует как padding.

Отрицательные поля по размещенным Elements

Рассмотрим, как наши фактические разметки:

HTML

<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>
  • Если отрицательная маржа применяется противоположный поплавка, оно создает вакуум, ведущих к перекрытию содержание.Это отличная возможность для жидкого макеты, где одна колонка имеет ширину 100%, а другой имеет определенную ширину, как и 100px. 
    /* A negative margin is applied opposite the float */
#mydiv1 {float:left; margin-right:-100px;}
  • Если оба элемента размещаются слева и margin-right:-20px применяется к #mydiv1, #mydiv2 лечит #mydiv1, как если бы оно было 20px меньше по ширине, чем есть на самом деле (тем самым, перекрывая его).What’ Интересно то, что содержимое #mydiv1 не реагируют вообще, и продолжают сохранять свое текущее width.
  • Если отрицательная маржа равна фактической ширины, то она перекрывает его полностью.Это происходит потому, поля, отступы, границы и ширина составляют в общей ширины элемента.Так что, если отрицательная маржа равна остальные размеры, то ширина элемента фактически становится 0px.

3.Эффективное Techniques

Так как мы теперь знаем, что применение отрицательной маржи правильный код CSS2, используя оно обеспечивает для некоторых очень интересных техник CSS:

Изготовление одной < ul> в 3-колонки list

Splitting a list into 3 columns

Если у вас есть список пунктов, которые просто слишком долго, чтобы увидеть вертикально, почему бы не разделить их на столбцы вместо этого?Отрицательные поля позволяют сделать это без того, чтобы добавить любой поплавков или дополнительные теги.Просто удивительно, как легко позволяет разделить списке ниже на 3 отдельных столбцов, например, так:

HTML

<ul>
   <li class="col1">Eggs</li>
   <li class="col1">Ham<li>
   <li class="col2 top">Bread<li>
   <li class="col2">Butter<li>
   <li class="col3 top">Flour<li>
   <li class="col3">Cream</li>
</ul>

CSS

ul {list-style:none;}

li {line-height:1.3em;}

.col2 {margin ... 

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров



 		
		
				
		
				

			  Главная   →  Программирование  →   by

Comments are closed.