Примечание. Цифры (xx) перед каждым вопросом представляют частоту вопроса. Этот CSS основан на более чем 30 вопросах, отсортированных в начале, и соответствующих ответах, справочных ссылках и т. д. Содержание статьи организовано лицом, получившим Оферту.
(2) Напишите код: CSS div центрируется по вертикали и горизонтали, а высота div всегда составляет половину ширины (ширина не может быть указана)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.outer {
width: 400px;
height: 100%;
background: blue;
margin: 0 auto;
display: flex;
align-items: center;
}
.inner {
position: relative;
width: 100%;
height: 0;
padding-bottom: 50%;
background: red;
}
.box {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<div class="box">hello</div>
</div>
</div>
</body>
</html>
Ссылка на ссылку
Расскажите, пожалуйста, о весе и приоритете CSS
Веса
- Начиная с 0, встроенный стиль +1000, селектор идентификатора +100, селектор атрибута, класс или псевдокласс +10, селектор элемента или псевдоэлемент +1, подстановочный знак +0
приоритет
- Веса одинаковые, те, что написаны сзади, перекрывают те, что спереди.
- использовать
!importantДля достижения максимального приоритета оба используют!importantЧем больше вес, тем выше приоритет
Ссылка на ссылку
В: Знакомство с макетом Flex. Что такое аббревиатура свойства flex:
- Макет Flexbox, новое свойство CSS3 для удобного макета, такого как вертикальное центрирование.
- Свойство flex
flex-grow,flex-shrinkиflex-basisсокращение для
Ссылка на ссылку
В: Как CSS рисует квадрат, ширина которого составляет половину ширины родительского элемента?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
width: 400px;
height: 600px;
background: red;
}
.inner {
width: 50%;
padding-bottom: 50%;
background: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
CSS реализует адаптивный квадрат, прямоугольник с равным соотношением сторон
- Двойная вложенность, внешний относительный, внутренний абсолютный
- набивка
- Вы также можете использовать vw и vh, если вы просто хотите быть относительно тела
- Настройки псевдоэлемента
margin-top: 100%стоять прямо
Двойная вложенность, внешний относительный, внутренний абсолютный
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
padding-top: 50%;
height: 0;
background: #ccc;
width: 50%;
position: relative;
}
.inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">hello</div>
</div>
</body>
</html>
padding рисует квадрат
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
width: 400px;
height: 600px;
background: blue;
}
.inner {
width: 100%;
height: 0;
padding-bottom: 100%;
background: red;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
Относительно области просмотра VW VH
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.inner {
width: 1vw;
height: 1vw;
background: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
Псевдоэлементы устанавливают margin-top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.inner {
width: 100px;
overflow: hidden;
background: blue;
}
.inner::after {
content: "";
margin-top: 100%;
display: block;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</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" />
<title>Document</title>
<style>
div {
height: 500px;
}
.aside {
width: 300px;
float: left;
background: yellow;
}
.main {
background: aqua;
margin-left: 300px;
}
</style>
</head>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
</html>
правый float, margin-right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
height: 500px;
}
.aside {
width: 300px;
float: right;
background: yellow;
}
.main {
background: aqua;
margin-right: 300px;
}
</style>
</head>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
</html>
BFC + float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
height: 500px;
}
.aside {
width: 300px;
float: left;
background: yellow;
}
.main {
overflow: hidden;
background: aqua;
}
</style>
</head>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
</html>
плавающая + отрицательная маржа
<head>
<style>
.left {
width: 100%;
float: left;
background: #f00;
margin-right: -200px;
}
.right {
float: left;
width: 200px;
background: #0f0;
}
</style>
</head>
<div class="left"><p>hello</p></div>
<div class="right"><p>world</p></div>
Макет Holy Grail реализует двухколоночный макет.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* div {
height: 500px;
} */
/* .box {
overflow: hidden;
} */
/* .container {
padding: 0 300px 0 200px;
border: 1px solid black;
} */
html,
body {
height: 100%;
}
div {
height: 100%;
}
.container {
display: flex;
}
.content {
flex: 1 1;
order: 2;
background: #f00;
}
.left {
float: left;
width: 100%;
background: #0f0;
}
.right {
float: left;
width: 300px;
margin-left: -300px;
background: #00f;
}
</style>
</head>
<body>
<div class="container">
<div class="left">你好</div>
<div class="right">我好</div>
</div>
</body>
</html>
flex реализует двухколоночный макет
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* div {
height: 500px;
} */
/* .box {
overflow: hidden;
} */
/* .container {
padding: 0 300px 0 200px;
border: 1px solid black;
} */
html,
body {
height: 100%;
}
div {
height: 100%;
}
.container {
display: flex;
}
.content {
flex: 1 1;
order: 2;
background: #f00;
}
.left {
flex: 0 0 200px;
background: #0f0;
}
.right {
flex: 1 1;
background: #00f;
}
</style>
</head>
<body>
<div class="container">
<div class="left">你好</div>
<div class="right">我好</div>
</div>
</body>
</html>
Ссылка на ссылку:nuggets.capable/post/684490…
position + margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* div {
height: 500px;
} */
/* .box {
overflow: hidden;
} */
/* .container {
padding: 0 300px 0 200px;
border: 1px solid black;
} */
html,
body {
height: 100%;
}
div {
height: 100%;
}
.container {
display: flex;
position: relative;
}
.content {
flex: 1 1;
order: 2;
background: #f00;
}
.left {
position: absolute;
width: 300px;
background: #0f0;
}
.right {
width: 100%;
margin-left: 300px;
background: #00f;
}
</style>
</head>
<body>
<div class="container">
<div class="left">你好</div>
<div class="right">我好</div>
</div>
</body>
</html>
Как реализовать трехколоночный макет
position + margin-left + margin-right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
height: 500px;
}
.box {
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 200px;
background: green;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 200px;
background: red;
}
.middle {
margin-left: 200px;
margin-right: 200px;
background: black;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>
через поплавок + маржа
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
height: 500px;
}
.left {
float: left;
width: 200px;
height: 200px;
background: green;
}
.right {
float: right;
width: 200px;
height: 200px;
background: red;
}
.middle {
margin-left: 210px;
margin-right: 210px;
background: black;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
</body>
</html>
Макет Святого Грааля
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
padding: 0 300px 0 200px;
border: 1px solid black;
}
.content {
float: left;
width: 100%;
background: #f00;
}
.left {
width: 200px;
background: #0f0;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 300px;
background: #00f;
float: left;
margin-left: -300px;
position: relative;
right: -300px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">中间内容</div>
<div class="left">左侧区域</div>
<div class="right">右侧区域</div>
</div>
</body>
</html>
Двухстворчатая компоновка
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
height: 100%;
}
div {
height: 100%;
}
.main {
float: left;
width: 100%;
background: #f00;
}
.main .content {
margin-left: 200px;
margin-right: 300px;
}
.left {
width: 200px;
background: #0f0;
float: left;
margin-left: -100%;
}
.right {
width: 300px;
background: #00f;
float: left;
margin-left: -300px;
}
</style>
</head>
<body>
<div class="main">
<div class="content">hello world</div>
</div>
<div class="left">你好</div>
<div class="right">王鹏浩</div>
</body>
</html>
гибкий макет
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
height: 100%;
}
div {
height: 100%;
}
.container {
display: flex;
}
.content {
flex: 1 1;
order: 2;
background: #f00;
}
.left {
flex: 0 0 200px;
order: 1;
background: #0f0;
}
.right {
flex: 0 0 300px;
order: 3;
background: #00f;
}
</style>
</head>
<body>
<div class="container">
<div class="content">hello world</div>
<div class="left">你好</div>
<div class="right">王鹏浩</div>
</div>
</body>
</html>
Ссылка на ссылку
В: Что такое анимация CSS?
- animation
Следует уточнить свойства анимации, перехода, преобразования и перевода:
- анимация: используется для установки свойств анимации, это сокращенное свойство, которое содержит 6 свойств.
- переход: используется для установки стиля элемента, имеет тот же эффект, что и анимация, но детали сильно отличаются
- преобразование: используется для поворота, масштабирования, перемещения или наклона элемента и не имеет ничего общего со стилем анимации.
- перевод: перевод — это просто значение атрибута преобразования, то есть движения, в дополнение к масштабу и т. д.
использованная литература
(3) Q: Используйте css2 и css3 для записи вертикального и горизонтального центрирования соответственно.
CSS2
Центрировать по горизонтали:
- div + margin: auto;
- span + text-align
Центрировать по вертикали
- Используйте положение, затем левое/верхнее и поле для центрирования по вертикали (известная ширина и высота и неизвестная ширина и высота)
- использовать позицию + маржу
- Использовать display: table-cell;
Зная ширину и высоту, центрируем по горизонтали и вертикали
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
position: relative;
width: 400px;
height: 600px;
background: blue;
}
.inner {
position: absolute;
width: 200px;
height: 300px;
background: red;
left: 50%;
top: 50%;
margin: -150px 0 0 -100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
Неизвестная ширина и высота, например встроенные элементы, центрированные по горизонтали и вертикали
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
width: 400px;
height: 600px;
/* background: blue; */
border: 1px solid red;
background-color: transparent;
position: relative;
}
.inner {
position: absolute;
background: red;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="outer">
<span class="inner">我想居中显示</span>
</div>
</body>
</html>
Абсолютно позиционированный div с центрированием по горизонтали и вертикали
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
width: 400px;
height: 600px;
/* background: blue; */
border: 1px solid red;
background-color: transparent;
position: relative;
}
.inner {
position: absolute;
background: red;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 200px;
height: 300px;
margin: auto;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">我想居中显示</div>
</div>
</body>
</html>
Изображения и другие элементы центрируются по вертикали с помощью display: table-cell;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
width: 400px;
height: 600px;
/* background: blue; */
border: 1px solid red;
background-color: transparent;
display: table-cell;
vertical-align: middle;
}
.inner {
background: red;
width: 200px;
height: 300px;
border: 1px solid blue;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">我想居中显示</div>
</div>
</body>
</html>
CSS3
Центрировать по вертикали и горизонтали
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
width: 400px;
height: 600px;
display: flex;
/* 垂直居中 */
align-items: center;
/* 水平居中 */
justify-content: center;
border: 1px solid red;
background-color: transparent;
}
.inner {
background: red;
width: 200px;
height: 300px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">我想居中显示</div>
</div>
</body>
</html>
(2) В: разница между видимостью и отображением (и непрозрачностью)
- параметр видимости hidden скроет элемент, но его позиция все еще существует в потоке документов страницы и не будет удалена, поэтому он вызовет перерисовку механизма рендеринга браузера.
- Отображение, установленное для атрибута none, скроет элемент, и его положение не будет сохранено, поэтому он вызовет перекомпоновку и перерисовку механизма рендеринга браузера.
- opacity сделает элемент прозрачным, но его позиция также находится в потоке документа страницы и не будет удалена, поэтому он вызовет перерисовку механизма рендеринга браузера.
В: Может ли непрозрачность иметь эффекты перехода?
Можно установить эффекты перехода
В: В чем разница между BFC и IFC?
BFC — это контекст форматирования на уровне блоков, а IFC — это встроенный контекст форматирования:
- Внутренняя коробка будет размещена горизонтально
- Горизонтальный интервал определяется полями, отступами, границей
Ссылка на ссылку:
В: Будет ли BFC перекрываться с плавающими элементами? Зачем? Например
Нет, так как BFC является независимым изолирующим контейнером на странице, его внутренние элементы не будут взаимодействовать с внешними элементами, такими как два div, верхний div установлен как float, а если нижний элемент не является BFC, он не будет float , это сформирует ситуацию обертывания содержимого вышеуказанного элемента. Если для следующего элемента установлено значение overflow: hidden; attribute, то можно реализовать классическую двухколоночную компоновку. Содержимое слева имеет фиксированную ширину, а содержимое справа является адаптивным, поскольку это BFC.
Ссылка на ссылку
В: Знаете ли вы о размерах коробок?
Свойство box-sizing можно использовать для настройки следующих режимов:
-
content-boxявляется значением по умолчанию. Если вы установите ширину элемента на 100 пикселей, то область содержимого элемента будет иметь ширину 100 пикселей, а ширина границ и отступов будет добавлена к ширине последнего нарисованного элемента. -
border-boxСообщите браузеру, что значения границ и отступов, которые вы хотите установить, содержатся в пределах ширины. То есть, если вы установите ширину элемента на 100 пикселей, то 100 пикселей будут включать его границу и отступы, а фактическая ширина области содержимого равна значению ширины минус (граница + отступы). В большинстве случаев это упрощает установку ширины и высоты элемента.
(2) Что такое БФК
Контекст форматирования BFC (Block Formatting Context) — это режим рендеринга CSS макета блочной модели на веб-страницах, который относится к независимой области рендеринга или изолированному независимому контейнеру.
Условия образования БФК
Пять:
- элемент float, значение float, отличное от none
- Позиционирующий элемент, положение (абсолютное, фиксированное)
- display — одно из следующих значений inline-block, table-cell, table-caption
- значение переполнения, отличное от видимого (скрытое, автоматическое, прокрутка)
- HTML — это BFC
Особенности БФК:
- Внутренние ящики располагаются вертикально один за другим.
- Расстояние по вертикали определяется запасом
- Область bfc не перекрывает область элемента float.
- При расчете высоты бфц в расчете также участвуют плавающие элементы
- bfc — это независимый контейнер на странице, и дочерние элементы внутри контейнера не будут влиять на внешние элементы.
(2) Вопрос: понимаете ли вы коробочную модель?
Блочная модель CSS — это, по сути, блок, который инкапсулирует окружающие элементы HTML, он включает в себя:外边距（margin）,边框（border）,内边距（padding）,实际内容（content）четыре свойства.
Блочная модель CSS:Стандартная модель + модель IE
Стандартная блочная модель: ширина = ширина содержимого (контента) + граница + отступы
Нижняя версия блочной модели IE: ширина = ширине содержимого (контент+граница+заполнение), как установить ее в блочную модель IE:
box-sizing: border-box;
Ссылка на ссылку
В: Расскажите об известных вам атрибутах должности, каковы их характеристики?
статический: нет специального позиционирования, объект следует обычному документообороту. Такие свойства, как верх, право, низ, лево, не применяются. относительный: объект следует за обычным потоком документов, но будет смещен в обычном потоке документов в соответствии со свойствами, такими как верх, право, низ, лево и т. д. А его каскад определяется свойством z-index. absolute: Объект отклоняется от обычного потока документа и использует свойства top, right, bottom, left и другие свойства для абсолютного позиционирования. А его каскад определяется свойством z-index. Исправлено: объект выходит за рамки обычного потока документа и использует свойства top, right, bottom, left и другие для позиционирования окна в качестве контрольной точки.Когда появляется полоса прокрутки, объект не будет прокручиваться вместе с ней. А его каскад определяется свойством z-index. sticky: Подобно относительным и фиксированным, относительный применяется до того, как окно просмотра прокручивается до порога, а фиксированный макет применяется после прокрутки до порога, определенного сверху.
В: Два div расположены вверх и вниз, и оба имеют поля, что это за явление?
- принимают большие
- Добавьте один положительный и один отрицательный
В: Почему это происходит? Можете ли вы объяснить это
Это определяется контекстом формата на уровне блока, BFC, элементы будут расположены вверх и вниз в BFC, а затем вертикальное расстояние определяется по полю, и произойдет перекрытие.
BFC — это независимый изолированный контейнер на странице, внутренние дочерние элементы не будут влиять на внешние элементы.
Q: Каковы методы очистки поплавков?
Непонятно, что флоат рухнет по высоте: высота родительского элемента у плавающего элемента адаптивная (когда родительский элемент не пишет высоту, после того, как дочерний элемент напишет флоат, высота родительского элемента рухнет )
- Очистите, чтобы очистить поплавок (добавьте пустой метод div) Добавьте пустой div ниже плавающего элемента и напишите стиль css для элемента: {clear:both;height:0;overflow:hidden;}
- Установите высоту родительского плавающего элемента
- Родитель плавает одновременно (необходимо добавить плавание к родительскому родственному элементу)
- Для родителя задан встроенный блок, а его поле: 0 метод автоматического центрирования недействителен
- Добавьте overflow:hidden к родителю, чтобы очистить плавающий метод.
- Универсальный метод очистки после плавающей очистки псевдокласса (текущий основной метод, рекомендуется)
.float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}
Ссылка на ссылку
- nuggets.capable/post/684490…
- сегмент fault.com/ah/119000001…
- nuggets.capable/post/684490…
- nuggets.capable/post/684490…
- nuggets.capable/post/684490…
- nuggets.capable/post/684490…
- nuggets.capable/post/684490…
- nuggets.capable/post/684490…
❤️ Спасибо за поддержку
Если вам это нравится, не забудьте поделиться, поставить лайк и посмотреть Sanlian~.