Макет CSS говорит - наверное, самый полный

CSS

предисловие

Теперь мы называемся Front End Engineers. Однако имя, данное нам в первые годы, было Pageboy. Возможно, ответственность становится все больше и больше, и общая фронтенд-разработка заставила нас сосредоточиться только на js, отдалив при этом css и html.

На самом деле, мы часто можем говорить о компонентизации, о том, что происходит. Однако, оглянувшись назад и подумав, если вы видите эскиз дизайна, да еще и макет неясен, как быть с компонентизацией? Поэтому нам нужно различать макет, прежде чем различать компоненты. Столько чепухи, я просто хочу сказать вам, что расположение этой штуки действительно важно. В этой статье собраны основы верстки + базовая верстка для ПК + адаптация для мобильных устройств и другой контент. Если вам понравилась моя статья, добро пожаловать в комментарии, добро пожаловать в Star~. Добро пожаловать, чтобы следовать за мнойблог на гитхабе

текст

Может для вас за любовью к js стоит то, что вы не можете понять всю глубину css. CSS начального уровня очень прост, но освоить его не так просто, как вы думаете. Эта статья о макете. Фронтенд разработка, с момента получения эскиза дизайна уже началось продумывание макета.

Например, когда архитекторы проектируют дома, им необходимо измерить длину участка застройки и положение каждого дома по отношению к другим домам.

В макете css это тоже начинается так. Мы также выделим размер и расположение каждого элемента и постараемся идеально реализовать весь дизайн-проект. Итак, наш макет должен начинаться с позиционирования и размера.

позиция

Концепция позиционирования заключается в том, что она позволяет определить положение элемента относительно других обычных элементов, где он должен появиться, где другие элементы могут быть родительским элементом, другим элементом или даже самим окном браузера. Есть еще флоат.На самом деле флоат это не совсем позиционирование.Его характеристики настолько магические,что он широко используется в макетах. Мы будем ссылаться на него конкретно в следующих разделах.

Когда дело доходит до позиционирования, мы должны начать с атрибута position. Можете ли вы точно сказать значение свойства position? Я считаю, что вы можете прекрасно назвать шесть значений атрибутов: статический, относительный, абсолютный, фиксированный, липкий и наследовать.

  • статический (по умолчанию): поле элемента генерируется нормально. Элементы уровня блока генерируют прямоугольный блок как часть потока документа; встроенные элементы создают один или несколько строковых блоков, размещенных внутри своих родительских элементов.
  • относительный: поле элемента смещено от его предыдущей позиции в обычном потоке документа, и исходная позиция все еще занята. Когда происходит смещение, другие элементы могут быть перезаписаны.
  • абсолютный: поле элемента больше не занимает положение в потоке документа и смещено относительно содержащего блока (так называемый содержащий блок — это элемент, позиция ближайшего внешнего элемента которого не статична)
  • исправлено: поле элемента больше не занимает позицию в потоке документа и позиционируется относительно области просмотра
  • sticky: (это новое значение атрибута css3) липкое позиционирование, официальное введение относительно простое, возможно, вы не можете его понять. По сути, это эквивалентно смеси относительного и фиксированного. Первоначально оно будет рассматриваться как относительное и смещенное относительно исходного положения; как только оно превысит определенный порог, оно будет рассматриваться как фиксированное позиционирование и позиционированное относительно окна просмотра.демонстрационный адрес

Вкратце, после представления значения атрибута position, давайте взглянем на четыре атрибута смещения сверху, справа, снизу и слева.

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

Ниже: давайте рассмотрим некоторые распространенные смещения позиционирования.

  • относительный: его смещение относительно исходного положения в потоке документов, как показано на рисунке:

    relative relative-offset

    Здесь установлено верхнее: 100px, левое: 100px.

  • absolute: его смещение относительно ближайшего элемента-предка, позиция которого не является статической

  • фиксированный: его смещение относительно области просмотра.

На самом деле то, что здесь описано, следует понимать. Они фундаментальны для макета, но также очень важны. Следует отметить, что смещение здесь фактически включает в себя размер, который будет упомянут далее. При разработке адаптивного макета часто надеются, что в качестве единиц этих смещений можно использовать проценты или относительные единицы, такие как бэр.

размер

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

Размер, мы должны начать с единицы измерения. Что касается единицы px, люди, которые создают веб-страницы, должны быть знакомы с ней, поэтому я не буду подробно ее представлять.

Итак, мы можем ввести следующие единицы:

  • Процент: ссылка на процент является родительским элементом, 50% эквивалентны 50% ширины родительского элемента.
  • rem: Это очень полезно для сложных дизайнерских рисунков, это размер шрифта html.
  • em: Хотя это также относительная единица относительно размера шрифта родительского элемента, она обычно не используется, главным образом потому, что вычисления слишком хлопотны.

Единицы — это просто соответствующая ссылка для определения размера элемента. Другая концепция, возможно, дом может быть использован в качестве аналогии.В первые годы каждый дом будет строить забор вокруг дома, так что всю территорию можно рассматривать как модель дома + внутренний участок + забор + внешний участок. И в css каждый элемент также будет иметькоробочная модельКонцепция чего-либо.

коробочная модель: Каждый элемент будет формировать прямоугольный блок, который в основном состоит из четырех частей: margin (внешнее поле) + border (граница) + padding (внутреннее поле) + content (контент).

В css есть две разные модели блоков, и разные модели можно установить с помощью размера блока. Две модели коробок в основном отличаются по ширине. Как показано на рисунке:

content-box

Это стандартная блочная модель, вы можете видеть, что длина ширины равна ширине содержимого; и когда значение свойства box-sizing установлено в значение border-box, сумма width=border+padding+content коробочная модель.

Видно, что ширина у разных моделей разная. Значением свойства width по умолчанию является auto, благодаря чему длина внутреннего элемента автоматически заполняет ширину родительского элемента. Как показано на рисунке:

width-auto

Однако значение атрибута высоты также является автоматическим по умолчанию, почему оно не похоже на ширину?

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

Тот же принцип будет применяться к свойствам полей. Если вы считаете, что когда исследование сосредоточено, центрировано по горизонтали, глаза закрыты, вы можете писать, но оно сосредоточено по вертикали вокруг головы, чтобы думать. Это связано с тем, что если элемент среднего блока до тех пор, пока уровень поля в горизонтальном направлении установлен на автоматический. Однако с вертикальным направлением все не так просто, потому что, когда вы устанавливаете значение auto, поле равно нулю. Проблема, или необходимость тщательно обдумать.

Пока что мы подошли к большинству самых основных частей макета, и есть плавающая часть.

плавать

Поплавок, очень интересная штука, широко используется в верстке. Изначально при проектировании флоата это было не для вёрстки, а для достижения особого эффекта обтекания текстом, как показано на рисунке:

float

Но плавание — это не только это. Зачем плавать? Следует сказать, что плавающий элемент является «автономным», подобно слою в ps, плавающий элемент будет расположен на плавающем слое, а положение элемента в исходном потоке документа будет каким-то образом удалено. расположение. Вам может быть интересно, что такое макет влияния? Возьмем пример:

Сначала подготавливаем два цветных блока, как показано на рисунке:

浮动前

Затем мы устанавливаем левый блок плавать влево, как показано на рисунке:

浮动后

Да, обнаружено, что хотя левый блок плывет влево, позиция, занимаемая исходным элементом в потоке документов, удаляется, но когда правый блок заполняет исходную позицию, шрифт в правом блоке выдавливается. Это называется макетом влияния.

Почему поплавки используются в макетах? Потому что плавающий элемент будет формировать BFC (чтобы внутренний элемент не мешал внешнему), и ширина элемента больше не будет подстраиваться под ширину родительского элемента, а подстраиваться под его собственное содержимое. Таким образом, вы можете легко добиться эффекта многоколоночной верстки.

В плавающий контент тоже нужно внести фишку — очистку плавающего. Как видите, плавающие элементы на самом деле особенно опасны для верстки. Поскольку вы, возможно, переместили этот кусок, но не очистили его, это вызовет проблему обрушения высоты. Это тот, что изображен выше.

очистить поплавок, есть два наиболее часто используемых метода:

  • переполнение: Установите скрытое переполнение родительского элемента.
  • после псевдокласса: Установите после псевдокласса дочерних элементов.

Это просто небольшое упоминание здесь. Давайте официально представим макет веб-страницы, основной предмет этой статьи.

Исходный макет - таблица

Вначале веб-страницы были такими же простыми, как слова и ссылки. В настоящее время наиболее часто используется таблица. Потому что таблица может показать расположение нескольких блоков.

Эта раскладка не должна сейчас широко использоваться, потому что ее удобно использовать, когда цвет один. Однако сегодняшние веб-страницы становятся все более сложными, и проблем с адаптацией становится все больше, и такой макет больше не доступен.

Основная причина — появление блоков div, которые могут сделать веб-страницы гибко устроенными и сделать веб-страницы процветающими. В это время разработчики также начали думать о том, как более четко различать слои веб-страниц. Далее мы можем рассмотреть некоторые из наиболее известных методов компоновки.

макет в два столбца

Вы помните те веб-страницы с основным содержимым и каталогом с другой, как показано на рисунке:

两栏布局

Подобно макету выше, его можно определить какмакет в два столбца.

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

Как это сделать:

  1. поплавок + маржа:
<body>
  <div class="left">定宽</div>
  <div class="right">自适应</div>
</body>

.left{
  width: 200px;
  height: 600px;
  background: red;
  float: left;
  display: table;
  text-align: center;
  line-height: 600px;
  color: #fff;
}

.right{
  margin-left: 210px;
  height: 600px;
  background: yellow;
  text-align: center;
  line-height: 600px;
}

как показано на рисунке:

两栏布局

Другие методы: вы также можете использовать абсолютную позицию, вы можете использовать тот же эффект

Макет с тремя колонками

Макет с тремя колонками также является часто используемым макетом.

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

Трехколоночные макеты могут быть реализованы четырьмя способами, каждый из которых имеет свои преимущества и недостатки.

1. Используйте атрибут float для левого и правого столбцов и атрибут margin для среднего столбца.Обратите внимание на результат html

<div class="left">左栏</div>
<div class="right">右栏</div>
<div class="middle">中间栏</div>

.left{
  width: 200px;height: 300px; background: red; float: left;    
}
.right{
  width: 150px; height: 300px; background: green; float: right;
}
.middle{
  height: 300px; background: yellow; margin-left: 220px; margin-right: 160px;
}

first

Недостатки: 1. При ширине меньше суммы ширины левой и правой сторон правая колонка будет сжата 2. Неправильная структура html

2. Используйте позиционирование позиции для достижения, то есть левый и правый столбцы позиционируются с использованием позиции, а средний столбец позиционируется с использованием поля.

<div class="left">左栏</div>
<div class="middle">中间栏</div>
<div class="right">右栏</div>

.left{
    background: red;
    width: 200px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
}
.middle{
    height: 300px;
    margin: 0 220px;
    background: yellow;
}
.right{
    height: 300px;
    width: 200px;
    position: absolute;
    top: 0;
    right: 0;
    background: green;
}

image

Хорошо, что структура html нормальная.

Недостатки: когда родительский элемент имеет внутренние и внешние поля, это приведет к отклонению положения среднего столбца.

3. Используйте float и BFC с макетом Holy Grail

Установите ширину середины на 100%, затем установите его плавающее значение влево, установите свойство поля в основном блоке, затем установите плавающее значение влево в левом столбце, затем установите поле в -100%, а также установите правый столбец для плавания: левый, тогда левое поле - это его собственный размер.

<div class="wrapper">
    <div class="middle">
        <div class="main">中间</div>
    </div>
    <div class="left">
        左栏
    </div>
    <div class="right">
        右栏
    </div>
</div>

.wrapper{
    overflow: hidden;  //清除浮动
}
.middle{
    width: 100%;
    float: left;
}
.middle .main{
    margin: 0 220px;
    background: yellow;
}
.left{
    width: 200px;
    height: 300px;
    float: left;
    background: red;
    margin-left: -100%;
}
.right{
    width: 200px;
    height: 300px;
    float: left;
    background: green;
    margin-left: -200px;
}

bf-layout

Недостатки: 1. Неправильная структура 2. Еще один слой этикеток

4. гибкий макет

<div class="wrapper">
    <div class="left">左栏</div>
    <div class="middle">中间</div>
    <div class="right">右栏</div>
</div>

.wrapper{
    display: flex;
}
.left{
    width: 200px;
    height: 300px;
    background: red;
}
.middle{
    width: 100%;
    background: yellow;
    marign: 0 20px;
}
.right{
    width: 200px;
    height: 3000px;
    background: green;
}

first

В дополнение к совместимости, как правило, нет серьезных дефектов

Трехколоночный макет широко используется, но он также является относительно простым макетом. Для веб-страниц на стороне ПК он используется больше, но на мобильной стороне из-за ограничения собственной ширины трудно добиться трехколоночного метода. Поэтому сейчас, когда мобильный терминал популярен, нам следует освоить некоторые навыки адаптивной верстки и методы гибкости.

Эпоха мобильных устройств

Возможно, мобильные телефоны отнимают у людей большую часть времени.Фронтендер-инженерам нужно не только знать h5 и большие фронтенд-технологии, но и адаптироваться к разным экранам мобильных телефонов. Эпоха, когда ПК был королем, прошла, и веб-страницы, необходимые сейчас, должны быть в состоянии адаптироваться к ПК и мобильным терминалам.

Ранее двухколоночные и трехколоночные макеты, о которых мы говорили, можно было использовать только на ПК, на мобильной стороне из-за ограниченного размера экрана подобные операции делать сложно, поэтому нам нужно учиться новому.

1. Медиа-запросы

Если вам нужна веб-страница, которая может отображаться в разных дизайнах как на ПК, так и на мобильных устройствах, все, что вам нужно сделать, это настроить медиа-запросы.

Идентификатор css медиа-запроса — @media, а его медиа-типы можно разделить на:

  1. все, все СМИ
  2. Брайлевское тактильное устройство Брайля
  3. принтер с рельефным шрифтом Брайля
  4. печать портативный
  5. предварительный просмотр проекционной печати
  6. оборудование для цветного экрана
  7. речь «слуховой» аналогичный тип носителя
  8. tty не применяется к пиксельным устройствам
  9. тв тв

Пример кода:

@media screen {
  p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print {
  p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print {
  p.test {font-weight:bold;}
}
/*移动端样式*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
}

Основной принцип медиа-запроса: это похоже на установку точек останова для всего стиля CSS, исходя из заданных условий, и отображение разных стилей в разных условиях. Например: размер мобильного телефона составляет 750 пикселей, а размер ПК больше 750 пикселей, мы можем написать стиль как:

@media screen and (min-width: 750px){
  .media{
    height: 100px;
    background: red;
  }
}

@media (max-width: 750px){
  .media{
    height: 200px;
    background: green;
  }
}

демонстрационный адрес

Изображение эффекта:

小于750px 大于750px

гибкая эластичная коробка

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

flex盒子 flex盒子 flex盒子

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

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

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

рем-адаптация

rem можно назвать артефактом для мобильной адаптации. Подобно интерфейсу, такому как ручное Taobao, все они адаптированы с использованием rem. Одной из характеристик этого интерфейса является то, что сложность элементов страницы относительно высока, и использование flex для макета приведет к тому, что страница будет растягиваться, но высота верха и низа не изменится. пример графика:

Для получения более подробной информации см. эту лучшую статью.рем портал

Суммировать

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

  • позиция
  • размер
  • плавать
  • Исходный макет - таблица
  • макет в два столбца
  • Макет с тремя колонками
  • мобильная раскладка

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

Наконец, если у вас есть вопросы о том, что я написал, вы можете обсудить это со мной. Пожалуйста, поправьте меня, если я ошибаюсь. Если вам нравится мой блог, подписывайтесь на меня в Star~ Yo. Давайте добиваться прогресса вместе. Добро пожаловать, чтобы следовать за мнойблог на гитхабе

Категории