Хотя кажется, что это похоже на упрощение ответов на вопросы интервью, я обнаружил, что для таких людей, как я, у которых нет опыта работы, это на самом деле хорошая возможность расширить свои практические навыки и углубить свои знания и понимание.
Поделитесь, и я надеюсь, что все не будут доводить дело до конца, а всерьез рассматривать различные причины.
Эта статья представляет собой сборник тем.Я постараюсь сделать некоторые ответы максимально простыми своими словами.Я буду напрямую размещать ссылки на некоторые из хороших ответов, которые легко доступны в Интернете.Я также уважаю плоды вашего труда. Надеюсь, вы не будете слишком возражать.
Если есть ошибка, укажите на нее 👏👏
1. Что такое блочная модель?
Блочная модель включает в себя содержимое + отступы + границы + поля.
Стандартная блочная модель: ширина = ширине контента (контента)
Блочная модель IE с низкой версией: ширина=содержимое+граница+заполнение
2. Какие селекторы обычно используются в CSS?
сегмент fault.com/ah/119000001…
3. Какие новые псевдоклассы появились в CSS3?
p:first-of-type выбирает первый элемент, принадлежащий его родителю
p:last-of-type выбирает последний элемент, принадлежащий его родителю
p:only-of-type выбирает элементы, которые уникальны для их родителя
p:only-child выбирает единственный дочерний элемент, принадлежащий его родительскому элементу
p:nth-child(2) выбирает второй дочерний элемент, принадлежащий его родителю
:enabled :disabled Отключенное состояние элемента управления формы.
: проверено радио или флажок установлен
4. Каковы новые возможности CSS3
Это большой вопрос.Мне как журналисту по специальности "журналистика" такой вопрос просто мозг вышибает.Столько новых фич.Вам еще раз зазубрить документ?
Однако, очевидно, интервьюеру все равно, что вы не можете ответить на все, он может и сам этого не помнить, верно?
Мы можем начать с личного опыта проектов, например, я использовал гибкую верстку при создании небольших программ, поэтому я могу сосредоточиться на этом, а затем перечислить три или четыре других.
Для вашего удобства вот некоторые из них:
(1) Гибкая коробка CSS3 (Flexible Box или flexbox)
Это способ обеспечить правильное поведение элементов, когда страница должна адаптироваться к разным размерам экрана и типам устройств.
Ссылка на конкретное использованиеу-у-у.
Примечание. Убедитесь, что вы различаете главную ось и боковую ось (поперечную ось).Настройка flex-direction — строка, горизонтальная — главная ось, вертикальная — боковая ось; если установлено столбец, вертикальная главная ось, а горизонтальная — это боковая ось, а justify-content — это настройка. Для расположения главной оси align-items задает расположение боковой оси. Если вы знаете это, вы, вероятно, можете использовать это
(2) Селектор псевдокласса, обратитесь к третьему пункту выше, когда рендеринг списка изменяет стиль одного списка, вышеприведенный nth-child() очень прост в использовании
(3) Закругленные углы границы:border-radius：3px
(4) @font-face, который может вводить шрифты, которых нет у клиента.
(5) Медиа-запрос @meida, конкретное использование:блог woo woo woo.cn на.com/eye-reference/fear/58…
Другие ссылки:blog.CSDN.net/Dragon Beard Grass/art IC…
5. Правила расчета приоритета CSS
important Infinity
Интерлайн Стиль 1000
id 100
класс/атрибут/псевдокласс 10
Селектор тегов/псевдоэлемент 1
Подстановочный знак 0
6. Как использовать пользовательские шрифты
@font-face может быть реализован, конкретный метод использования:Ууууу. Краткое описание.com/afraid/976 удобство 95 8…
7. Каковы унаследованные свойства CSS
Ссылаться на:woohoo.cn blog.com/thisfilter/afraid/5…
8. Однострочное и многострочное пропуски в CSS
Одна линия:
overflow: hidden;//隐藏溢出
text-overflow:ellipsis;//省略号
white-space: nowrap;//不换行
9. Как убрать зазор между элементами встроенного блока?
Причины пробелов: пробельные символы, такие как разрывы строк, пробелы и табуляции в HTML. Если размер шрифта не равен 0, пробельные символы занимают определенную ширину. Использование встроенного блока создает пробелы между элементами.
Решение:
- Напишите все дочерние элементы в одной строке;
- Дочерний элемент имеет значение float;
- Размер шрифта родительского элемента устанавливается равным 0, а размер шрифта дочернего элемента устанавливается равным фактическому размеру;
- Используйте аннотации:
<div class="parent">
    <div class="child"></div><!--
  --><div class="child"></div><!--
  --><div class="child"></div><!--
  --><div class="child"></div>
</div>
10. Свойство отображения?
block: указывает, что элемент является элементом уровня блока, с задаваемой шириной и высотой, а также с разрывами строк до и после элемента, такими как div и p. встроенный: указанный элемент является встроенным, ширина и высота не могут быть установлены.Элемент не имеет разрыва строки и будет отображаться на той же строке, например, span. встроенный блок: встроенный блочный элемент, который имеет характеристики первых двух.Нет разрыва строки до и после элемента, но можно установить ширину и высоту, например, input\img. нет: элемент может быть скрыт. Есть два более часто используемых, которые я лично считаю очень практичными, то есть таблица и таблица-ячейка, которые используются в сочетании с родительским и дочерним элементами.Если дочерний элемент имеет большой абзац текста, просто добавьте vertical-align:middle для удобного выравнивания текста по центру по вертикали. CSS3 добавил гибкость, которая очень подходит для мобильного использования и может хорошо адаптироваться к разным размерам экрана.
11. свойство box-sizing
Режим синтаксического анализа, используемый для управления блочной моделью элемента, по умолчанию имеет значение content-box.
context-box: стандартная блочная модель W3C, установка свойства height/width элемента относится к высоте/ширине части содержимого; border-box: традиционная блочная модель IE. Установка свойства высоты/ширины элемента относится к высоте/ширине границы + заполнения + части содержимого.
12. отображение: нет и видимость: скрыто
Многие студенты, изучающие интерфейс, думают, что разница между visibility: hidden и display: none заключается в том, что элемент, скрытый с помощью display: none, не занимает места, в то время как пространство элемента, скрытого с помощью видимости: скрытый, по-прежнему зарезервировано. это не так просто.
1. Видимость имеет наследование, установите родительскому элементу visibility: hidden, дочерний элемент также унаследует это свойство. Но если вы снова установите visibility: visible для дочернего элемента, дочерний элемент снова будет отображаться. Это качественно отличается от display: none
2. Видимость: скрытый не повлияет на счетчик счетчика Как показано на рисунке, хотя видимость: скрытый заставляет элемент исчезнуть, его счетчик все еще работает. Это полностью отличается от display: none.
13. Значение свойства сворачивания свойства видимости
Интересным является свойство сворачивания: когда для свойства видимости элемента установлено значение сворачивания, оно ведет себя так же, как скрытое для обычных элементов. Но исключением является то, что если этот элемент является элементом, связанным с таблицей, например строкой таблицы, группой таблиц, столбцом таблицы, группой столбцов таблицы, его производительность будет варьироваться от браузера к браузеру.
В Google Chrome нет разницы между использованием значения свертывания и скрытого значения.
В Firefox и IE8 использование значения свертывания делает именно то, что означает: строка таблицы исчезает, а строка под ней заполняет ее место. Эффект аналогичен display:none.
14. em\px\rem разность
px: Абсолютная единица, страница отображается в точных пикселях.
em: относительная единица, ориентиром является размер шрифта родительского узла.Если размер шрифта определен сам по себе, он рассчитывается сам по себе (шрифт браузера по умолчанию равен 16px), а 1em на всей странице не является фиксированная стоимость.
rem: относительная единица, может быть понята как "root em", вычисляется относительно размера шрифта корневого узла html, новый атрибут CSS3, поддержка chrome/firefox/IE9+.
Особенности ПК:
-
IE не может изменять размер шрифтов, в которых в качестве единицы измерения используются px;
-
Причина, по которой большинство зарубежных веб-сайтов можно настроить, заключается в том, что они используют em или rem в качестве единицы шрифта;
-
Firefox может настраивать px и em, rem, но более 96% китайских пользователей сети используют браузер IE (или ядро).
Особенности ЭМ:
-
Значение em не фиксировано;
-
em наследует размер шрифта родительского элемента.
особенности рем:
rem — это относительная единица измерения (root em, root em), недавно добавленная в CSS3, которая привлекла большое внимание. Разница в том, что когда вы используете rem для установки размера шрифта для элемента, это все еще относительный размер, но только относительно корневого элемента HTML.
Можно сказать, что этот блок сочетает в себе преимущества относительного размера и абсолютного размера, он может не только регулировать размер всех шрифтов пропорционально, изменяя корневой элемент, но и избегать цепной реакции соединения размера шрифта слой за слоем.
В настоящее время rem поддерживается во всех браузерах, кроме IE8 и более ранних версий. Для браузеров, которые его не поддерживают, решение тоже очень простое — написать дополнительную инструкцию абсолютных единиц. Эти браузеры игнорируют размер шрифта, установленный с помощью rem.
Каковы значения позиции?
1, статическое (статическое позиционирование): значение по умолчанию. Без позиционирования элементы отображаются в обычном потоке (игнорируя объявления top, bottom, left, right или z-index).
2. Relative (относительное позиционирование): создайте относительно позиционированный элемент и расположите его относительно его нормального (исходного) положения с помощью настроек сверху, снизу, слева и справа. Иерархическую градацию можно выполнить по z-индексу. После изменения положения элемента он не покидает документооборот.
3. Абсолютное (абсолютное позиционирование): создание абсолютно позиционированных элементов, позиционированных относительно первого родительского элемента, отличного от статического позиционирования. Положение элемента задается свойствами «слева», «сверху», «справа» и «снизу». Иерархическая градация может быть выполнена по z-индексу, который находится вне потока документов.
4, фиксированный (фиксированное позиционирование): генерировать абсолютно позиционированные элементы, расположенные относительно окна браузера. Положение элемента задается свойствами «слева», «сверху», «справа» и «снизу». Иерархическую градацию можно выполнить по z-индексу.
Как центрировать нетекстовые элементы по горизонтали и вертикали?
Горизонтальное центрирование обычного div
margin: 0 auto;
height: 50px;
width: 80px;
Абсолютно горизонтально по центру:
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
Горизонтальное и вертикальное центрирование плавающих элементов:
border: 1px solid red;
float: left;
position:absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
Используйте функцию автоматического масштабирования абсолютно позиционированных элементов для центрирования по горизонтали и вертикали.
.father{
position: relative;
width: 500px;
height: 500px;
}
.son{
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Используйте гибкую компоновку для центрирования по горизонтали и вертикали (ответ на этот вопрос более высокого класса)
#box{
display: flex;
display: -webkit-flex;
border: 1px solid #0000FF;
height: 200px;
width: 400px;
align-items:center;
justify-content:center;
}
.item{
width: 50px;
height: 40px;
border: 1px solid #00C1B3;
}
Не зная размера изображения, как задать стиль, чтобы изображение не деформировалось?
max-width: 100%
Как очистить поплавок?
Блог Woohoo.cn на.com/Han Qingtao/…
Пожалуйста, объясните flexbox CSS3 (модель макета гибкого блока) и применимые сценарии?
Блог Woohoo.cn на.com/Li Xuemin/Afraid/…
Создайте треугольник с помощью чистого CSS
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
В чем разница между прозрачностью rgba и непрозрачностью?
Непрозрачность унаследует свойство непрозрачности родительского элемента, а элементы-потомки элемента, заданного RGBA, не будут наследовать свойство непрозрачности. Проще говоря, непрозрачность влияет на прозрачность элемента и всего содержимого элемента.
rgba по-прежнему превосходит непрозрачность.Конечно, если речь идет о цвете, rgba можно использовать для его установки.
Понимание спецификации BFC (контекст форматирования блока: контекст форматирования блока)
БФУ имеет следующие характеристики:
1. Внутренние ящики будут размещены один за другим в вертикальном направлении, начиная сверху. 2. Вертикальное расстояние Коробки определяется полем. Поля двух соседних блоков, принадлежащих одному и тому же BFC, будут наложены друг на друга. 3. Левая сторона поля поля каждого элемента касается левой стороны поля границы содержащего блока (для форматирования слева направо, в противном случае наоборот). Это верно, даже если есть поплавки. 4. Область BFC не будет перекрываться с плавающей рамкой. 5. BFC — это изолированный и независимый контейнер на странице, дочерние элементы внутри контейнера не будут влиять на внешние элементы, и наоборот. 6. При расчете высоты БФК в расчете также участвуют плавучие элементы.
Итак, что мы можем сделать, чтобы вызвать BFC?
- float Значения кроме none Значения переполнения кроме visible (hidden, auto, scroll)
- отображение (ячейка таблицы, заголовок таблицы, встроенный блок, гибкий, встроенный гибкий)
- Значение позиции (абсолютное, фиксированное) элемент fieldset
- элемент набора полей BFC может быть создан в вышеуказанных случаях
Проблемы, которые может решить BFC
- Что касается проблемы укладки полей, мы можем избежать укладки полей, поместив элемент в наш только что созданный BFC.
- Для левого и правого элементов макета мы можем добавить overflow:hidden или auto к правому элементу и float:left к левому элементу.
- Вы можете очистить float и рассчитать высоту BFC. Плавающий элемент не будет растягивать высоту родительского элемента. Мы можем позволить родительскому элементу запускать BFC, даже используя overflow: hidden
запросы средств массовой информации
грамматика:
@media mediatype and|not|only (media feature) {
CSS-Code;
}
Случай:
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
Макет Святого Грааля и макет двойного крыла
Блог Woohoo.cn на.com/IM client/afraid/444…
Браузер анализирует селекторы CSS
справа налево
Отзывчивый дизайн
Как заставить браузер поддерживать текст размером менее 12 пикселей?
.Num{
display: inline-block;
font-size: 14px;
transform: scale(0.8);
}
Разница между ссылкой и @import
- link — это тег XHTML, а @import предоставляется CSS.
- Когда страница загружена, ссылка будет загружена в то же время, и CSS, на который ссылается @import, будет ждать загрузки страницы перед загрузкой.
- импорт может быть распознан только в IE 5 и выше, а ссылка является тегом XHTML, проблем с совместимостью нет.
- Вес стиля метода ссылки выше, чем у @import.
- Различия при использовании dom для управления стилями. При использовании javascript для управления домом для изменения стиля можно использовать только тег ссылки, потому что @import не контролируется домом.
Перекомпоновать и перекрасить
блог woo woo woo.cn на.com/self-sustaining/afraid/472…
Оптимизация CSS и улучшение производительности
Блог Woohoo.cn на.com/Xiaoloulan/…
Как убрать точку перед ul и li?
list-style:none
Чисто личные записи, незаконченные, продолжение следует...