дисплей: вбудований vs дисплей: блок
Відповіді:
display: block означає, що елемент відображається як блок, як завжди були абзаци та заголовки. Блок має деякий пробіл над і під ним і не терпить поруч із ним елементів HTML, за винятком випадків, коли вказується інше (наприклад, додаючи декларацію з плаваючою ознакою до іншого елемента, наприклад).
display: inline означає, що елемент відображається в рядку, всередині поточного блоку в тому ж рядку. Тільки коли він знаходиться між двома блоками, елемент утворює "анонімний блок", який, однак, має найменшу можливу ширину.
Детальніше про параметри відображення: http://www.quirksmode.org/css/display.html
Ось таблиця порівняння:
Ви можете переглянути приклади тут.
display: block;створює елемент рівня блоку , тоді як display: inline;створює елемент на рівні вбудованого рівня . Трохи складно пояснити різницю, якщо ви не знайомі з моделлю css box, але достатньо сказати, що елементи рівня блоку порушують потік документа, тоді як вбудовані елементи цього не роблять.
Деякі приклади елементів рівня блоку включають в себе: div, h1, p, і hrHTML теги.
Деякі приклади елементів інлайн рівня включають в себе: a, span, strong, em, b, і iHTML теги.
Особисто мені подобається думати про вбудовані елементи як типографічні елементи. Це не зовсім або технічно правильно, але здебільшого вбудовані елементи поводяться дуже схоже на текст.
Більш детальну статтю по темі ви можете прочитати тут . Бачачи, як це цитують кілька інших людей у цій темі, можливо, варто прочитати.
Дисплей: блок буде приймати весь рядок, тобто без розриву рядка
Дисплей: вбудована лінія займає лише точний простір, який їй потрібно.
#block
{
display : block;
background-color:red;
border:1px solid;
}
#inline
{
display : inline;
background-color:red;
border:1px solid;
}Ви можете навести приклад у цій скрипці http://jsfiddle.net/RJXZM/1/ .
елементи блоку розширюються, щоб заповнити свою батьківську.
inline елементи контракту повинні бути просто великими, щоб утримувати своїх дітей.
дисплей: блок
займає весь ряд (100%) екрана, він завжди становить 100% від розміру екрана
дисплей: вбудований блок займає стільки ж ширини, скільки необхідно, він може становити 1% -до 100% розміру екрана
відобразити приклад вбудованого блоку
тому ми маємо дів і проліт
Стиль Div за замовчуванням - це блок відображення: він займає всю ширину екрана
Стиль інтервалу за замовчуванням відображається: вбудований блок: проміжок не починається з нового рядка і займає лише стільки, скільки потрібно
Додайте елемент кольору до елемента, і ви чудово побачите різницю між вбудованим та блоковим, як пояснено іншими плакатами.
Дисплей: блок Він дуже поводиться так само, як теги 'p', і він займає весь рядок, і поруч із ним не може бути жодного елемента, доки він не буде плаватим. Дисплей: вбудований Він просто використовує стільки місця, скільки потрібно, і дозволяє інші елементи вирівняти поруч із собою.
Використовуйте ці властивості у випадку форм, і ви отримаєте краще розуміння.
блок або вбудований блок може мати ширину (наприклад, ширина: 400 пікселів), тоді як на вбудований елемент ширина не впливає. Вбудований елемент може охоплювати наступний рядок тексту (наприклад, http://codepen.io/huijing/pen/PNMxXL змінити розмір вікна вашого браузера, щоб побачити це), тоді як елемент блоку не може.
.inline {
background: lemonchiffon;
div {
display: inline;
border: 1px dashed darkgreen;
}Елементи блоку : Елементи, які сподобалися div, p, заголовки - це рівень блоку. Вони починаються з нового рядка і займають повну ширину батьківського елемента. Вбудовані елементи : Елементи, які сподобалися b, i, span, img, є вбудованим рівнем. Вони ніколи не починаються з нового рядка і займають ширину контенту.
За замовчуванням вбудовані елементи не змушують починати новий рядок у документообігу. З іншого боку, елементи блоку, як правило, викликають розрив рядка, ви можете посилатися на це посилання