Схлопування зовнішніх відступів. Перемога над неочевидним. Схлопування зовнішніх відступів Сусідні елементи і схлопування

Пише хтось в розпатланих почуттях, "ні здрастє ні досвіданія". :-))

Як змусити дизайнера нести відповідальність за помилки? У нашій компанії наприклад є дизайн студія, з якої постійно співпрацюємо. І майже в кожному макеті, який вони для нас роблять, зустрічаються друкарські помилки. Деякі з них ми робимо самі і самі ж виправляємо коли нам надсилають макет на звірку, деякі доводиться виправляти по кілька разів - дизайнери беруть купу поправок, щось виправляють, щось забувають. А іноді нові помилки виникають вже в готової продукції, яку дизайн студія сама відправляє в друк. У студії немає свого коректора, але є менеджери, які курирують проекти, є арт директор, є дизайнери і веб-майстра. Коротше веселі і талановиті хлопці, але вже дуже неакуратні. Ви - ілюстратор, і в вашому оточенні багато дизайнерів ілюстраторів і людей творчих професій. Але хіба творчість не передбачає акуратність? Хіба відповідальність творця закінчується на тому, щоб намалювати картинку і приклеїти до неї не-важливо-який-текст? Часто у вас виникають проблеми з помилками і хто їх повинен вирішувати - той, хто робить макет або той хто його замовляє? І що робите ви, коли вам приносять щось виготовлене з грубими помилками? Дуже наболіло.

Вітаю!
Безумовно я думаю, що кожна людина повинна робити ВРЮ свою роботу дуже добре. Але так само я знаю, що дуже часто ілюстратори, дизайнери та інші люди, "які збирають контент в щось" роблять помилки, не тому що вони такі ледарі і недбалі особистості. А тому що це особливість їх роботи - вони налаштовані на картинки, макет і оформлення, і не думають про помилки і друкарські помилки. Щоб перевірити помилки, потрібно свідомо, і чималим зусиллям, переключити мізки саме на читание тексту і вдумування в нього. І навіть в цьому випадку можна багато всього напропускали, тому що при роботі з текстом, як з графікою, око замилюється якимось особливим способом.

Які з цього є виходи?
1 - Повністю заборонити дизайнерам (і відучувати їх від цього) взагалі чіпати текст. Ось зовсім. дали текст, як є - ось з ним працюємо. Нічого не дописуємо, що не приписуємо. не виправляє. не списував вручну з картинки, і.т.д. І привчити, що. якщо доводиться самому виправити хоч одне слово, або навіть частина слова - це завжди ситуація особливої бойової готовності - треба тоді сто раз перечитати, перевірити ще раз, і (!!!) все одно при цьому не забути повідомити менеджеру, що десь правил текст.

І це не є підтвердження того, що дизайнери - тупі тварини, які читати і писати не вміють, це відповідальне поводження з важливими речами, про які відомо, що вони часто розлазиться через особливості цієї роботи.

Я давно себе привчила віддавати коректора або редактору (або менеджеру проекту) ВСЕ, де я щось писала. Всі. Правда все. Кожну картинку, на якій рівно три слова. Тому що і там буває. І говорити про це, якщо я десь тексти змінювала. Теж всім. Щоб все ще раз подивилися. мені не соромно. Я знаю, що тупі помилки в упор не бачу. Набагато соромніше, коли 2000 примірників надрукованих на дорогому матеріалі прийдуть з помилкою.

2 - Усім менеджерам говорити - голосно і зрозуміло - що вашим дизайнерам заборонено лізти в текст і змінювати там хоч одну букву, і ось точно як надішлють, так вони на місце і поставлять. І якщо там буде помилка, то це буде помилка менеджера. Це завдання менеджера вирішити, хто перевіряє помилки - він сам, або інший менеждер, або журналіст, якому доручили, або редактор або коректор. І весь час тикати носом - це ВАША завдання, ваша. Дизайнер тут ні до чого, ілюстратор ні до чого, добре, якщо вони зайвий раз подивляться і помітять, але це не їхнє завдання і не їх відповідальність. Це менеджер повинен, після останнього, передостаннього і тридесятого перероблення ще раз подивитися всі, і повідомити дизайнеру, кщо там ще букву пропустили, і тут спецсимвол виліз.

3 - Взагалі раніше була така традиція: якщо щось видається великим тиражем (від 200) існує "сигналка" - одна остання остаточна версія. яку дають почитати і подивитися кільком людям. При тиражі тисяч в 10, людей повинно бути приблизно стільки ж - 8-10. При більш маленькому тиражі - все одно мінімум троє. Вони повинні дуже старанно прочитати, і розписатися, що читали. Якщо після них ще буде помилка, хоча б буде пара людина, які це бачили і яких можна буде запитати - як вони втрьох переглянули? Так само, якщо ці троє пару раз "зганьбила", вони потім самі теж активно візьмуть участь в піханія тих, хто спочатку мав ці помилки не пропустити. Треба на кого-то звалити відповідальність за це - і питати. Тоді будуть намагатися не допускати.
А зараз, судячи з опису, відповідальним себе не відчуває ніхто.

Багато початківців верстальників і веб-розробників стикаються з ситуацією, коли елементи на сторінці поводяться не так, як очікується, і дане поведінка здається абсурдним. Але не варто забувати, що існуючі домінуючі технології створені людьми мислячими, а якщо ця технологія ще й перевірена часом, значить, в такому дивному, на перший погляд, поведінці, була і залишається необхідність.

Напевно, кожен стикався з властивістю border-collapseдля таблиць. Відомо, що ця властивість із значенням border-collapse: collapseвидаляє одну з меж для сусідніх осередків таблиці, запобігаючи дублювання їх кордонів. Схоже працює і особливість блокової моделі, яка називається спаданням зовнішніх відступів(Англ. - Collapsing Margin). Схлопування зовнішніх відступів - особливість блокової моделі CSS, яка полягає в накладенні вертикальних зовнішніх відступів двох або більше блокових елементів (які можуть бути чи не бути сусідами) для формування одиночного зовнішнього відступу. Відступ, що сформувався в результаті даного об'єднання, називається схлопнувшімся відступом. Зауважте, що дана особливість може бути застосована тільки до вертикальних відступами елемента, тобто до margin-topі margin-bottom.

Для спрощення, уявляйте схлопування наступним чином: коли зовнішні вертикальні відступи блокових елементів стикаються, то залишається відступ, значення якого дорівнює значенню більшого з них, при цьому значення відступу елемента з меншою кордоном дорівнює нулю. На малюнку нижче розмір однієї клітини фонового малюнка дорівнює 20 пікселів; як бачимо, відступ між елементами дорівнює 40 пікселів, хоча на перший погляд, дивлячись на код, людині, яка не знайома з принципами схлопування, може здатися, що блоки розміщені неправильно, так як їх відступи НЕ плюсуються:

# Block1 (margin: 40px; / * Задаємо для першого блоку відступи з усіх сторін 40 пікселів * /) # block2 (margin: 40px; / * Задаємо для другого блоку відступи аналогічно першому * / margin-top: 20px; / * переобумовленої верхній відступ * /)
* Вихідний код прикладу

У разі, якщо одна з величин має мінусове значення, то фінальне значення схлопнувшегося відступу формується шляхом підсумовування вихідних значень блокових елементів. У разі, якщо обидві величини негативні, то використовується більше негативне значення (менше з арифметичної точки зору). Наприклад, якби block1 мав значення margin-bottom: -60px, А блок block2 margin-top: 50px, То фінальне значення відступу між елементами було б мінус 10 пікселів.

Як і в будь-який інший концепції, тут теж бувають винятки, тому схлопування не працює в наступних випадках:

з «плаваючими» блоками, які використовують властивість float;
з кореневими елементами ( html, body);
з абсолютно позиціонуються елементами, що мають властивість і значення position: absolute;
в малих елементах.

Існують також специфічні виключення, що застосовуються в залежності від того, в якому ієрархічному взаємодії знаходяться блоки (про це нижче):

Якщо елементи мають значення властивості overflow, Отличимое від visible, То в таких елементах не була схлопиваются відступи з відступами їх спадкоємців.
Елементи з властивістю clearedНЕ схлопиваются верхніми відступами з нижніми відступами їх батьків.

Теорія може бути складна для розуміння, тому перейдемо до прикладів. Розглянемо класичні випадки, існуючі в спадкуванні: коли блоки мають зв'язок нащадок-нащадок ( sibling-sibling), Елементи сусідять один з одним і мають загального батька; а також коли блоки мають зв'язок батько-нащадок ( parent-child) - один елемент вкладений в інший. В обох випадках схлопування успішно застосовується, але має кілька нюансів, про які варто поговорити.

Сусідні елементи і схлопування

Зазвичай, виключаючи застосування додаткових властивостей, зовнішні відступи будь-яких сусідніх НЕ кореневих блокових елементів схлопиваются, приклад схлопування сусідніх елементів наведено вище.

Іноді потрібно уникнути даного ефекту. Крім застосування властивостей, що перекривають схлопування, можна використовувати деякі хитрощі, наприклад, не ставити елементам значення відступу, крім єдиного відступу - зверху чи знизу, але якщо таким чином поставити значення ряду елементів, може виникнути потреба в уточненні відступів для першого або останнього елемента щодо батьківського , або ж змінювати його поле:

#parent (margin: 40px; border: 1px dashed white; background: rgba (150, 0, 255, 0.2); width: 204px;) / * Для візуальної симетрії треба було б додати padding-bottom: 20px; * / .Block (height: 16px; margin-top: 20px; border: 2px solid white; background: rgba (150, 0, 255, 0.7);)
* Вихідний код прикладу

Як бачимо, тут потрібно додавати батьківського елементу нижнє внутрішнє поле для того, що б вирівняти всі елементи. Чи варто ламати ноги, що б підставляти милиці - справа смаку, але я б не радив.

Схлопування відступів елементів, пов'язаних батьківської зв'язком

В даному випадку схлопування працює трохи заплутаніше і складніше, ніж в прикладах вище. Для початку потрібно знати, що отсупи блоків схлопиваются відповідними полями. Це означає, що верхнє поле батька схлопнется з верхнім полем свого нащадка. Для розгляду даної ситуації уявімо, що є три блоки: зовнішній блок-батько, блок-батько і дочірній блок. Для того, щоб спрацювало схлопування, потрібно що б блок-батько не мав ні полів, ні кордонів (їх значення були нульові). Таким чином, зовнішні поля цих елементів стикаються. Зауважте, що нульові значення внутрішніх полів і кордонів для батьків - обов'язкова умова спрацьовування схлопування.

Outside_parent (margin-top: 40px; margin-left: 40px; border: 2px dotted black; background: rgba (150, 0, 255, 0.7);) .parent (padding: 0px; / * Зверніть увагу що внутрішні відступи рівні 0 * / border: 0px solid grey; / * Полів у батька так само не повинно бути * / margin-top: 40px; / * Цей відступ схлопнув з дочірнім * / background: rgba (150, 0, 255, 0.7);). daughter (width: 196px; margin-top: 60px; / * Актуальне значення відступу * / border: 2px solid white;)
* Вихідний код прикладу

Нагадаю, що розмір однієї клітини дорівнює 20 пікселів, тому без схлопування відступ між елементами був би 60 + 40 пікселів, але через застосування даного ефект він дорівнює максимальному значенню одного з елементів, в даному випадку - 60 пікселям (3 клітини). Бачимо, що відступ дочірнього блоку замінює верхній відступ для свого батька. Якщо для батьківського елемента задати щось: поле ( padding) Або ж кордон ( border), То схлопування не застосовуючи і відстань між першим блоком і другим буде очевидні 100 пікселів. Таким способом, можна управляти наявністю даного ефекту, додаючи маленьке поле, або ж безбарвну кордон, припустимо, товщиною 1 піксель, тим самим відключаючи ефект схлопування.
На перший погляд може здатися, що ефект працює тільки при формуванні структури як в прикладі вище, але це не так: схлопування спрацює і між сусідніми елементами, коли у них вкладені інші блоки. Розглянемо ситуацію, коли є зовнішній блок і два блоки, один з яких вкладений в інший.

Outside (height: 16px; margin: 20px 0 0 40px; border: 2px solid white; background: rgba (150, 0, 255, 0.7); margin-bottom: 20px; / * Цей відступ так само схлопнув * /) .parent (margin-top: 40px; / * Цей відступ схлопнув з дочірнім * / margin-left: 40px;) / * Батьківський блок не повинен мати ні полів ні кордонів для спрацьовування ефекту * / .daughter (margin-top: 60px; / * актуальний схлопнувшійся отсуп * / border: 2px solid white;)
* Вихідний код прикладу

Примітно, що схлопування в прикладі вище спрацювало два рази: спочатку схлопнулись відступи батьківського і дочірнього елемента, потім сформувався відступ схлопнув з нижнім відступом зовнішнього елемента.

висновок

Для хорошого фахівця важливо контролювати всі належні йому інструменти і атрибути: хорошого механіка хвилює не тільки кількість клапанів в двигуні, але і наявність хорошої системи упорскування палива і якість самого палива. Так і хороший веб-розробник повинен контролювати кожен піксель і не втрачати важливі деталі в структурі сайту.

Диявол в дрібницях, диявол в пікселях.

Теги: Додати теги

Яка помилка допущена в наступному фрагменті коду: for (i = 0; i< 10; i++) {int sum;sum = sum + i;}System.out.println("Sum is: " + sum);В этом фрагменте кода имеются две существенные ошибки. Во-первых, переменная sum создается на каждом шаге цикла for, а следовательно, в промежутке междупоследовательными итерациями предыдущее значение подсчитываемой суммы небудет сохраняться в этой переменной. И во-вторых, переменная sum недоступна запределами кодового блока, в котором она объявлена. Поэтому ссылка на нее привызове метода println () недопустима.

Поясніть відмінність між префиксной і постфіксной формами оператора інкремента.Еслі оператор інкремента передує операнду, виконуюча система Java виконає операцію до отримання значення операнда і використання його в іншій частині виразу. Якщо ж оператор інкремента слід за операндом, виконуюча система спочатку отримає значення операнда і лише потім інкрементіруетсам операнд.

Покажіть, яким чином укорочений логічний оператор І може запобігти поділ на нуль.if ((b! = 0) && (val / b)) ... Додаток А. Відповіді на питання для самоперевірки 559.

До якого типу просуваються типи byte і short при обчисленні виразу? У вираженні типи byte і short просуваються до типу int.

Коли виникає потреба в явному приведення типів? Явна приведення типів може знадобитися при відкриванні з несумісними типами або втому випадку, якщо перетворення типів призводить до звуження діапазону допустімихзначеній.

Напишіть програму, яка знаходила б прості числа в межах від 2 до 100.// Знаходження простих чисел в межах від 2 до 100.class Prime (public static void main (String args) (int i, j; boolean isprime; for (i = 2; i< 100; i++) {isprime = true;// проверить, делится ли число без остаткаfor(j=2; j < i/j; j++)// если число делится без остатка, значит, оно простоеif ((i%j) == 0) isprime = false;if(isprime)System.out.println(i + " is prime.");}}}

Чи впливають зайві дужки на ефективність виконання програм? Ні, не впливають.

Чи визначає кодовий блок область дії змінних? Так, визначає. Глава 3. Керуючі оператори

Напишіть програму, яка вводила б символи з клавіатури до тих пір, покане зустрінеться точка. Передбачте в програмі лічильник числа прогалин. Сведеніяо кількості прогалин повинні виводитися в кінці програми .// Підрахунок прогалин, class Spaces (public static void main (String args) throws java.io.IOException (char ch; int spaces = 0; System.out.println ( "Enter a period to stop. "); do (ch = (char) System.in.read (); if (ch == 1") spaces ++;) while (ch! = System.out.println ( "Spaces:" + spaces) ;))

Яка загальна форма багатоступінчастої конструкції if-else-if? If (умова) оператор; else if (умова) оператор; else if (умова) оператор; elseоператор;

Припустимо, є наступний фрагмент коду: if (х< 10)if(у >100) (if (! Done) х = z; else у = z;) else System.out.println ( "error"); // що якщо? З яким з операторів if пов'язаний останній оператор else? Останній оператор else відповідає біліжайшему оператору if того ж рівня, тобто. if (у> 100).

Напишіть цикл for, в якому перебиралися б значення від 1000 до 0 з кроком -2.for (int i = 1000; i> = 0; i - = 2) // ...

Коректний наступний фрагмент коду? For (int i = 0; i< num; i++)sum += i;count = i;Нет, не корректен. Переменная i недоступна за пределами цикла for, в которомона объявлена.

Які дії виконує оператор break? Опишіть обидва раріанта цього оператора.Оператор break без мітки викликає негайне завершення поточного циклу ілівираженія switch. А оператор break з міткою передає управління в кінець поміченого блоку.

Яке повідомлення буде виведено після виконання оператора break в наведеному нижче фрагменті коду? For (i = 0; i< 10; i++) {while(running) {if(x

Що буде виведено на екран в результаті виконання наступного фрагмента коду? For (int i = 0; i<10; i++) {System.out.print(i + " ");if((i%2) == 0) continue;System.out.println();}На экране появится следующий результат:о 12 34 56 78 9

Ітераційне вираз для циклу for не обов'язково повинно змінювати змінну циклу на фіксовану величину. Ця змінна може приймати довільні значення. Напишіть програму, яка використовує цикл for для виведення чіселв геометричній прогресії 1, 2, 4, 8, 16, 32 і т.д. / Застосування циклу for для формірованіягеометріческой прогресії 1, 2, 4, 8, 16, 32 і т.д./ Class Progress (public static void main (String args) (for (int i = 1; i< 100; i += i)System.out.print(i + " ");}}

Код ASCII-символів нижнього регістру відрізняється від коду відповідних символів верхнього регістру на величину 32. Отже, для перетворення строчнойбукви в прописну потрібно зменшити її код на 32. Використовуйте це обстоятельстводля написання програми, що здійснює введення символів з клавіатури. При виведенні результатів дана програма повинна перетворювати малі літери на прописні, а прописні - в рядкові. Решта символів не повинні ізменяться.Работа програми повинна завершуватися після того, як користувач введе з клавіатури точку. І нарешті, зробіть так, щоб програма показувала число символів, для яких був змінений реєстр .// Зміна регістру символів, class CaseChg (public static void main (String args) throws java.io.IOException (char ch; int changes = 0; System.out.println ( "Enter period to stop."); do (ch = (char) System.in.read (); if (ch> = "a" & ch<= "z") {ch -= 32;changes++;System.out.println(ch);}else if(ch >= "A" & ch<= "Z") {ch += 32;changes++;System.out.println(ch);}} while(ch != ".");System.out.println("Case changes: " + changes);}}

Що таке нескінченний цикл? Безкінечним називається такий цикл, виконання якого не закінчується.

Чи повинна мітка, яка використовується разом з оператором break, бути визначена в кодовому блоці, що містить цей оператор? Так, повинна. Глава 4. Введення в класи, об'єкти і методи

У чому відмінність класу від об'єкта? Клас - це абстрактне логічне опис форми і поведінки об'єкта. А об'єкт - це матеріальний екземпляр класу.

Як визначається клас? Клас визначається за допомогою ключового слова class. В операторі class вказуються код і дані, що становлять клас.

Чию власну копію містить кожен об'єкт? Кожен об'єкт класу містить власну копію змінних екземпляра етогокласса.

Покажіть, як оголосити об'єкт counter класу MyCounter, використовуючи два окремих оператора.MyCounter counter; counter = new MyCounter ();

Як повинен бути оголошений метод myMeth, що приймає два параметра а і b тіпаint і повертає значення типу double? Double myMeth (int a, int b) (// ...

Як має завершуватися виконання методу, який повертає деяке значення? Для завершення методу служить оператор return. Він же передає значення, що повертається викликає частини програми.

Яким має бути ім'я конструктора? Додаток А. Відповіді на питання для самоперевірки 563Імя конструктора має збігатися з ім'ям класу.

Які дії виконує оператор new? Оператор new виділяє пам'ять для об'єкта і виконує ініціалізацію об'єкта, використовуючи конструктор відповідного класу.

Що таке "прибирання сміття" і які дії вона виконує? Навіщо потрібен методfinalize ()? "Прибирання сміття" - це механізм видалення невикористовуваних об'єктів для повторного використання пам'яті, що звільняється від об'єктів. Метод finalize () викликається для об'єкта безпосередньо перед його видаленням з пам'яті.

Що означає ключове слово this? Ключове слово this означає посилання на об'єкт, для якого викликається метод.Она автоматично передається методу.