Три основных принципа макета страницы: блочная модель, плавающая модель и позиционирование.
Основа макета веб-страницы: размещение блоков с помощью CSS.
Компоненты блочной модели включают в себя: границы, поля, отступы и фактическое содержимое.
отступы: по умолчанию отображаются напротив поля, контролируя расстояние между текстом и полем.
поле: контролировать расстояние между ящиками
Граница включает в себя: ширину границы (толщину), стиль границы (сплошная линия, пунктирная линия, пунктирная линия), цвет границы.
дел {
ширина: 300 пикселей;
высота: 200 пикселей;
ширина границы: 5 пикселей; ширина границы стиль границы: сплошной; стиль границы: пунктирный стиль границы: цвет границы;граница: 1 пиксель, сплошная красная, без порядка;
Как написать границу отдельно (используется для изменения определенного края):
border-top: 1 пиксель сплошной синий; border-bottom: 1px сплошной розовый;
Когда есть только одна граница, вы можете использовать каскадную запись:
граница: 5 пикселей пунктирно-розовая; border-top: сплошная синяя граница толщиной 1 пиксель, закрывающая весь блок выше;
Тонкие линии границ таблиц:
Когда расстояние между ячейками в таблице установлено равным 0, поскольку границы двух соседних ячеек расположены вместе, ширина этой части будет больше, чем ширина установленной границы одной ячейки. вы можете использовать атрибут border-collapse.
Свойство border-collapse управляет тем, как браузер рисует границы таблицы. Оно управляет границами соседних ячеек. Объедините соседние границы вместе:
стол {
border-collapse: коллапс; Чтобы этот атрибут вступил в силу, его необходимо добавить в таблицу} Границы повлияют на фактический размер коробки <br/>Наличие границ увеличит размер коробки, поскольку есть два варианта:
(1) При измерении размера коробки не измеряйте границу (2) Если граница включена в измерение, вам необходимо вычесть ширину границы из значений ширины и высоты.
Расстояние между границей и содержимым.
Отступ повлияет на фактический размер поля <br/>Чтобы гарантировать, что размер поля соответствует рендерингу, вам необходимо вычесть ширину отступа из значений ширины и высоты.
Если в самом поле не указаны атрибуты ширины и высоты, заполнение не будет увеличивать размер поля : если ширина не указана, левое и правое заполнение не будет расширять поле, если высота не указана; верхние и нижние отступы не расширяют поле.
Контролируйте расстояние между ящиками
Типичное применение: Чтобы добиться горизонтального центрирования блока на уровне блока, должны быть выполнены два условия: блок должен иметь указанную ширину, для левого и правого полей блока должно быть установлено значение auto;
Встроенные элементы и элементы встроенных блоков. Если вы хотите добиться горизонтального выравнивания по центру, просто добавьте text-align: center к его родительскому элементу.
Объединение полей (1) Схлопывание вертикальных полей вложенных блочных элементов: для двух блочных элементов с вложенной связью (отношения «родитель-потомок») родительский элемент имеет верхнее поле, а дочерний элемент также имеет верхнее поле. родительский элемент схлопнется больше. Большие значения полей.
Решение. Укажите внешнюю границу родительского элемента; укажите внутреннее поле для родительского элемента; добавьте overflow:hidden к родительскому элементу (обычно используется).
Многие элементы веб-страницы имеют внутренние и внешние поля по умолчанию, и значения по умолчанию варьируются от браузера к браузеру, поскольку перед макетированием необходимо очистить внутренние и внешние поля элементов веб-страницы.
* {
поле: 0 пикселей; Очистить отступы: 0 пикселей; Очистить отступы};Чтобы позаботиться о совместимости, попробуйте установить для строчных элементов только левое и правое внутренние и внешние поля и не задавайте верхние и нижние внутренние и внешние поля. Однако достаточно преобразовать их в блочные и. элементы встроенного уровня.
Сделайте углы коробки закругленными.
Свойство border-radius используется для установки закругленных углов внутренней и внешней границ элемента.
грамматика:
border-radius: length; Чем больше параметр, тем более очевидна дуга. Этот параметр может быть конкретным массивом или процентом.
Его принцип:
Как написать закругленные границы:
(1)圆形的写法: если коробка представляет собой正方形и длина равна половине высоты или ширины коробки, коробка представляет собой круг. Половина: может быть точным значением или 50%. 】
(2)圆角矩形的写法：参数设置为高度的一半
(3) Этот атрибут представляет собой сокращенный атрибут, который на самом деле выглядит так: левый верхний угол, правый верхний угол, правый нижний угол, левый нижний угол (по часовой стрелке).
(4) Если вы хотите установить только один угол, вы можете записать его как: граница-верхний-левый-радиус, граница-нижний-правый-радиус и т. д. Обратите внимание, что порядок нельзя изменить на обратный.
Свойство box-shadow добавляет тень к блоку.
грамматика:
box-shadow: h-shadow v-shadow, вставка цвета размытия по умолчанию для поля;
размытие: виртуальность и реальность тени. Чем больше параметр, тем размытие.
текстовая тень
грамматика:
текстовая тень: h-тень, v-тень, размытие, цвет
На этом завершается статья о блочных моделях CSS, закругленных границах и тенях блоков. Чтобы получить дополнительную информацию о блочных моделях CSS, выполните поиск по предыдущим статьям на сайте downcodes.com или продолжайте просматривать соответствующие статьи ниже. Надеюсь, вы прочитаете больше в будущем. Поддержите downcodes.com!