Вопрос на собеседовании: HTML+CSS

опрос

Продолжаем обновлять...

Портал интервью:

Дело не в HTML+CSS, это просто понимание, не нужно углубляться

001. Гибкий макет

 Макет Flex (Flexible Box), называемый «гибким макетом», может обеспечить максимальную гибкость макета веб-страниц, заменив обычный плавающий (плавающий) макет, и любой контейнер можно настроить на макет Flex.
Примечание. После установки гибкого макета плавающий макет дочерних элементов будет недействительным.
Учебное пособие в Flex

002. Новые возможности HTML5+CSS3

HTML5

CSS3

003. Коробчатая модель

Стандартная блочная модель, блочная модель IE
Блочная модель CSS

004. Как центрировать div по горизонтали?

005. Как центрировать div по горизонтали и вертикали?

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

Обычно класс, который очищает поплавки, определяется в общедоступных стилях css.

.clearfix{
	clear:both;
	content:'';
	display:block;
	width: 0;
	height: 0;
	visibility:hidden;
}

CSS поплавок (Float) очистить поплавок

007.css3 для создания трехколоночного макета, фиксированного слева и справа, адаптивного посередине?

Планировка Святого Грааля / Планировка двойного крыла

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        .middle,
        .left,
        .right {
            position: relative;
            float: left;
            min-height: 130px;
        }
        .container {
            padding: 0 220px 0 200px;
            overflow: hidden;
        }
        .left {
            margin-left: -100%;
            left: -200px;
            width: 200px;
            background: red;
        }
        .right {
            margin-left: -220px;
            right: -220px;
            width: 220px;
            background: green;
        }
        .middle {
            width: 100%;
            background: blue;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div class='container'>
        <div class='middle'></div>
        <div class='left'></div>
        <div class='right'></div>
    </div>
</body>

008. В чем разница между ссылкой и @import в CSS?​

  • ссылка — это тег HTML, а @import — это CSS, предоставляемый страницей при загрузке страницы, ссылка будет загружена одновременно, а CSS, на который ссылается @import, будет ждать загрузки страницы перед загрузкой.
  • импорт может быть распознан только в IE5 или более поздних версиях, а ссылка является HTML-тегом, проблем с совместимостью нет.
  • Вес стиля ссылки выше, чем у @import.

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

Большинство свойств анимации и перехода одинаковы. Они оба изменяют значение свойства элемента с течением времени. Основное различие между ними заключается в том, что для перехода необходимо инициировать событие, чтобы изменить свойство. Анимации не нужно запускать какие-либо события для изменения значения атрибута во времени, а переход составляет 2 кадра, от .... до, причем анимация может быть покадровой.

010. Приоритет CSS?

不同级别：总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
	1.属性后面加!import 会覆盖页面内任何位置定义的元素样式
	2.作为style属性写在元素内的样式
	3.id选择器
	4.类选择器
	5.标签选择器
	6.通配符选择器（*）
	7.浏览器自定义或继承
**同一级别：后写的会覆盖先写的**

011. Как сделать так, чтобы элементы исчезали?

видимость: скрыта, отображение: нет, z-index=-1, непрозрачность: 0

1.opacity: 0, элемент скрыт, но макет страницы не будет изменен, и если элемент связан с некоторыми событиями, такими как событие клика, он также может быть вызван
2.visibility:hidden, элемент скрыт, но макет страницы не изменится, но событие, к которому был привязан элемент, не сработает
3.display:node, скрывает элемент и изменяет макет страницы, что можно понимать как удаление элемента на странице

012. Почему css вверху, а js сзади?

1. После того, как браузер предварительно загрузит CSS, он может отображать страницу, не дожидаясь загрузки HTML.
2. На самом деле рендеринг HTML не ждет полной загрузки страницы для рендеринга страницы, а рендеринг выполняется во время разбора DOM.
3. js пишется в конце, в основном потому, что js в основном играет функцию обработки событий, с одной стороны многие операции выполняются уже после рендеринга страницы. С другой стороны, это может сократить время загрузки, ускорить загрузку страницы и улучшить взаимодействие с пользователем.

Но с развитием технологии JS JS также начал выполнять работу по рендерингу страниц. Например, наш пользовательский интерфейс можно обрабатывать отдельно, помещая js для рендеринга страницы на передний план, а js для обработки времени — на задний.

013. Вы понимаете BFC?

BFC означает контексты блочного форматирования.
Элементы с характеристиками BFC можно рассматривать как изолированные независимые контейнеры.Элементы внутри контейнера не будут влиять на расположение элементов снаружи, а BFC имеет некоторые характеристики, которых нет у обычных контейнеров.
С точки зрения неспециалиста, БТЭ можно представить как большую закрытую коробку, как бы ни переворачивались элементы внутри коробки, снаружи они никак не повлияют.

Понимание BFC в CSS

014. Как использовать Less, sass и т. д.

Less и sass — это языки предварительной обработки CSS, которые расширяют язык CSS, добавляя переменные, примеси, функции и другие функции, а также вложенные записи, упрощая поддержку и расширение CSS.

015. Кратко расскажите о каскадном уровне (z-index) веб-страницы?

На самом деле веб-страница разделена на несколько слоев, конкретные слои и каскадные уровни следующие:

Категории