Практические навыки "мира css"

Ресурсы изображений Icon CSS

Весь контент ниже взят из «CSS World» Чжан Синьсюй.

«Мир CSS» - это книга, посвященная написанию CSS. Книга не включает в себя знания CSS3, но многие вещи, которые он показывает, - это то, что я никогда не знал и не обратил внимания раньше. Это книга, которая может расширить свои горизонты, и я рекомендую эту книгу всем, работающим на переднем конце.

Ниже приведены некоторые из новых, но практических советов по компоновке, которые я задокументировал, читая эту книгу.

max-width

  1. Вес серии max очень велик, даже превышает !important. Окончательная ширина следующего кода p составляет 150 пикселей.
p {
  width: 200px !important;
  max-width: 150px;
}
  1. когдаmin-widthа такжеmax-widthПри конфликте размеров будет использоваться принцип максимума, то есть тот, кто больше, получает значение. Окончательная ширина следующего кода составляет 1400 пикселей.
.container {
  min-width: 1400px;
  max-width: 1200px;
}
  1. Когда мы добиваемся эффекта постепенного увеличения высоты элемента, но не знаем конкретную высоту элемента, мы можем использоватьmax-heightПуть. Нам не нужно задавать конкретное значение высоты для достижения этого эффекта. Конечно, это приведет к тому, что высота элемента достигнет фактической высоты, но анимация еще не закончена. Будет ощущение задержки анимации.
.element {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s;
}
.element.active {
  max-height: 666px; /* 一个足够大的最大高度值 */
}

content attr

похожий наimgальт.

.icon:before {
  content: attr(data-title);
}

отступы и поля

Мы часто сталкиваемся с таким эффектом трехсторонней переноски, мы можем воспользоваться помощьюbackground-clipа такжеpaddingдобиться этого эффекта. Фотографии не требуются.

.icon-menu {
  display: inline-block;
  width: 140px;
  height: 10px;
  padding: 35px 0;
  border-top: 10px solid;
  border-bottom: 10px solid;
  background-color: currentColor;
  background-clip: content-box;
}

Когда мы хотим добиться эффекта выравнивания по концу, мы устанавливаем каждый списокmargin-rightзатем удалить последнийmargin-right. Чтобы добиться такого эффекта, вам нужно использовать новый селектор css3, а иногда и js, или напрямую использоватьflexмакет. Но мы привыкли к родителямmarginОтрицательные значения могут быть легко достигнуты.

ul {
  margin-right: -20px;
}
ul > li {
  float: left;
  width: 100px;
  margin-right: 20px;
}

border

  1. Потому что под ie6 пунктирная линия настройки границы показывает точки. Таким образом, с помощью этого метода можно получить круг под ie6.
.box {
  width: 150px;
  height: 150px;
  /* 超出区域隐藏，只显示一个圆 */
  overflow: hidden;
}
.dotted {
  width: 100%;
  height: 100%;
  border: 149px dotted #cd0000;
}

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

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

div {
  width: 0;
  border: 10px solid;
  border-color: #f30 transparent transparent;
}

ex

ex — игнорируемая единица измерения расстояния, представляющая высоту строчной буквы x (x из x, y, z). — относительная единица, связанная с размером шрифта родительского элемента.

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

.icon-arrow {
  display: inline-block;
  width: 20px;
  height: 1ex;
  background: url(xxx.png) no-repeat center;
}

vertical-align

Вы можете использовать вертикальное выравнивание для достижения горизонтального и вертикального центрирования, этот метод позиционирования не требует знания ширины и высоты центрирующего элемента, совместимого с ie6

Моделирование ниже представляет собой полноэкранный диалог. Ядром этого метода центрирования является родительский элементtext-aglin:center, при записи родственного элемента центрированного элемента даетdisplay: inline-block;height: 100%;vertical-align: middle;Три свойства, устанавливаемые сами по себеdisplay: inline-block; vertical-align: middle;

<div id="container">
  <div id="dialog">....</div>//要居中的元素
  <div id="assist"></div>
</div>

#container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5), none;
  text-align: center;
  white-space: nowrap;
  font-size: 0;
  z-index: 99;
}
#dialog {
  display: inline-block;
  vertical-align: middle;
}
#assist {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

BFC

знал раньшеoverflow:hiddenМетод запуска BFC, на самом деле, может запускать BFC следующим образом.

  • <html>корневой элемент;
  • Значение float не равно none;
  • Значение переполнения — auto, scroll или hidden;
  • Значение display может быть любым из table-cell, table-caption и inline-block;
  • Значение position не является относительным и статическим.

overflow

  1. полоса прокруткиhtmlВсе сгенерированные страницы, которые хотят предотвратить появление полосы прокрутки, не нужно тянутьbodyсобрать вместеoverflow:hidden,

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

html {
  overflow-y: scroll; /* for IE8 */
}
:root {
  overflow-y: auto;
  overflow-x: hidden;
}
:root body {
  position: absolute;
}
body {
  width: 100vw;
  overflow: hidden;
}

absolute

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

Компоновка без зависимостей, т. е. без использования традиционного способа определения отношения родитель-потомок. Не используйтеleftа такжеtopУправление, использование поля или преобразование для управления позицией.

.icon-warn {
  position: absolute;
  margin-left: -20px;
  width: 20px;
  height: 20px;
  background: url(warn.png) no-repeat center;
}
  1. Absolute работает с text-align для достижения горизонтального центрирования.

код показывает, как показано ниже

<p > <img src="1.jpg" > </p > 

p {
  text-align: center;
}
img {
  position: absolute;
  margin-left: ...;
}

Хотя на положение изображения в этом примере действительно влияет свойство text-align, оно не имеет прямого отношения к элементам text-align и absolute. эффект. Изменение позиции здесь, по сути, является результатом комбинированного эффекта «призрачного пустого узла» и «абсолютного позиционирования без зависимости».


«Призрачный пустой узел» — очень важное понятие во встроенной блочной модели, в частности, оно относится к: в объявлении документа HTML5 , весь синтаксический анализ и рендеринг встроенных элементов ведут себя так, как если бы перед каждым линейным блоком был «пустой узел». Этот "Пустой узел" всегда прозрачен, не занимает никакой ширины, не виден и не может быть получен скриптом, как призрак, Но он существует и ведет себя как текстовый узел, поэтому я называю его «призрачным пустым узлом».


Конечно, нам нужно знать ширину встроенного элемента.margin-leftЗначение с отрицательной общей шириной. с родительским элементомposition:relativeЗатем найдите настройки элементаleft:50%метод аналогичен. Но проблем с иерархией не будет.


2. абсолютное и переполнение Следующие суждения делаются о том, будут ли абсолютно позиционированные элементы затронуты переполнением.

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

Согласно вышеизложенному. независимыйabsoluteне будет отцовскимoverflowобрезанный.

Примечание: из-за преобразований в различных браузерахoverflowПоддержка не та, поэтому, когда элемент все еще обрезается, попробуйте выяснить, не является ли онtransformпричина


3. Абсолютная и жидкостная адаптация

Когда абсолютно позиционированный элемент позиционируется относительно своей ориентации, этот элемент имеет плавное свойство, подобное потоку документа, например:

.box {
position: absolute;
left: 0; right: 0;
}

Когда абсолютно позиционированный элемент имеет следующие настройки, он может охватывать весь браузер. Обратите внимание, что его высота ширины является «отформатированной шириной/высотой», какwidth:100%полностью отличается. датьmarginТакже не выходит за пределы экрана.

.box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

В соответствии с вышеизложенным можно использоватьmargin:autoДля достижения эффекта горизонтального центрирования, если нетleft: 0; right: 0;Свойства, возбуждающие свойства жидкости, не имеют такого центрирующего эффекта. конечно хочу использоватьmargin:auto autoНевозможно добиться вертикального и горизонтального центрирования. Ведь в стандартном документообороте такого эффекта нет.

код показывает, как показано ниже

.element {
  width: 300px;
  height: 200px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

fixed

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

<div class="father" > 
    <div class="son" > </div > 
</div >

.father {
  width: 300px;
  height: 200px;
  position: relative;
}
.son {
  width: 40px;
  height: 40px;
  position: fixed;
  margin-left: -40px;
}

Нельзя использовать как абсолютное позиционирование без зависимостейleftи другие свойства позиционирования.

Получить ширину полосы прокрутки

Следующий код может получить ширину полосы прокрутки и избежать смещения страницы после отключения полосы прокрутки.

//显示
var widthBar = 17,
  root = document.documentElement;
if (typeof window.innerWidth == "number") {
  widthBar = window.innerWidth - root.clientWidth;
}
root.style.overflow = "hidden";
root.style.borderRight = widthBar + "px solid transparent";
//隐藏
var root = document.documentElement;
root.style.overflow = "";
root.style.borderRight = "";

z-index

z-indexПолезно только для позиционированных элементов в css2, но добавлено в css3flexслужба поддержки

font-size

Этот эффект также может бытьvertical-alignа такжеfont-sizeвыполнить.

p {
  font-size: 16px;
  line-height: 1.5;
}
p > img {
  vertical-align: -25%;
  vertical-align: 0.6ex；;
}

дочерний элементvertical-alignИспользование процентов может решить проблему центрирования значков и текста, и на него не влияет размер шрифта, но на него влияет высота строки. Если это ex, то это не только возможно, но и не зависит от высоты строки.

text-decoration

под китайскимtext-decorationВозможно наложение на слова в следующей строке. В настоящее время мы используем границу в качестве подчеркивания. Не устанавливайте цвет границы, по умолчанию он будет того же цвета, что и шрифт.

Показать и скрыть

использоватьvisibilityИ абсолютное позиционирование, чтобы скрыть и не занимать позицию. Или прозрачность плюс абсолютное позиционирование

.hidden {
  position: absolute;
  visibility: hidden;
}

.opacity {
  position: absolute;
  opacity: 0;
  filter: Alpha(opacity=0);
}

Небольшие различия между видимостью и отображением

visibilityдочерние элементы будут скрыты, но если установленоvisibility:visibleпоявится, ноdisplay:noneэлементы не имеют такого эффекта.


Это навыки, которым я научился, читая «Мир CSS». Пожалуйста, прочтите оригинальную книгу для получения дополнительной информации.



Цитировать:"мир CSS"

Категории