[Рекомендуемая коллекция] Все непонятные моменты CSS здесь

CSS
[Рекомендуемая коллекция] Все непонятные моменты CSS здесь

предисловие

Все должны знать CSS, но ситуация у всех разная, особенно пенсионеры, которые работают несколько лет (здесь имеется в виду наша компания) не знают многие геймплей CSS, может быть, они привыкли использовать компоненты, Однако неизбежно спросить вопросы во время интервью, поэтому я собрал резюме наиболее неясных моментов CSS и написал эту статью. В конце у меня также будет несколько вопросов, связанных с CSS, которые часто задают на собеседованиях. После прочтения полного текста интервью , не паникуйте 😗.

каталог 👇

❝

Онлайн скромный, если вы считаете, что эта статья полезна для вас, пожалуйста, поставьте лайк 👻

❞

Три характеристики

: три основные характеристики CSS являются наиболее важными частями CSS. Можно сказать, что если вы поймете эти три характеристики, вы сможете понять половину CSS. Что касается атрибутов, то это всего лишь вопрос запоминания, и это является ключом к пониманию.

  • Каскадность: принцип, принятый конфликтами стилей CSS (последний переопределяет первый)
  • Наследование: для некоторых стилей атрибутов будет естественное наследование.
  • Priority: алгоритм приоритета селектора

Селектор

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

тип

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

  • базовый селектор
    • имя класса:.box
    • Этикетка:div
    • Атрибуты:input[type="eamil"] | a[href*="http://www.beige.world"]
    • ID: #box
  • Селектор псевдокласса
    • Структурный псевдокласс::nth-child(n) | :nth-of-type(n) | :hover
    • Псевдоэлемент:::before | ::after
  • Селектор комбинации
    • соседский братA + B
    • общий братA ~ B
    • дочерний селекторA > B
    • селектор потомковA B
базовый селектор

Забудьте, давайте поговорим о селекторах атрибутов🤔, я до сих пор использую этот селектор в разработке проектов

Просто посмотрите на пример:

/* 匹配包含title属性的a标签 => <a title> */
a[title] {color: purple;}  


/* 存在href属性并且属性值为"http://beige.world"的<a>标签*/
/*  <a href="http://beige.world"> */ 
a[href="http://beige.world"] {color: green;}


/* 存在href属性并且属性值包含"baidu"的<a>标签*/
 /*  
  <a href="https://baidu.com/we"> 
  <a href="https://fanyi.baidu.com/we"> 
  <a href="https://pan.baidu.com/we"> 
 */ 
a[href*="baidu"] {font-size: 20px;}


/* 存在id属性并且属性值结尾是"-wrapper"的<div>标签 */
 /*  
  <div id="btn-wrapper">
  <div id="menu-wrapper">
  <div id="pic-wrapper">
 */ 
div[id$="-wrapper"] {display: flex;}


/* 存在class属性并且属性值包含以空格分隔的"logo"的<div>元素 */
 /*  
  <div id="aaa logo">
  <div id="bbb logo">
 */ 
 div[class~="logo"] { padding: 2px; }
Селектор псевдокласса

Структурный псевдокласс

Давайте поговорим о сходстве между двумя сравнениями:nth-child(n) | nth-of-type(n)

结构

<ul>
  <li>1</li>
  <li>
    <p>a1</p>
    <div>b1</div>
    <p>a2</p>
    <div>b2</div>
  </li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

CSS

// 第一个li  =>  <li>1</li>
ul li:first-child { background-color: lightseagreen;} 
 // 最后一个li =>  <li>5</li>
ul li:last-child { background-color: lightcoral;}
// 第三个li => <li>3</li>
ul li:nth-child(3) { background-color: aqua; } 
// 第二个li下的第一个div(不是div标签的都不算) => <div>b1</div>
ul li:nth-child(2) > div:nth-of-type(1) {background-color: red}

разница между ними

  • nth-childВыберите первые дочерние элементы в родительском элементе, независимо от типа
  • nth-of-typeвыбирает элемент указанного типа

Давайте поговорим оnth-child()Формула в скобках является изюминкой этого селектора.

Примечание ⚠: По сути, выбираются первые несколько подэлементов.

  • n может быть числом, ключевым словом, формулой
  • n Если это число, то это первое выбранное число
  • Общие ключевые словаevenчетное,oddнечетное число
  • Общие формулы следующие (если n - формула, она начинается с 0)
  • Но 0-й элемент или большее количество элементов будут проигнорированы.

Формулы здесь обычно не слишком сложны. Позвольте мне поговорить о моих навыках: Nth-Child (3n + 3); где n можно рассматривать как группу, и 3 можно рассматривать как группу, выбранную первые несколько.

Пример: nth-child(5n + 3): 5 — это группа, выберите третью в группе. Для знака «-» это означает, что выбор является предыдущим.

Селектор комбинации

Объединение селекторов — это, по сути, объединение двух селекторов через коннекторы.

  • дочерний селекторA > B
  • селектор потомковA B

Я не буду говорить о двух вышеперечисленных, я думаю, что все использовали их плохо. В основном говорить о следующих двух.

  • соседский братA + B
  • общий братA ~ B

结构

<div class="box1">
    <div>One</div>
    <div>Two!</div>
    <div>Three</div>
    <p>pppp</p>
  </div>
  <div class="box2">
    <div>One2</div>
    <p>pppp1</p>
    <div>Two2!</div>
    <p>pppp2</p>
  </div>

选择器解析

<style>
    /*
      (+标识)符介于两个选择器之间，当第二个选择器匹配的元素紧跟着第一个元素后面并且它们都是同一个父亲
      .box1 div:first-of-type(A元素)
      div(B元素) 
      匹配紧跟着A的B
    */
    .box1 div:first-of-type+div { color: red; }

    .box1 div:first-of-type+p { color: red;}  筛选不到的


    /*
      (~标识)符介于两个选择器之间，匹配第一个选择器元素后面所有匹配第二个选择器的同层级元素
      .box2 div(A元素)
      p(B元素)
      匹配所有A后面的B
    */
    .box2 div~p { color: seagreen; }
  </style>

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

Можно использовать комбинированные селекторы: псевдоклассы hover манипулируют своими собственными подэлементами и другими элементами. Например

<div id='a'>元素1
  <div id='b'>元素2</div>
</div>
<div id='c'>元素3
  <div id='b'>元素2</div>
</div>
<div>同级元素1</div>
<div>同级元素2</div>
<div>同级元素3</div>
</body>

#a:hover > #b{....}    
#a:hover ~ div{....} // 鼠标停留在a元素的时候让所有同层级元素有某某样式
// 防止选择器层级替换了下面的样式
#a:hover + #c{....} // 鼠标停留在a元素的时候让同层级中的c元素有某某样式
#a:hover + #c > #b{....} //  鼠标停留在a元素的时候让同层级中的c元素下的b元素有某某样式

Вышеуказанные два селектора следует использовать при создании некоторых страниц со специальными эффектами.

Комплексный пример

效果

结构

<body>
  <div class="img-box enter-box"> <!-- 悬浮在这个盒子的时候动态添加enter-box类名 -->
    <img src="http://resource.beige.world/imgs/beige.jpg" alt="">
    <div class="cover">
      <h3>标题名称</h3>
      <p class="con">Bei Ge</p>
      <p class="brier">这里放内容简介，内容简介,这里放内容简介，内容简介,这里放内容简介，内容简介</p>
      <div class="handle"><span>.</span><span>.</span><span>.</span></div>
    </div>
  </div>
  <!-- 其他盒子 -->
  <div class="img-box">2</div> 
  <div class="img-box">3</div>
  <div class="img-box">4</div>
  <div class="img-box">5</div>
</body>

样式

стиль макета

<style>
     .img-box {
      position: relative;
      top: 100px;
      left: 200px;
      z-index: 1;
      display: inline-block;
      overflow: hidden;
      background: #70adc4;
      cursor: pointer;
      transition: transform .5s, box-shadow .3s;
    }

    .img-box img {
      width: 200px;
      height: 200px;
      opacity: 1;
      float: left;
    }
	
	.img-box .cover {
      width: 200px;
      height: 200px;
      padding: 15px;
      position: absolute;
      box-sizing: border-box;
      color: hotpink;
    }

    .img-box .cover h3 {
      margin-top: 10%;
      font-size: 24px;
      font-weight: bold;
      text-shadow: 0 0 2px #ccc;
      opacity: 0;
      transition: opacity .5s;
    }

    .img-box .cover .con {
      margin: 20px 0;
      font-style: italic;
      font-weight: bold;
      transform: translateX(-150%);
    }

    .img-box .cover .brier {
      font-size: 12px;
      transform: translateX(150%);
    }

    .img-box .cover .handle {
      position: absolute;
      right: 10px;
      bottom: -50px;
      font-size: 25px;
      transition: bottom 1s;
      /* 对于position的过渡动画, 不能用position, 直接用位置属性: left right top bottom */
    }
  </style>

определяет анимацию анимации

@keyframes textAnimation {
      /* 0% {
        transform: translateX(150%);
      } */
      100% {
        transform: translateX(0);
      }
}

Плавающий в поле, чтобы установить стиль

.img-box:hover {
	transform: scale(1.1);
	box-shadow: 2px 2px 13px 3px #ccc;
}

.img-box:hover img {
	opacity: .5;
}

.img-box:hover .cover h3 {
 	opacity: 1;
}

.img-box:hover p {
	animation: textAnimation .6s ease-out forwards;
	/* forwards让动画停留在最后一帧 */
}

.img-box:hover .cover .handle {
  	bottom: 5px;
}

.enter-box:hover ~ .img-box {
  background-color: transparent;
  color: wheat;
}
.enter-box:hover + .img-box {
  color: red;
}

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

  • flex (гибкая компоновка)
  • transform: translate3D rodate3D
  • анимация (установить анимацию)
  • 3D или перспектива

Здесь нам нужно обратить внимание на точки внимания при использовании псевдокласса Hover и попытаться написать все селекторы при его использовании для воздействия на дочерние элементы. пример:

Смотрите под эффектом 😗

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

Структура относительно проста

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

<div class="box flex">
    <div class="center flex">
      <div class="inner"></div>
    </div>
</div>

мы использовали:hoverСделайте поле красным, когда мышь плавает

.box:hover div {
	background-color: red;
}

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

Развернуть для просмотра 
 因为CSS选择器的优先级！

Когда мы его реализуем, мы обычно пишем его примерно так: В это время при использовании селекторов псевдокласса для изменения стиля элементов мы должны обращать внимание на приоритет селекторов.

.box .center {
      width: 150px;
      height: 150px;
      background-color: blueviolet;
}
.box .center .inner {
      width: 100px;
      height: 100px;
      background-color: coral;
}

Приоритет этого кода.box .centerвысоко, поэтому он может только прикрыть его.

.box:hover div { 
      background-color: red;
}

Я считаю, что если многие из нас пишут мышью, чтобы навести курсор на большую коробку, самое внутреннееinnerКогда коробка изменит цвет, она будет писать так:

.box:hover .inner { 
      background-color: red;
}

это полезно? Бесполезный!

Примечание ⚠: Приоритет по-прежнему отсутствует.box .center .innerвысоко.

каскадный

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

  • в общем:
    • Конфликт стилей, принцип, которому нужно следовать,Принцип близости.Тот стиль близок к структуре, и тот стиль исполнен.
    • Стили не конфликтуют и не каскадируются
CSS层叠性最后的执行口诀：  长江后浪推前浪，前浪死在沙滩上。

наследование

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

CSS继承性口诀：  龙生龙，凤生凤，老鼠生的孩子会打洞

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

Примечание. При наследовании CSS не только сыновья могут наследовать, пока потомки могут наследовать

Наследуемые свойства

контроль наследования

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

четыре свойства

  • inherit: примененное свойство наследует свойство родителя (это значение по умолчанию).
  • initialИнициализировать, инициализировать свойство приложения его стилем по умолчанию и устранить вмешательство наследования (свойства, которые будут наследоваться по умолчанию, не наследуются по умолчанию, но показывают стиль по умолчанию, когда нет настройки)
  • unset: означает восстановить исходное наследование. правильноcolorсвойств, это эквивалентноinherit; и для таких вещей, какborderТаким образом, свойства, которые не наследуются по умолчанию, эквивалентныinitial.
  • revert: эффект эквивалентенunsetИ поддержка браузера ограничена, здесь нет демонстрации

效果图

演示

<ul style="color: green;">
    <li class="default">Default <a href="#">link</a> color</li>
    <li class="inherit">Inherit the <a style="color: inherit;" href="#">link</a> color</li>
    <li class="initial">Reset the <a style="color: initial;" href="#">link</a> color</li>
    <li class="unset">Unset the <a style="color: unset;" href="#">link</a> color</li>
</ul>
  • Тег a по умолчанию не записывается, по умолчаниюinheritатрибут, но используется предустановленная таблица стилей браузера: можно понять, что браузер помогает нам<a>Напишите стиль, его приоритет, естественно, выше, чем у его родительского элемента.
  • Тег a в inherit пишет inherit в строке, поэтому он использует значение цвета своего родительского (или дедушкиного) элемента, который здесь зеленый;
  • Тег a в Initial использует начальное значение атрибута цвета (черный). Будьте осторожны, чтобы не перепутать начальное значение атрибута с указанным значением таблицы стилей браузера. Таблица предустановок стилей — это стиль, написанный заранее в браузере, но значение моего цвета по умолчанию — черный.
  • unset, что означает восстановление исходного метода наследования. Для свойства цвета это эквивалентно наследованию; для таких свойств, как граница, которые не наследуются по умолчанию, оно эквивалентно начальному.

Если нам нужно контролировать наследование всех атрибутов элемента, используйте атрибут all

.inherit a {
	all: initial; 
	/* 将所有的属性都恢复成默认值(天生继承也不再继承) */
    /* 行内设置过的除外：你的层级干不过人家 */
}
Унаследованный вес равен 0

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

(1) Если он выбран, то для расчета веса используется приведенная выше формула. Кто слушает. (2) Если он не выбран, то вес равен 0, потому что унаследованный вес равен 0.

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

приоритет

Если вы хотите понять приоритеты, вы должны понимать селекторы, но селекторов много. Те, что перечислены выше, больше используются в повседневной разработке. Вы можете не использовать другие в своей жизни. Разместите их здесь.Селектор для C1~C4, и заинтересованные студенты могут взглянуть.

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

  • Если селекторы совпадают, выполняется каскадирование (последнее переопределяет первое)
  • Если селекторы разные, возникнет проблема с приоритетом.

Формула расчета веса

Что касается весов CSS, нам нужен набор формул для расчета, этоCSS Specificity(особенность)

Селектор тегов Формула расчетного веса
Наследовать или * 0,0,0,0
на элемент (селектор тегов) 0,0,0,1
Каждый класс, структурный псевдокласс (например: hover), селектор атрибутов [type="number"] 0,0,1,0
каждый идентификатор 0,1,0,0
Каждый встроенный стиль style="" 1,0,0,0
h1 + p::first-line 0,0,0,3
li > a[href*="beige.world"] > .inline-warning 0,0,2,2
каждый !важный важный ∞ бесконечность

Значение слева направо, наибольшее слева, один уровень больше одного уровня, между цифрами нет системы, и уровни не могут быть превышены.

Общая нотация селектора:

  • Встроенный: 1,0,0,0
  • #id: 0,1,0,0
  • .class | :hover | :nth-child(): 0,0,1,0 (двоеточие вроде :hover называется структурным псевдоклассом)
  • ::after | ::before | ::first-line: 0,0,0,1 (Такого рода двоеточие называется псевдоэлементом, хотя двоеточие при записи можно поставить, но браузер все равно его заполняет для вас, что по сути является двойным двоеточием)

укладка веса

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

Это простой расчет сложения

  • div ul li ------> 0,0,0,3
  • .nav ul li ------> 0,0,1,2
  • а: наведите курсор ------> 0,0,1,1
  • .nav a ------> 0,0,1,1

Примечание⚠: Между цифрами нет основания, например: 0,0,0,5 + 0,0,0,5 = 0,0,0,10 вместо 0,0, 1, 0, поэтому будет нет 10 Элемент div может догнать селектор класса.

важно применяет приоритет💡

#id .box div {
    color: red !important;
}

#id div.box div {
    color: green !important; // 使用这个选择器中的颜色
}

Ответить на вопросы

Вот несколько вопросов, все правильные будут считаться пройденными 😗

<style type="text/css">
  .c1 .c2 div{  
    color: blue;
  }
  div #box3 {  
    color:green;
  }
  #box1 div { 
    color:yellow;
  }
</style>
</head>
<body>
<div id="box1" class="c1">
  <div id="box2" class="c2">
    <div id="box3" class="c3">
      文字
    </div>
  </div>
</div>
</body>

какой цвет??

Развернуть, чтобы увидеть ответ 
 yellow 上面两选择器的层级都是一样的, 后者覆盖前者 

<style type="text/css">
  #father #son{ 
    color:blue;
  }
  #father p.c2{ 
    color:black;
  }
  div.c1 p.c2{  
    color:red;
  }
  #father{
    color:green !important;
  }
</style>
</head>
<body>
<div id="father" class="c1">
  <p id="son" class="c2">
    试问这行字体是什么颜色的？
  </p>
</div>
</body>
Развернуть, чтобы увидеть ответ 
 blue 

<body>
  <style>
    div.parent {
      width: 300px;
      height: 300px;
      border: 10px solid #000;
      font-size: 46px;
      text-shadow: 3px 13px 4px green;
      box-sizing: border-box
    }
    div.child {
      width: 200px;
      height: 200px;
      background-color: brown;
      border: 5px solid #000;
      width: inherit;
      box-sizing: inherit;
      font-size: 80px;
    }
  </style>
</head>
  <div class="parent">
    <div id="child" class="child">123</div>
  </div>

  <!-- 
    child: 字体多大? 有没有文字阴影? 真实内容的宽高是多少?
   -->
</body>
Развернуть, чтобы увидеть ответ 
 字体：80，有文字阴影，真实内容的宽：290px 高190px

поговорим об этом последнем вопросе

Текстовая тень: поскольку она унаследована от родительского элемента, шрифт: 80px;

Реальный контент имеет ширину 290 пикселей и высоту 190 пикселей.

Часто задаваемые атрибуты

  • flex (гибкая компоновка)
  • transform: translate3D rodate3D
  • анимация (установить анимацию)
  • 3D или перспектива

flex

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

Родительские общие свойства

  • flex-direction: установить направление главной оси
  • justify-content: установить расположение дочерних элементов на главной оси
  • flex-wrap: установить, будут ли дочерние элементы переноситься
  • align-content: установить расположение дочерних элементов на боковой оси (несколько строк)
  • align-items: Установите расположение дочерних элементов на боковой оси (одна строка)
  • flex-flow: составное свойство, эквивалентное установке как flex-direction, так и flex-wrap

flex-direction

Во флекс-макете он делится на два направления: основная ось и боковая ось, те же названия: строка и столбец, ось х и ось у.

  • Направление главной оси по умолчанию — это направление оси X, горизонтально вправо.
  • Направление боковой оси по умолчанию — это направление оси Y, горизонтально вниз

<img src="./imgs/13.JPG">

: Основная ось и боковая ось будут меняться в зависимости от того, кто является основной осью, заданной flex-direction, а остальные — боковой осью. И наши дочерние элементы расположены с главной осью

flex-wrap устанавливает, следует ли обернуть

  • По умолчанию предметы расположены на линии (линия GRID »). Определен свойством Flex-Wrap, планировка Flex не обернет линии по умолчанию.
  • nowrap не сворачивает
  • обернуть

justify-content устанавливает расположение дочерних элементов на главной оси

<img src="./imgs/14.jpg">

визуализация

: поговорим об этом здесьspace-aroundа такжеspace-evenly

  • space-round: расстояние между элементами в 2 раза больше, чем расстояние между левым и правым элементами в контейнере.

  • пространственно-равномерно: расстояние между двумя сторонами элемента равно расстоянию между элементом и контейнером с обеих сторон, что эквивалентно удалению ширины элемента и расстояния между контейнером и элементом с обеих сторон, и оставшаяся ширина равномерно распределяется как левое и правое поле элемента.

** Установите расположение дочерних элементов на боковой оси: align-items (одна строка)/align-content (многострочный) **

Можно написать выше设置多行Его можно использовать только в том случае, если подэлемент имеет новую строку (несколько строк) и не действует в одной строке.

Эффект такой же как и выше, но направление изменено.Выше расположение элементов на главной оси.Это на стороне.Что касается того,будет ли боковая ось осью Y или нет,это зависит от вас .flex-direcitonкак это устроено

Общие свойства ребенка

  • flex (составное свойство): По умолчанию: flex: 0 1 auto;
    • flex-grow
    • flex-shrink
    • flex-basis
  • align-self: управлять расположением дочерних элементов на боковой оси.
  • порядок: определяет порядок расположения подэлементов (до и после), 0 — первый

flex-grow

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

Предполагая, что первый элемент по умолчанию равен 0, второй элемент имеет flex-grow: 2, а последний элемент равен 1, второй элемент будет занимать в два раза больше места, чем последний элемент при увеличении.

Это можно понять так:

  • flex: 1 => я возьму часть оставшегося места
  • flex: 2 => я возьму два оставшихся места
  • flex: 3 => я возьму три оставшихся места
假设三个盒子分别都设置了上面的属性: 那就将剩余空间分成6份, 各占自己的份数

假设前两个没有设置, 就最后一个设置了flex: 3 === flex: 1, 那就将剩余空间都给它

flex-shrink

По умолчанию используется значение 1, которое используется для определения того, будет ли элемент уменьшаться при недостатке места.Все элементы по умолчанию равны 1, то есть, когда места недостаточно, все будут уменьшаться вместе в равных пропорциях; обратите внимание, что даже если установлена ​​фиксированная ширина, она будет уменьшаться. Но если для элемента flex-shrink установлено значение 0, он не будет сжиматься, даже если места недостаточно.

Flex-shrink второго элемента на изображении выше равен 0, поэтому он не будет уменьшаться сам по себе.

flex-basis

Авто по умолчанию используется для установки ширины элемента.Когда используется авто по умолчанию, элемент будет поддерживать ширину по умолчанию или использовать ширину как собственную ширину, но если установлено flex-basis, вес будет выше, чем атрибут ширины, поэтому он переопределит атрибут widtn.

На приведенном выше рисунке сначала задается свойство flex-basis, а затем задается свойство width, но ширина по-прежнему основывается на свойстве flex-basis.

Примечание⚠: Если в контейнере несколько блоков и ширина равна 100 %, это повлияет на flex-basis, как показано ниже.

Решение состоит в том, чтобы настроитьflex-basisКогда ширина, лучше всего установить егоflex-shrink0 без масштабирования

transform

Считается, что 2D-атрибуты используются всеми.Эта статья посвящена 3D-атрибутам преобразования.

  • перспектива:perspctive
  • 3D-рендеринг:transfrom-style
  • 3D-смещение:translate3d(x, y, z)
  • 3D вращение:rotate3d(x, y, z)

перспектива

Прежде чем говорить о 3D, давайте сначала разберемся с перспективой (расстоянием обзора).Только понимая перспективу, мы можем понять, что 3D-объекты проецируются на 2D-плоскость.

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

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

Делайте снимки, чтобы говорить 👇

  • d: расстояние просмотра, которое относится к расстоянию от человеческого глаза до экрана.
  • z: это ось z, чем больше ось z (положительное значение), тем больше объект, который мы видим

Приходите к каштану 🌰

给实例的父元素设置: perspective: 200px;

Выше мы устанавливаем на родительский блок divperspective, то есть с точки зрения 3D-изображения расстояние между нашими человеческими глазами и экраном div равно 200. Translation3D устанавливает ось Z для перемещения div вперед на 100. Чем меньше расстояние просмотра, тем меньше расстояние между нашими глазами, поэтому div, который вы видите, также станет больше. (Подумайте о ком-то, кто видит на расстоянии 500 метров, и о ком-то, кто видит на расстоянии 5 метров.)

translate3d(x, y, z)

3D-функции

  • почти большой далеко маленький
  • Окклюзия объекта и лица не видна

3D система координат

  • ось x: горизонтально вправо --Примечание. Положительные значения находятся справа от оси X, а отрицательные значения — слева.
  • ось Y: вертикально вниз -Примечание. Положительные значения находятся ниже оси Y, а отрицательные значения — выше.
  • ось z: вертикальный экран --Примечание. Положительные значения находятся снаружи, а отрицательные — внутри.

3Dвизуализировать в стиле трансформации

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

  • transform-style: flatПредставляет, что дочерний элемент не включен3DСтереопространство, по умолчанию
  • transform-style: preserve-3dПодэлементы открывают трехмерное пространство

визуализация

body {
  perspective: 500px;
}

.box {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 100px auto;
  transition: all 2s;
  /* 让子元素保持3d立体空间环境 */
  transform-style: preserve-3d;
}

.box:hover {
  transform: rotateY(60deg);
}

.box div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: pink;
}

.box div:last-child {
  background-color: purple;
  transform: rotateX(60deg);
}

rotate3d(x, y, z)

Трехмерное вращение относится к вращению элемента вдоль оси x, оси y, оси z или пользовательской оси в трехмерной плоскости.

  • transform: rotate3d(x, y, z, 45deg)` -- повернуть на 45 градусов вдоль пользовательской оси как угол

пример:

<ul>
	<li>
		<div class="box">
		<div class="front">公众号:</div>
		<div class="bottom">前端自学驿站</div>
		</div>
	</li>
</ul>

ul li {
	float: left;
	margin: 0 5px;
	width: 120px;
	height: 35px;
	list-style: none;
	/* 一会我们需要给box 旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */
	perspective: 500px;
}

.box {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: all .4s;
}

.box:hover {
	transform: rotateX(90deg);
}

.front,
.bottom {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.front {
	background-color: pink;
	z-index: 1;
	transform: translateZ(17.5px);
}

.bottom {
	background-color: purple;
	/* 这个x轴一定是负值 */
	/* 我们如果有移动 或者其他样式，必须先写我们的移动 */
	transform: translateY(17.5px) rotateX(-90deg);
}

animation

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

последовательность анимации

0% — начало анимации, 100% — завершение анимации, такое правило — последовательность анимации

  • Указание стиля CSS в @keyframs создает эффект анимации, который постепенно меняет текущий стиль на новый.
  • Анимация — это эффект постепенного изменения элемента из одного стиля в другой, изменение любого количества стилей столько раз, сколько вы хотите.
  • Используйте проценты, чтобы указать, когда происходят изменения, или используйтеfromа такжеto, эквивалентно 0% и 100%
@keyframes move{
	0% {
		transform: translate(0px)
	}
	form {
		transform: translate(0px)
	}
	
	100% {
		transform: translate(500px, 0)
	}
	to {
		transform: translate(500px, 0)
	}
}

Общие свойства анимации

стенография анимации

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

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

CSS реализует сканирование QR-кода

Эффект

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

адрес:GitHub.com/IT-Elegy/Первоначально…

Часто задаваемые вопросы об интервью

связанные с BFC

BFC (контекст форматирования блока) буквально переводится как «контекст форматирования на уровне блока».

Прежде чем говорить о BFC, мы должны сначала поговорить о значении атрибута display.Только оно квалифицировано для запуска механизма BFC, если оно соответствует условиям.

display属性值

Эти значения атрибутов будут иметь условие BFC

Не все шаблоны элементов могут генерировать BFC, спецификацию w3c: элементы с атрибутом отображения блока, элемента списка, таблицы будут генерировать BFC.

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

Этот BFC имеет определенные характеристики компоновки:

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

При каких обстоятельствах элемент может генерировать BFC

Вышеупомянутые ящики имеют условия BFC, то есть они квалифицированы, но как запустить BFC для создания этой закрытой среды?

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

Аналогично, BFC может быть вызвано путем добавления следующих свойств в эти элементы.

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

Характеристики элементов БТЭ

Особенности правила компоновки BFC:

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

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

白话文： 孩子在家里愿意怎么折腾都行，但是出了家门口，你就的乖乖的，不能影响外面的任何人。

Основные виды использования BFC

(1) Очистить поплавок внутри элемента

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

В основном используется

计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

(2) Решить проблему слияния полей (свернуть)

В основном используется

盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

Поля двух соседних блоков, принадлежащих одному и тому же sBFC, будут перекрываться, поэтому, если мы создадим BFC, который не принадлежит одному и тому же sBFC, перекрытия полей не произойдет.

(3) Подготовка задачи адаптивного правого ящика

В основном используется

普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文

Резюме BFC

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

связанные с IFC

IFC (inline Formatting Context) называется "построчное форматирование вверх-вниз". По сравнению с BFC оно относительно простое и не вызывает много вопросов. Здесь лучше разобраться.

Правила оформления следующие:

  • Внутренние блоки будут размещены один за другим в горизонтальном направлении (по умолчанию IFC);
  • Высота IFC определяется высотой самого высокого блока внутри (содержимое внутри будет растягивать родительский блок);
  • Когда одной строки недостаточно, он автоматически переключается на следующую строку;

Какие свойства обеспечивают ускорение производительности

Что такое аппаратное ускорение: оно заключается в том, чтобы передать процесс рендеринга браузера графическому процессору (графическому процессору) вместо использования встроенного более медленного рендерера. Это сделаетanimationа такжеtransitionболее гладкий

Мы можем включить аппаратное ускорение с помощью CSS в браузере, чтобы обеспечить работу графического процессора и повысить производительность.

Так называемый GPU, аббревиатура графического процессора, эквивалент графической карты ПК. Телефонный графический процессор также для графики, обработки изображений и существования так называемого обязательного рендеринга, это hwa (аппаратное ускорение аппаратной нагрузки), что означает, что его существование заключается в разделении нагрузки на процессор, принцип заключается в том, чтобы графический процессор для обработки графического программного обеспечения уменьшал нагрузка на ЦП. Так что приложение может быть обработано быстрее, скорость для достижения цели.

Принцип аппаратного ускорения

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

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

  • 3D или CSS-преобразования
  • <video>а также<canvas>Этикетка
  • css filters(滤镜效果)
  • Когда элемент перезаписывается, например, при использовании атрибута z-index

Почему аппаратное ускорение делает страницы более плавными

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

Почему трансформация не вызывает перерисовку?

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

Как включить аппаратное ускорение с помощью CSS

CSS-анимация, преобразования и переходы не включают ускорение графического процессора автоматически, а выполняются медленным программным движком рендеринга браузера. Как мы можем переключиться в режим графического процессора? Многие браузеры предоставляют определенные правила запуска CSS.

Он включается, когда браузер обнаруживает, что к элементу DOM на странице применяются определенные правила CSS.Наиболее заметной характеристикой элемента является трехмерное изменение.

.cube{
    translate3d(250px,250px,250px);
    rotate3d(250px,250px,250px,-120deg)
    scale3d(0.5,0.5,0.5);
}

Возможно, в некоторых случаях нам не нужно применять эффекты 3D-трансформации к элементам, так что же нам делать?На данный момент мы можем использовать «обманку» браузера, чтобы включить аппаратное ускорение. Хотя мы можем не захотеть применять 3D-преобразования к элементам, мы все же можем включить 3D-движок. Например, мы можем использоватьtransform:translateZ(0); чтобы включить аппаратное ускорение

.cube{
   transform: translateZ(0);
}

напиши в конце

Если есть часть статьи, которая написана не очень хорошо или имеет проблемы, вы можете указать на нее, и я продолжу исправлять ее в следующих статьях. Я также надеюсь, что смогу расти вместе с вами по мере моего прогресса. Друзья, которым нравятся мои статьи, также могут обратить внимание

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

Справочная статья

Управление наследованием CSS: наследовать, инициализировать и отменить

Статья для понимания гибкой верстки

Прошлые статьи

[Внешняя система] Расскажите о понимании EventLoop из вопроса на собеседовании.(Обновлен анализ четырех дополнительных вопросов)

[Фронтальная система] Построить многоэтажку с фундамента

[Фронтальная система] Сценарий приложения регулярного в разработке — это не просто проверка правил

«Практические сценарии функционального программирования | Технические документы по самородкам — специальный двойной раздел»

Категории