CSS Box Model

Что такое CSS Box Model?

Каждый элемент на странице представляет собой прямоугольный блок и может иметь ширину, высоту, внутренние отступы, границы (рамку) и внешние отступы.

Это стоит повторить: Каждый элемент на странице представляет собой прямоугольный блок.

Встречайте "display" свойство

p {
  display: block;
}
p {
  display: inline;
}
p {
  display: none;
}
p {
  display: inline-block;
}

display: block;

display: inline;

display: inline-block;

ВАЖНО! Существуют пробелы между inline-block элементами

display: none;

visibility

.hidden{
    visibility:hidden;
}

Еще значения  display 

.table {
    display: table;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
}

http://htmlbook.ru/css/display

borders

Примеры borders 

http://www.quackit.com/html/codes/html_borders.cfm

div{
    border:1px solid red;
    border-color:orange;
    border-style:dashed;	
    border-width:20px
}
p{
    border-left:1px solid red;
    border-left-color: greed;
    border-left-style: dotted;
    border-left-width:10px;
}
.rounded {
  border-radius: 5px;
}

the box model

div {
  border: 6px solid #949599;
  height: 100px;
  margin: 20px;
  padding: 20px;
  width: 400px;
}

Все размеры суммируются

Width: 492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px
Height: 192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px

Размеры inline элементов

inline элементы не будут принимать значения ширины и высоты. 

block и inline-block элементы принимают значения ширины и высоты прописанные в css.

Margin & Padding inline элементов

Для inline margins работаtn только по горизонтали, слева и справа. Padding работает на всех четырех сторонах элементов инлайн-уровня; Однако padding сверху и снизу может налазить на другие строки 

block и inline-block принимают все значения margin и padding 

http://codepen.io/alexcss/pen/jIvkb

.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

Говоря о размерах, мы должны говорить о них с большой оговоркой, учитывая box model (модель коробки или боксовую модель).

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

Width: 492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px
Height: 192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px

Box Sizing

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Когда вы устанавливаете box-sizing: border-box; для элемента, поля и границы самого элемента больше не увеличат его ширину. Здесь тот же пример, как и на предыдущей странице, но с использованием box-sizing: border-box; для обоих элементов:

Box Sizing

div {
     -moz-box-sizing: padding-box;
}
div {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
div {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

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

Это гарантирует, что размеры всех элементов могут быть определены более интуитивно.

http://caniuse.com/#search=box-sizing

Mozilla Firefox: -moz-
Microsoft Internet Explorer: -ms-
Webkit (Google Chrome and Apple Safari): -webkit-

div {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

Box Sizing

стоит ли использовать?

Задание

500x200px

500x200px

padding - 50px

border - 30px

padding - 0, border - 10px

цвета: рамка - #1C4587 фон - #45818E

цвета: рамка - #E06666 фон - #93C47D

Задание

добавить для двух блоков

.box {
     -moz-box-sizing: padding-box;
}
.box {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.box {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

CSS Box Model

By Alexey Kalyuzhnyi

Made with Slides.com

CSS Box Model

  • 3,814

More from Alexey Kalyuzhnyi