Базовые вопросы по фронтенду для интервью @CSS статьи

внешний интерфейс CSS
Базовые вопросы по фронтенду для интервью @CSS статьи

Сочинение

Ходил недавно на собеседование. До того, как я пошел, я был полон уверенности, но после того, как я пошел, я был обескуражен, потому что даже на самые простые вводные вопросы, такие как «сколько способов центрировать CSS» и «поговорить о типах данных js», отвечали нерешительно. интервьюер был элегантен через 20 минут, отправил меня.

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

очистить плавающий режим

1. Используйте псевдоклассы.
Вы также можете добавить div в конце родительского тега, а атрибуты в div такие же, как и у псевдоклассов. Принцип на самом деле такой же, как у псевдокласса, оба используют clear:both

.father :after {
	clear:both;
	content:"";
	display:block;
}
.father{
	zoom:1;//IE专有属性，解决ie6、7浮动问题
}

2. Родительский тег запускает BFC (специально представлено ниже).

.father {
	overflow:auto;
	zoom:1;//IE专有属性，解决ie6、7浮动问题
}

Элементы с неизвестной шириной и высотой центрируются по горизонтали и вертикали

Способ 1: отображение родительского элемента: таблица, отображение дочернего элемента: ячейка-таблица.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方法一</title>
</head>
<style>

.parent1{
    display: table;
    height:300px;
    width: 300px;
    background-color: #FD0C70;
}
.parent1 .child{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

</style>
<body>
    <div class="parent1">
        <div class="child">hello world-1</div>
    </div>
</body>
</html>

Способ 2: Используйте пустые элементы или псевдоклассы

  • Часть комментария в следующем коде — это еще один способ заменить псевдокласс после, принцип тот же.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
    .wrap {
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        background: #92b922;
    }
    .test {
        background: #de3168;
        display: inline-block;
        color: #fff;
        padding: 20px;
    }
    .wrap:after {
        display: inline-block;
        content: '';
        width: 0px;
        height: 100%;
        vertical-align: middle;
    }
    /* .vamb{
        display: inline-block;
        width: 0px;
        height: 100%;
        vertical-align: middle;
    } */
    </style>
    <div class="wrap">
            <!-- <b class="vamb"></b> -->
        <div class="test">
            水平垂直居中了吧<br>
            两行文字哦
        </div>
    </div>
</html>

Способ 3: абсолютное позиционирование + преобразование

Достоинства: удобный, поддерживает ядро ​​webkit
Недостатки: плохая совместимость с преобразованиями, не поддерживается ниже IE9.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent3{
    position: relative;
    height:300px;
    width: 300px;
    background: #FD0C70;
}
.parent3 .child{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent3">
        <div class="child">hello world</div>
    </div>
</body>
</html>

Способ 4: макет flexbox

Преимущество: удобный
Недостатки: плохая совместимость, плохая поддержка IE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent4{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height:300px;
    background: #FD0C70;
}
.parent4 .child{
    color:#fff;
}
</style>
<body>
	<div class="parent4">
        <div class="child">hello world</div>
    </div>
</body>
</html>

BFC

BFC (block formatting context) переводится как «блочный контекст форматирования», который формирует независимую область рендеринга (не влияет на внешние элементы, и не подвергается влиянию внешних элементов), а его генерация имеет следующие правила:

  • Внутренние ящики будут размещены один за другим в вертикальном направлении.
  • Вертикальное расстояние внутреннего блока определяется полем, и соседние поля в одном BFC будут иметь перекрытие полей.
  • Левая сторона каждой внутренней коробки касается левой стороны BFC, даже если есть поплавок.
  • Область BFC не будет перекрываться с флоат-боксом
  • При расчете высоты БФК в расчете также участвует плавающий элемент (вышеупомянутая проблема расчистки плавающего и есть этот принцип)

Условия для триггера BFC:

  • корневой элемент
  • свойство float не равно none
  • позиция абсолютная или фиксированная
  • display inline-block, table-cell, table-caption, flex, inline-flex
  • перелив не виден

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

Реализация адаптивной двухколоночной верстки

Способ 1: правый элемент запускает BFC

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

<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
    .father {
        background-color: lightblue;
    }

    .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
    }

    .right {
        overflow: auto;
        height: 500px;
        background-color: lightseagreen
    }
</style>

<body>
    <div class="father">
        <div class='left'>left</div>
        <div class='right'>
            right
        </div>
    </div>
</body>

</html>

Способ 2: Реализация с левым полем

  • Ограничения: Этот метод должен знать ширину левой стороны.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
    .father {
        background-color: lightblue;
    }

    .left {
        width: 100px;
        float: left;
        background-color: red;
    }

    .right {
        margin-left: 100px;
        background-color: lightseagreen
    }
</style>

<body>
    <div class="father">
        <div class='left'>left</div>
        <div class='right'>
            right
        </div>
    </div>
</body>

</html>

макет в три колонки

flex

Преимущество: удобный
Недостаток: по-прежнему гибкая совместимость

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

<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
    .father {
        display: flex;
        height: 100%;
    }

    .left,
    .right {
        flex: 0 1 100px;
        background-color: red;
    }

    .middle {
        flex: 1;
        height: 100%;
        background-color: green;
    }
</style>
<body>
    <div class="father">
        <div class='left'>left</div>
        <div class='middle'>middle</div>
        <div class='right'>center</div>
    </div>
</body>
</html>

Компоновка с отрицательным полем (двойные летающие крылья)

Достоинства: один из самых используемых на рынке
Недостатки: беда, это старая технология Таобао многолетней давности

<!DOCTYPE>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>圣杯布局/双飞翼布局</title>
    <style>
        .mainWrap {
            width: 100%;
            float: left;
        }

        .main {
            margin: 0 120px;
        }

        .left,
        .right {
            float: left;
            width: 100px;
        }

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

        .right {
            margin-left: -100px;
        }
    </style>
</head>

<div class="parent" id="parent" style="background-color: lightgrey;">
    <div class="mainWrap">
        <div class="main" style="background-color: lightcoral;">
            main
        </div>
    </div>
    <div class="left" style="background-color: orange;">
        left
    </div>
    <div class="right" style="background-color: lightsalmon;">
        right
    </div>
</div>

</html>

Перечислите новые возможности HTML5.

  • Семантические теги (nav, aside, dialog, header, footer и т. д.)
  • canvas
  • Перетащите связанный API
  • Аудио видео
  • Получить географическое положение
  • улучшенная проверка ввода
  • веб-хранилище (localStorage, sessionStorage)
  • webWorkers (аналог многопоточного параллелизма)
  • webSocket

Список новых возможностей Css3

  • Селектор
  • Граница (border-image, border-radius, box-shadow)
  • фон (фоновый клип, фоновое происхождение, фоновый размер)
  • Градиенты (линейные градиенты, радиальные градиенты)
  • шрифт (@font-face)
  • трансформировать, трансформировать
  • переход
  • анимация
  • флекс-бокс
  • Запросы СМИ (@media)

В чем разница между переходом и анимацией?

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

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

Категории