CSS-макет метода интервью

CSS
CSS-макет метода интервью

Плавающие (плавающие) очки знаний

Поплавок в основном исследует, почему и как очистить поплавок.

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

Очистка поплавка решает проблему схлопывания высоты родительского элемента страницы. Как это очистить, вот что меня волнует

Способ 1: Использованиеoverflow: hidden(работает над родительским элементом)

.clearfix {
    overflow: hidden;
}

побочные эффектыПосле выхода из области, где находится этот элемент, он будет скрыт (overflow:hiddenскроет лишнее),Не рекомендуется. .

Способ 2: добавить тег

Добавить метку к родительскому элементу, стиль метки

.clear {
    clear: both;
}

Побочным эффектом является добавление бесполезной метки, что не рекомендуется.

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

.clearfix {
    zoom: 1; // 为了兼容IE
}
.clearfix: after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

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

.clearfix {
    zoom: 1; // 为了兼容IE
}
.clearfix:before,.clearfix:after {
    content: "";    
    display: block;    
    clear: both;
}

Перед очисткой поплавка

После очистки поплавка

центр знаний

использовать флекс

.parent {
    width: 520px;
    height: 260px;
    background-color: green;
    display: flex;
    justify-content: center;
    align-items: center;
}

.child {
    background-color: pink;
    width: 300px;
    height: 150px;
}

Использовать преобразование (свойство css3)

.parent-transform {
    width: 520px;
    height: 260px;
    background-color: green;
    position: relative;
}

.child-transform {
    background-color: pink;
    width: 300px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

использоватьmarginотрицательное значение

.parent-margin {
    width: 520px;
    height: 260px;
    background-color: green;
    position: relative;
}

.child-margin {
    background-color: pink;
    width: 300px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -150px;
}

использоватьabsoluteа такжеmargin 

.parent-absolute-margin {
    width: 520px;
    height: 260px;
    background-color: green;
    position: relative;
}

.child-absolute-margin {
    background-color: pink;
    width: 300px;
    height: 150px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

использовать флекс

использовать преобразование

Используйте отрицательную маржу

абсолютный и маржинальный

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

Плавающие контрмеры

Левая и правая колонки плавают (вне потока документов), а средняя колонка проходит черезmarginЗначения Left и Right (ширина левого и правого столбцов и интервал вне столбцов), не забудьте очистить float

.three-column-float {
    height: 200px;
    background-color: #ddd;
}

.float-left {
    float: left;
    width: 300px;
    height: 100%;
    background-color: deepskyblue;
}

.float-right {
    float: right;
    width: 300px;
    height: 100%;
    background-color: pink;
}
.float-center {
    height: 100%;
    margin: 0 320px;
}

Контрмеры абсолютного позиционирования

Левый и правый столбцы абсолютно позиционированы (вне потока документов), а средний столбец проходит черезmarginЗначения Left и Right (ширина левого и правого столбцов и интервал вне столбцов)

.three-column-absolute {
    position: relative;
    height: 200px;
    background-color: #ddd;
}

.absolute-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 100%;
    background-color:deepskyblue;
}

.absolute-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background-color: pink;
}

.absolute-center {
    height: 100%;
    margin: 0 320px;
}

Плавающие контрмеры

Контрмеры абсолютного позиционирования

Этот код Гитхаб

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

Ты сможешь...

Предыдущий: Основы CSS интервью

Категории