Организовать ежедневные примечания исследования в схеме проектирования HTML

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

HTML Design Pattern Notes Notes

На этой неделе я в основном выучил шаблоны дизайна HTML, и теперь я суммирую свой учебный контент следующим образом:

один. Изучение модели коробки

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

Образец проектирования модели коробки встроен в CSS, который определяет взаимосвязь между следующими свойствами: границы, границы, заполнение и содержание. Каждый атрибут включает в себя четыре части: верхняя, правая, нижняя и слева; Эти четыре части могут быть установлены одновременно или отдельно; Границы можно разделить на размер и цвет. Мы можем понять это как толщину коробки, видимой в жизни и из какого цвета коробки сделан. Граница - это то, как далеко должна удерживать коробку от других вещей. Содержание - это то, что содержится в коробке, а материал заполняется в запасной части в коробке.

Модели встроенных ящиков проанализированы в порядке встроенного расположения, они сортируются горизонтально слева направо, и когда они превышают ширину своих ближайших предков терминалов, они заменяются новым рядом. Ширина, высота и переполнение не работают над встроенными элементами, так как они всегда соответствуют ширине и высоте содержания. Маржа и высота линии могут быть применены к встроенным элементам каким-либо особым образом. Горизонтальный край изменяет положение встроенных элементов в порядке договоренности. Положительное значение левого края будет держать элемент подальше от элемента перед ним, в то время как отрицательное значение притянет его ближе. Положительное значение правой маржи будет держать элемент подальше от своего следующего элемента, в то время как отрицательное значение притянет его ближе. Маржинальная версия и маржинальный блок не работают для встроенных элементов. Граница настаивает границы для встроенных элементов особым образом, и горизонтальная граница изменит положение встроенных элементов в расположении. Левая граница сделает элемент слева, а правая граница сделает следующий элемент вправо. Верхние и нижние границы будут отображаться за пределами внутреннего края, но они не распространяются на высоту строки и не изменяют положение элемента в вертикальном направлении. Шаблон этого шаблона может быть выражен следующим образом: