Проанализируйте некоторые классические проблемы макета CSS для сопровождения разработки интерфейса + интервью

JavaScript

1. Сколько существует вариантов центрирования элемента по горизонтали и вертикали?

Центрировано по горизонтали

  • для行内元素: text-align: center;

  • Для блочных элементов с определенной шириной:

  1. реализация ширины и поля. поле: 0 авто;

  2. Абсолютное позиционирование и левое поле: -width/2, при условии, что родительский элемент position: relative

  • Для блочных элементов неизвестной ширины

  1. Метка таблицы взаимодействует с левым и правым полем auto для достижения горизонтального центрирования. Используйте тег таблицы (или напрямую установите для элемента уровня блока значение display:table), а затем добавьте к тегу левое и правое поля в значение auto.

  2. inline-block реализует метод горизонтального центрирования. display: inline-block и text-align: center обеспечивают горизонтальное центрирование.

  3. Абсолютное позиционирование + преобразование, translateX может перемещать 50% собственного элемента.

  4. Flex Layout использует оправдание-контент: Center

Центрировать по вертикали

  1. использоватьline-heightРеализовать центрирование, этот метод подходит для простых текстовых классов.

  2. Установив родительский контейнер相对定位, дочерние настройки绝对定位, этикетка реализует адаптивное центрирование через поля

  3. Гибкая компоновкаflex: Родитель устанавливает display: flex; дочерний элемент устанавливает для поля значение auto для достижения адаптивного центрирования.

  4. Родитель устанавливает относительное позиционирование, дочерний элемент устанавливает абсолютное позиционирование и передает смещение.transformвыполнить

  5. tableМакет, родитель преобразуется в табличную форму, а затем задается дочернийvertical-alignвыполнить. (Следует отметить, что предварительным условием для вертикального выравнивания: среднее использование — это встроенный элемент и элемент, отображаемое значение которого — table-cell).

Во-вторых, преимущества плавающей компоновки? Каковы недостатки? Какие есть способы очистить поплавки?

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

преимущество

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

недостаток

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

Как очистить поплавок

  1. Добавьте дополнительные теги
<div class="parent">
    //添加额外标签并且添加clear属性
    <div style="clear:both"></div>
    //也可以加一个br标签
</div>
  1. Добавьте атрибут переполнения к родителю или установите высоту
<div class="parent" style="overflow:hidden">//auto 也可以
    //将父元素的overflow设置为hidden
    <div class="f"></div>
</div>
  1. Создайте селекторы псевдокласса для очистки поплавков (рекомендуется)
//在css中添加:after伪元素
.parent:after{
    /* 设置添加子元素的内容是空 */
      content: '';  
      /* 设置添加子元素为块级元素 */
      display: block;
      /* 设置添加的子元素的高度0 */
      height: 0;
      /* 设置添加子元素看不见 */
      visibility: hidden;
      /* 设置clear：both */
      clear: both;
}
<div class="parent">
    <div class="f"></div>
</div>

3. Какие проблемы возникнут при использовании display:inline-block? Решение?

Повторение проблемы

Проблема: объединение двух элементов display:inline-block создает пустое пространство.

Например, код:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      .container {
        width: 800px;
        height: 200px;
      }

      .left {
        font-size: 14px;
        background: red;
        display: inline-block;
        width: 100px;
        height: 100px;
      }

      .right {
        font-size: 14px;
        background: blue;
        display: inline-block;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">
        左
      </div>
      <div class="right">
        右
      </div>
    </div>
  </body>
</html>

Эффект следующий:

Причина пустого места

Когда элемент отформатирован как встроенный, пробелы между элементами (пробел, возврат каретки, перевод строки и т. д.) будут обрабатываться браузером.HTML代码中的回车换行被转成一个空白符, в случае, когда шрифт не 0, пробел занимает определенную ширину, поэтому между элементами инлайн-блока есть зазор.

Решение

1. Напишите конец тега вложенного элемента и начало следующего тега в одной строке или напишите все вложенные теги в одной строке.

<div class="container">
  <div class="left">
      左
  </div><div class="right">
      右
  </div>
</div>

2. Установите размер шрифта: 0 для родительского элемента, сбросьте правильный размер шрифта для дочернего элемента.

.container{
  width:800px;
  height:200px;
  font-size: 0;
}

3. Установите float:left для дочерних элементов

.left{
  float: left;
  font-size: 14px;
  background: red;
  display: inline-block;
  width: 100px;
  height: 100px;
}
//right是同理

В-четвертых, макет: DIV по вертикали, слева и справа 10 пикселей, высота всегда равна половине ширины.

Описание проблемы: Реализуйте div с вертикальным центрированием, на расстоянии 10 пикселей от левой и правой сторон экрана, а его высота всегда будет составлять 50% от его ширины. В то же время в div есть текст A, и текст нужно центрировать по горизонтали и вертикали.

Идея 1: Используйте height: 0, padding-bottom: 50%;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      html, body {
        height: 100%;
        width: 100%;
      }
      .outer_wrapper {
        margin: 0 10px;
        height: 100%;
        /* flex布局让块垂直居中 */
        display: flex;
        align-items: center;
      }
      .inner_wrapper{
        background: red;
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 50%;
      }
      .box{
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="outer_wrapper">
      <div class="inner_wrapper">
        <div class="box">A</div>
      </div>
    </div>
  </body>
</html>

Подчеркните два момента:

  1. Кто является padding-bottom по отношению к?

Ответ относительно父元素的width值.

Тогда цель этого out_wrapper хорошо понятна. CSS находится в потоковом макете.Ширина div по умолчанию заполнена, то есть 100% от размера.Установите поле для out_wrapper: 0 10px, это эквивалентно уменьшению левой и правой сторон на 10px.

  1. Относительное позиционирование родительского элемента, если ширина и высота дочернего элемента при абсолютном позиционировании заданы в процентах, относительно кого это?

Относительно значения родительского элемента (содержимое + отступ) обратите внимание, что граница отсутствует.

Расширение: если дочерний элемент позиционирован не абсолютно, ширина и высота задаются в процентах относительно ширины и высоты родительского элемента.Стандартная блочная модель — это содержимое, а блочная модель IE — это содержимое+заполнение+граница.

Идея 2: Используйте calc и vw

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
      }

      .wrapper {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .box {
        margin-left: 10px;
        /* vw是视口的宽度， 1vw代表1%的视口宽度 */
        width: calc(100vw - 20px);
        /* 宽度的一半 */
        height: calc(50vw - 10px);
        position: absolute;
        background: red;
        /* 下面两行让块垂直居中 */
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="box">A</div>
    </div>
  </body>
</html>

Эффект следующий:

5. Как CSS выполняет раскладку символов?

Первый

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>品字布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      overflow: hidden;
    }
    div {
      margin: auto 0;
      width: 100px;
      height: 100px;
      background: red;
      font-size: 40px;
      line-height: 100px;
      color: #fff;
      text-align: center;
    }

    .div1 {
      margin: 100px auto 0;
    }

    .div2 {
      margin-left: 50%;
      background: green;
      float: left;
      transform: translateX(-100%);
    }

    .div3 {
      background: blue;
      float: left;
      transform: translateX(-100%);
    }
  </style>
</head>

<body>
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</body>

</html>

Эффект:

Второй (полноэкранная версия)

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>品字布局</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      div {
        width: 100%;
        height: 100px;
        background: red;
        font-size: 40px;
        line-height: 100px;
        color: #fff;
        text-align: center;
      }

      .div1 {
        margin: 0 auto 0;
      }

      .div2 {
        background: green;
        float: left;
        width: 50%;
      }

      .div3 {
        background: blue;
        float: left;
        width: 50%;
      }
    </style>
  </head>

  <body>
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
  </body>
</html>

Эффект:

6. Как использовать CSS для макета Holy Grail

Схема Святого Грааля выглядит следующим образом:

При этом левая и правая ширина должны быть фиксированными, а средняя ширина должна быть адаптивной.

1. Использование гибкой макета

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
    *{
      margin: 0;
      padding: 0;
    }
    .header,.footer{
        height:40px;
        width:100%;
        background:red;
    }
    .container{
        display: flex;
    }
    .middle{
        flex: 1;
        background:yellow;
    }
    .left{
        width:200px;
        background:pink;
    }
    .right{
        background: aqua;
        width:300px;
    }
	</style>
</head>
<body>
    <div class="header">这里是头部</div>
    <div class="container">
        <div class="left">左边</div>
        <div class="middle">中间部分</div>
        <div class="right">右边</div>
    </div>
    <div class="footer">这里是底部</div>
</body>
</html>

2. макет с плавающей запятой (все плавающие: слева)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .header,
    .footer {
      height: 40px;
      width: 100%;
      background: red;
    }

    .footer {
      clear: both;
    }

    .container {
      padding-left: 200px;
      padding-right: 250px;
    }

    .container div {
      position: relative;
      float: left;
    }

    .middle {
      width: 100%;
      background: yellow;
    }

    .left {
      width: 200px;
      background: pink;
      margin-left: -100%;
      left: -200px;
    }

    .right {
      width: 250px;
      background: aqua;
      margin-left: -250px;
      left: 250px; 
    }
  </style>
</head>

<body>
  <div class="header">这里是头部</div>
  <div class="container">
    <div class="middle">中间部分</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
  </div>
  <div class="footer">这里是底部</div>
</body>

</html>

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

Вот как это выглядело до установки отрицательных значений поля и левого края:

Поле слева установлено margin-left: -100%, чтобы подтянуть поле вверх, эффект:

.left{
  /* ... */
  margin-left: -100%;
}

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

.left{
  /* ... */
  margin-left: -100%;
  left: -200px;
}

Рендеринг эффекта:

После того, как поле справа установлено с margin-left: -250px, пространство, занимаемое полем в этой строке, равно 0, поэтому перейдите непосредственно к среднему блоку выше, эффект:

.right{
  /* ... */
  margin-left: -250px;
}

Затем переместитесь на 250 пикселей вправо, заполнив правую часть родительского контейнера:

.right{
  /* ... */
  margin-left: -250px;
  left: 250px;
}

Теперь для достижения окончательного эффекта:

3. макет поплавка (левый поплавок: левый, правый поплавок: справа)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .header,
    .footer {
      height: 40px;
      width: 100%;
      background: red;
    }
    .container{
      overflow: hidden;
    }

    .middle {
      background: yellow;
    }

    .left {
      float: left;
      width: 200px;
      background: pink;
    }

    .right {
      float: right;
      width: 250px;
      background: aqua;
    }
  </style>
</head>

<body>
  <div class="header">这里是头部</div>
  <div class="container">
    <div class="left">左边</div>
    <div class="right">右边</div>
    <div class="middle">中间部分</div>
  </div>
  <div class="footer">这里是底部</div>
</body>

</html>

4. Абсолютное позиционирование

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .header,
    .footer {
      height: 40px;
      width: 100%;
      background: red;
    }
    .container{
      min-height: 1.2em;
      position: relative;
    }

    .container>div {
      position: absolute;
    }

    .middle {
      left: 200px;
      right: 250px;
      background: yellow;
    }

    .left {
      left: 0;
      width: 200px;
      background: pink;
    }

    .right {
      right: 0;
      width: 250px;
      background: aqua;
    }
  </style>
</head>

<body>
  <div class="header">这里是头部</div>
  <div class="container">
    <div class="left">左边</div>
    <div class="right">右边</div>
    <div class="middle">中间部分</div>
  </div>
  <div class="footer">这里是底部</div>
</body>

</html>

5.Сетка

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body{
        display: grid;
    }
    #header{
        background: red;
        grid-row:1;
        grid-column:1/5;
    }
        
    #left{
        grid-row:2;
        grid-column:1/2;
        background: orange;
    }
    #right{
        grid-row:2;
        grid-column:4/5;
        background: cadetblue;
    }
    #middle{
        grid-row:2;
        grid-column:2/4;
        background: rebeccapurple
    }
    #footer{
        background: gold;
        grid-row:3;
        grid-column:1/5;
    }
  </style>
</head>

<body>
    <div id="header">header</div>
    <div id="left">left</div>
    <div id="middle">middle</div>
    <div id="right">right</div>     
    <div id="footer">footer</footer></div>
       
</body>

</html>

Глядя на макет сетки, он на самом деле довольно прост, параметры в нем должны быть очевидны.

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

Конечно, есть и схема таблицы, которая относительно старая и не дружественная к SEO, если вы ее знаете, то можете, так что я не буду тратить здесь место.

7. Как CSS реализует компоновку двойного летающего крыла?

С основой компоновки Holy Grail компоновка двойного летающего крыла не является проблемой. Это делается с помощью классического макета с плавающей запятой.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .container {
        min-width: 600px;
    }
    .left {
        float: left;
        width: 200px;
        height: 400px;
        background: red;
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 500px;
        background: yellow;
    }
    .center .inner {
        margin: 0 200px; 
    }
    .right {
        float: left;
        width: 200px;
        height: 400px;
        background: blue;
        margin-left: -200px;
    }
  </style>
</head>

<body>
  <article class="container">
    <div class="center">
        <div class="inner">双飞翼布局</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</article>
</body>

</html>

8. Что такое БФК? При каких условиях он сработает? правила рендеринга? Каковы сценарии применения?

1. Что такое БФК?

W3C определяет BFC следующим образом: Плавающие и абсолютно расположенные элементы, контейнеры на уровне блока для неблокируемых ящиков (такие как встроенные блоки, таблицы и таблицы-подписи), а ящики уровня блока, значение переполнения которых не является «видимым», будет создаваться Для их контента новый BFC (контекст блокирования блока, контекст формата уровня блока).

2. Условия срабатывания

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

  • корневой элемент()
  • Плавающие элементы (плавание элемента не равно нулю)
  • Абсолютно позиционированные элементы (позиция элемента абсолютная или фиксированная)
  • Элементы встроенного блока (отображение элемента в виде встроенного блока)
  • Ячейка таблицы (отображение элемента — это ячейка таблицы, которая по умолчанию имеет это значение для ячеек таблицы HTML)
  • Заголовок таблицы (элемент отображает table-caption, заголовок таблицы HTML по умолчанию имеет это значение)
  • Анонимный элемент ячейки таблицы (отображение элемента: таблица, таблица-строка, таблица-строка-группа, таблица-заголовок-группа, таблица-нижний колонтитул-группа (атрибуты по умолчанию HTML-таблицы, строки, tbody, thead и tfoot соответственно). ) или встроенная таблица)
  • блочные элементы, значение переполнения которых не видно - элемент flex (display является прямым дочерним элементом элемента flex или inline-flex)
  • Элемент сетки (отображение является прямым дочерним элементом сетки или встроенного элемента сетки) и т.п.

3. Правила рендеринга BFC

(1) Перекрытие вертикальных полей BFC

(2) Область BFC не будет перекрываться с рамкой плавающего элемента.

(3) BFC является независимым контейнером, элементы снаружи не будут влиять на элементы внутри

(4) Плавающие элементы также будут участвовать в расчетах при расчете высоты БТЭ.

4. Сценарии применения

1. Не позволяйте float вызывать коллапс высоты родительского элемента

Текущий код страницы выглядит следующим образом:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      .container {
        border: 10px solid red;
      }
      .inner {
        background: #08BDEB;
        height: 100px;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="inner"></div>
    </div>
  </body>
</html>

Затем сделайте внутренний элемент плавающим:

  .inner {
    float: left;
    background: #08BDEB;
    height: 100px;
    width: 100px;
  }

Это создаст эффект коллапса, подобный этому:

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

.container {
    border: 10px solid red;
    overflow: hidden;
}

Это также способ очистить поплавок.

2. Избегайте сворачивания полей

Два блока с одним и тем же BFC приведут к схлопыванию полей, но если BFC установлены отдельно для двух блоков, проблемы перекрывающихся полей не существует.

Существующий код выглядит следующим образом:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .container {
      background-color: green;
      overflow: hidden;
    }

    .inner {
      background-color: lightblue;
      margin: 10px 0;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
  </div>
</body>

</html>

В это время верхний и нижний интервалы трех элементов равны 10px, потому что три элемента принадлежат одному и тому же BFC. Теперь делаем следующее:

  <div class="container">
    <div class="inner">1</div>
    <div class="bfc">
      <div class="inner">2</div>
    </div>
    <div class="inner">3</div>
  </div>

Стиль добавлен:

.bfc{
    overflow: hidden;
}

Эффект следующий:

Хорошо видно, что интервал стал больше и удвоился, как мы и ожидали.

Что касается проблемы макета CSS, я сначала поделюсь ею здесь, и я продолжу добавлять ее в будущем, надеясь вдохновить вас. Если это поможет вам, не забудьте поставить палец вверх.

использованная литература:

Как центрировать элемент (конечная версия)

Глубокое понимание BFC

4 способа использования трехколоночного макета CSS

Категории