Очки знаний и навыков CSS

Эти очки знаний - это то, что я лично думаю, давайте посмотрим на эти очки знаний.

1. Как сделать неопределенный - высокий диван, вертикальный уровень?

Использовать Flex

Просто установите его в родительском поле: display: flex, justify-content: center,align-items: center;

Использование преобразований CSS3

Настройки родительского ящика:display:relative
Настройки дива:transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;

Использовать отображение: метод таблицы-ячейки

Настройки родительского ящика:display:table-cell; text-align:center;vertical-align:middle;
Настройки дива:display:inline-block;vertical-align:middle;

2. Роль некоторых свойств положения

2.1 относительный, абсолютный, фиксированный, статический

Четыре общих значения свойства положения: относительное, абсолютное, фиксированное, статическое. Обычно используется со свойствами "left", "top", "right" и "bottom".

статическое: местоположение по умолчанию.В общем, нам не нужно специально объявлять его, но иногда мы сталкиваемся с наследованием, и мы не хотим видеть влияние атрибутов, унаследованных самим элементом, поэтому мы можем отменить наследование с помощью Position:static, что есть, восстановить позиционирование элемента. Статический элемент всегда будет находиться в позиции, заданной потоком страницы (статические элементы игнорируют любые объявления сверху, снизу, слева или справа). Обычно не используется.
относительный: Относительное позиционирование.Относительное позиционирование — это позиционирование относительно положения элемента по умолчанию.Верхнее, правое, нижнее и левое значения его смещения смещены от исходного положения, независимо от того, что происходит с другими элементами. Обратите внимание, что относительно перемещенный элемент по-прежнему занимает место в своем исходном положении.
абсолютное: абсолютное позиционирование.Если для элемента задано абсолютное значение, если его родительский контейнер имеет установленный атрибут позиции, а значение атрибута позиции является абсолютным или относительным, то оно будет смещено в соответствии с родительским контейнером. Если для его родительского контейнера не задано свойство position, смещение основано на теле. Обратите внимание, что элементы с установленным абсолютным свойством не занимают позиции в стандартном потоке.
фиксированное: фиксированное позиционирование.Элемент, положение которого установлено как фиксированное, может быть расположен в указанных координатах относительно окна браузера. Элемент остается в этом положении независимо от того, прокручивается окно или нет. Он всегда основан на теле. Обратите внимание, что элементам с фиксированным набором атрибутов не место в стандартном потоке.

2.2 sticky

Новый атрибут "липкая" позиция: Когда липкий элемент установлен, положение элемента не зависит от позиционирования в диапазоне экрана (окне просмотра).

Атрибут sticky имеет следующие характеристики:

Элемент не покидает поток документов и по-прежнему сохраняет исходное положение элемента в потоке документов.
Когда элемент прокручивается в контейнере за пределы указанного значения смещения, элемент фиксируется в указанной позиции в контейнере. То есть, если вы установите top: 50px, то когда липкий элемент достигнет положения 50px от вершины относительно позиционированного элемента, он будет зафиксирован и не будет двигаться вверх.

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

Видеть:blog.CSDN.net/День мертвых_37390…

3. Поплавок и чистый поплавок

3.1 Плавающие знания

Значение свойства float:

слева: элемент перемещается влево.
right: элемент перемещается вправо.
нет: значение по умолчанию. Элементы не плавают и появляются там, где они появляются в тексте.

Плавающие свойства:

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

Отображение плавающих элементов имеет разные правила в разных ситуациях:

Когда плавающий элемент плавает, его поле не будет превышать отступ содержащего его блока.PS: если вы хотите, чтобы элемент превышал, вы можете установить атрибут поля
Если два элемента перемещаются влево, а один — вправо, то marginRight плавающего слева элемента не будет соседствовать с marginLeft плавающего справа элемента.
Если имеется несколько плавающих элементов, плавающие элементы будут расположены по порядку без перекрытия.
Если имеется несколько плавающих элементов, последующие элементы не превысят высоту предыдущего элемента и не превысят содержащий его блок.
Если есть неплавающий элемент и плавающий элемент одновременно, и неплавающий элемент находится впереди, плавающий элемент не будет выше неплавающего элемента
Плавающие элементы максимально выровнены по верхнему, левому или правому краю.

перекрывающаяся проблема

Встроенные элементы перекрываются с плавающими элементами, а их границы, фон и содержимое отображаются поверх плавающего элемента.
Когда элемент уровня блока перекрывается с плавающим элементом, границы и фоны отображаются под плавающим элементом, и содержимое отображается на плавающем элементе.

Очистить свойствосвойство clear: убедитесь, что слева и справа от текущего элемента нет плавающих элементов. clear работает только с макетом самого элемента. Значения: левый, правый, оба

3.2 Проблема коллапса высоты родительского элемента

Почему вы хотите очистить поплавок, высота родительского элемента рушитсяРешите проблему коллапса высоты родительского элемента: если для блочного элемента не задана высота, его высота растягивается дочерним элементом. После использования float на дочернем элементе дочерний элемент вырвется из стандартного потока документа, то есть в родительском элементе нет содержимого, чтобы растянуть его высоту, поэтому высота родительского элемента будет игнорироваться, что называется обрушение высоты.

3.3 Методы очистки поплавков

Метод 1: определить высоту родительской DivПринцип: Чтобы определить родительскую div фиксированную высоту (высоту), может решить рост родительской DIV, не смогла получить проблему. Преимущества: краткий код Минусы: Высота исправлена, чтобы умереть подходит для модуля фиксированного содержимого. (Не рекомендуется)

Способ 2. Используйте пустые элементы, например<div class="clear"></div> (.clear{clear:both})Принцип: добавьте пару пустых тегов DIV, используйте свойство css clear:both, чтобы очистить поплавок, чтобы родительский DIV мог получить высоту. Достоинства: хорошая поддержка браузеров Недостатки: Много пустых тегов DIV.Если на странице много плавающих модулей, то будет много пустых DIV, что не очень радует. (устарело)

Способ 3: пусть родительский div также плаваетЭто может изначально решить текущую проблему с плавающей запятой. Но это также приводит к плаванию родителя, что создаст новые плавающие проблемы. Не рекомендуется

Способ 4: родительский элемент div определяет display:tableПринцип: атрибут Mang DIV в таблицу Достоинства: нет решения Недостатки: Будут генерироваться новые неизвестные проблемы. (устарело)

Способ 5: Родительский элемент устанавливает overflow: hidden, auto;Принцип: Ключом к этому методу является запуск BFC. Также необходимо вызвать hasLayout(zoom: 1) в IE6 Преимущества: ввод кода, отсутствие структурных и семантических проблем Недостаток: невозможно отобразить элементы, которые должны быть переполнены (также не рекомендуется).

Способ 6: Родительский div определяет псевдоклассы: after и zoom

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

Принцип: IE8 и выше, а также браузеры, отличные от IE, поддерживают только:after, принцип чем-то похож на способ 2,zoom(IE иметь атрибуты) может решить плавающую проблему ie6 и ie7 Преимущества: структура и семантика полностью верны, объем кода также умеренный, а коэффициент использования допускает повторное использование (рекомендуется определять публичные классы). Недостаток: код не очень лаконичен (настоятельно рекомендуется)

Написано Yi уточнение

.clearfix:after {
    content:”\200B”; 
    display:block; 
    height:0; 
    clear:both;
 }
.clearfix { *zoom:1; } 照顾IE6，IE7就可以了

Дополнительные сведения о поплавках см. в этой статье:[

Luopingqing.com/2015/11/08/…

4. Знания, связанные с BFC

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

Правила компоновки BFCBFC — это изолированный и независимый контейнер на странице, и дочерние элементы внутри контейнера не будут влиять на внешние элементы. Наоборот.

Вертикальное поле элемента BFC будет перекрываться, а вертикальное расстояние определяетсяmarginрешайте, берите максимум
Площадь БТЧ не перекрывает плавающую рамку (清除浮动原理).
При расчете высоты БФК в расчете также участвуют плавающие элементы.

Какие элементы генерируют BFC

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

5. Что такое box-sizing

Установите блочную модель CSS на стандартную модель или модель IE. Ширина стандартной модели включает толькоcontent, две модели IE включаютborderа такжеpaddingСвойство box-sizing может иметь одно из трех значений:

content-box, значение по умолчанию, рассчитывается только ширина содержимого, границы и отступы не учитываются в ширине
padding-box, отступ вычисляется по ширине
border-box, border и padding учитываются в ширине

6. Разница между px, em, rem

pxПиксель. абсолютная единица. пикселей пикселей相对于显示器屏幕分辨率Другими словами, это виртуальная единица длины, которая является единицей длины цифрового изображения компьютерной системы.Если px необходимо преобразовать в физическую длину, необходимо указать точность DPI.

em- относительная единица длины,相对于当前对象内文本的字体尺寸. Если текущий размер шрифта встроенного текста не установлен вручную, он определяется относительно размера шрифта браузера по умолчанию. Он наследует размер шрифта родительского элемента, поэтому это не фиксированное значение.

remЭто относительная единица (root em, root em), недавно добавленная CSS3.При использовании rem для установки размера шрифта для элемента это все еще относительный размер, но相对的只是 HTML 根元素.

7. Какие существуют способы импорта CSS, в чем разница между ссылкой и @import?

Есть четыре типа: встроенный (атрибут стиля на элементе), встроенный (тег стиля), внешняя ссылка (ссылка), импорт (@import) Разница между ссылкой и @import:

linkXHTML - это метка, в дополнение к загрузке CSS, вы также можете определить другие RSS и другие вопросы;@importОн относится к категории CSS,只能加载CSS.
linkПри ссылке на CSS в页面载入时同时加载;@import需要页面网页完全载入以后加载.
linkэто тег XHTML,无兼容问题;@importбыл предложен в CSS2.1,低版本的浏览器不支持.
linkПоддерживает использование Javascript для управления DOM для改变样式;а также@importне поддерживается.

8. Разница между потоковой версткой и адаптивной версткой

Схема потокаИспользуйте нефиксированные пиксели для определения веб-контента,也就是百分比布局, установив ширину поля в процентах для ввода в соответствии с шириной экрана Строка растянута, не ограничена фиксированными пикселями, а содержимое заполнено с обеих сторон.

отзывчивое развитиеИспользуйте Media Query в CSS3, чтобы указать макет веб-страницы определенного диапазона ширины, запросив ширину экрана.

Ультрамаленький экран (мобильное устройство) 768 пикселей или меньше
Устройства с маленьким экраном 768–992 пикселей
Средний экран 992px-1200px
Широкоэкранное устройство 1200 пикселей или больше

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

разница

-	Схема потока	отзывчивое развитие
метод разработки	Мобильная веб-разработка + разработка для ПК	отзывчивое развитие
Сценарии применения	Как правило, когда уже есть веб-сайт на стороне ПК, при разработке мобильного терминала вам нужно только разработать мобильный терминал отдельно.	Для некоторых недавно созданных веб-сайтов теперь требуется адаптироваться к мобильному терминалу, поэтому только один набор страниц совместим с различными терминалами.
развивать	Сильный позитив и высокая эффективность разработки	Совместимость с различными терминалами, низкая эффективность
приспособление	Подходит только для мобильных устройств, опыт на планшете относительно плохой	Может быть адаптирован к различным терминалам
эффективность	Простой код и быстрая загрузка	Код относительно сложен и медленно загружается

9. Прогрессивное улучшение и изящная деградация

Ключевое различие заключается в том, на чем они сосредоточены, и в различиях в рабочем процессе, которые создает это различие.

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

разница:

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

10. Несколько способов и отличий скрытых элементов CSS

display:none

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

visibility:hidden

а такжеdisplay:noneРазница в том, что元素在页面消失后，其占据的空间依旧会保留着, так что只会导致浏览器重绘без перестановки.
Не удается запустить событие click
Он подходит для сценариев, когда вы не хотите, чтобы макет страницы менялся после того, как элемент скрыт.

opacity:0

После установки прозрачности элемента на 0 элемент также скрыт в глазах наших пользователей, что является методом скрытия элемента.
а такжеvisibility:hiddenОбщим моментом является то, что элемент все еще занимает место после того, как он был скрыт, но все мы знаем, что после установки прозрачности на 0 элемент просто невидим, и он все еще существует на странице.
Может вызвать событие клика

Установите для свойств блочной модели, таких как высота и ширина, значение 0.

Проще говоря, элементmargin,border,padding,heightа такжеwidthАтрибуты, влияющие на блочную модель элемента, установлены на0, если у элемента есть дочерние элементы или контент, он также должен установитьoverflow:hiddenЧтобы скрыть его подэлементы, это своего рода уловка.
Если для элемента заданы такие атрибуты, как граница и отступы, отличные от 0, очевидно, элемент все еще можно увидеть на странице, и нет проблем с инициированием события щелчка элемента. Если все свойства установлены на 0, очевидно, что элемент эквивалентен исчезновению, то есть событие щелчка не может быть вызвано.
Этот метод непрактичен, и могут возникнуть некоторые проблемы. Но некоторые эффекты страницы, которые мы обычно используем, могут быть выполнены таким образом, например анимация jquery slideUp, которая заключается в том, чтобы установить свойство overflow: hidden, а затем непрерывно устанавливать высоту элемента и верхнее поле через таймер. border-top, border-bottom, padding-top, padding-bottom равны 0, чтобы добиться эффекта slideUp.

Другие методы мозгового отверстия

Установите положение элемента и левое, верхнее, нижнее, правое и т. д. и переместите элемент за пределы экрана.
Набор элементов и положение z-индекса, z-индекс установлен как можно меньше отрицательного

11. Как убрать пробел внизу картинки

Блокировка изображения — без выравнивания по базовой линии:img { display: block; }
Выровняйте нижнюю линию изображения:img { vertical-align: bottom; }
Высота строки достаточно мала — базовая позиция смещена вверх:.box { line-height: 0; }

12. Разница между «nth-child» и «nth-of-type»

«Nth-Child» выбран из дочерних элементов родительского элемента. Этот подэлемент не указывает точный тип, при выполнении двух условий может возникнуть эффект: один элемент должен Положение «NTH-of-Type» выбрана из дочерних элементов родительского элемента, и этот подэлемент является указанным типом.Ссылаться на

13. Какие цветовые системы есть в CSS?

Ссылаться на

14. Принцип разделения по ширине при гибкой компоновке CSS

Так называемый принцип «разделения по ширине» означает, что атрибут ширины в CSS не сосуществует с атрибутами отступов/границы (иногда включая отступы), которые влияют на ширину, ширина занимает слой меток независимо, а отступы, границы и поля используйте текучесть для внутренней адаптации.

Пример: на границе элемента имеется пустое пространство шириной 20 пикселей.

.father { width:102px; }
.son {
    border:1px solid;
    padding:20px;
}

15. !важная проблема

вне!important: max-width будет покрывать ширину, и это покрытие является суперпокрытием, более чем!importantвес еще выше

Превышение максимума: минимальная ширина переопределяет максимальную ширину, это правило возникает, когда минимальная ширина и максимальная ширина конфликтуют следующим образом:

.container{
    min-width:1400px;
    max-width:1200px;
}

16. Разверните и сверните анимацию любого элемента высоты

Использование реализации height + overflow:hidden будет более тупым. Хороший способ - использоватьmax-height.

.element{
    max-height:0;
    overflow:hidden;
    transition: height .25s;
}
.element.active {
    max-height: 666px; /* 一个足够大的最大高度值 */
}

17. Псевдоэлемент методов генерации изображений на основе контента.

Требование: ставить изображение перед загрузкойaltпредставлена информация.

Реализация: фото нетsrc,следовательно,::beforeа также::afterможет вступить в силу, мы можем пройтиcontentАтрибут отображает значение атрибута alt.

img::after{
    /* 生成 alt 信息 */
    content: attr(alt);
    /* 尺寸和定位 */
    postion:absolute; bottom: 0;
    width:100%;
    background-color:rgba(0,0,0,.5);
    transform: translateY(100%);
    transition: transform .2s;
}
img:hover::after{
    transform: translateY(0);
}

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

18. Легко превращайте изображение при наведении в другое изображение.

img:hover{
    content: url(laugh-tear.png);
}

Содержимое меняется только визуальное представление Когда мы сохраняем изображение с помощью правой кнопки мыши или других форм, изображение, соответствующее исходному src, по-прежнему сохраняется. Этот метод также можно использовать на логотипе официального сайта.

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

19. Особенности атрибута контента

Текст, который мы генерируем с содержимым, нельзя выделить или скопировать, как если бы было установлено объявление user-select:none, в то время как текст обычных элементов может быть легко выделен. Текст, сгенерированный контентом, не может быть прочитан устройствами для чтения с экрана и не может быть просканирован поисковыми системами. Поэтому не используйте атрибут контента для претенциозного создания важной текстовой информации, потому что это неблагоприятно для доступности и SEO. Атрибуты могут использоваться только для создания некоторого незначительного контента, такого как декоративная графика или серийные номера; также не беспокойтесь, что исходная важная текстовая информация будет заменена контентом, будет заменен только визуальный слой.

Невозможно получить динамически сгенерированное значение содержимого. content — очень мощное свойство CSS, и одной из его сильных сторон является встречный эффект, который может автоматически накапливать значения. Такие как:

.total::after{
    content: counter(icecream);
}

Пример:jsrun.net/6VyKp

20. Разрыв строки контента и эффект точечной загрузки

正在加载中<dot>...</dot>

dot {
    display: inline-block; 
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}

dot::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}

онлайн демо

21. Применение маржи:авто

Правила заполнения для margin:auto:

Если одна сторона фиксирована, а одна сторона имеет значение auto, то auto — это размер оставшегося пространства.
Если обе стороны автоматические, разделите оставшееся пространство поровну

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

Используйте режим записи для изменения направления потока документа

.father{ height200px; writing-mode:vertical-lr; } .son{ height:100px; margin:auto; } ```

Margin:auto центрируется при абсолютном позиционировании

.father{ width:300px; height150px; position: relative; } .son{ position:absolute; top:0; right:0; bottom:0; left:0; width:200px; height:100px; margin:auto; } ```

Онлайн эффект:demo.cssworld.cn/4/3-5.php

22. Ключевые слова, поддерживаемые border-width

тонкий: тонкий, эквивалентный 1px
средний: (значение по умолчанию) равномерная толщина, эквивалентная 3 пикселям
толстый: толстый, эквивалентный 4px

23.border-color и color

Цвет Border-Color по умолчанию — это значение цвета, то есть, когда значение цвета Border-Color не указано, расчетное значение COLOR текущего элемента используется в качестве цвета края, например:

.box{
    border: 10px solid;
    color: red;
}

На данный момент элемент .box цвета границы 10px красный.

(Постоянно обновляется)

Подпишитесь на официальный аккаунт и получайте последние статьи как можно скорее. Если это вам немного поможет, вы можете ставить лайки, лайкать и собирать, а также можете наградить автора небольшой суммой, чтобы побудить автора писать больше и более качественные статьи.