给自己时间，不要焦急，一步一步来，一日一日过，
请相信生命的韧性是惊人的，跟自己向上的心去合作，不要放弃对自己的爱护。
Отображение и скрытие элементов
дисплей дисплей
После использования дисплея для скрытия исходная позиция больше не сохраняется, и позже она будет перезаписана обычным потоком документов.
display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。
видимость видимость
В отличие от скрытия отображения, при скрытии видимости элемент по-прежнему сохраняет исходное положение.
visibility：visible ;  对象可视
visibility：hidden;   对象隐藏
переполнение
Это волшебное слово ха😄, оно используется во многих местах, и ранее упомянутый клиринговый поплавок тоже использует переполнение
| значение атрибута | описывать |
|---|---|
| visible | Не обрезает содержимое и не добавляет полосы прокрутки |
| hidden | Не отображать содержимое, превышающее размер объекта, и скрывать лишнее |
| scroll | Всегда показывать полосу прокрутки независимо от содержимого |
| auto | Если полоса прокрутки превышена, полоса прокрутки будет отображаться автоматически, а если полоса прокрутки не превышена, полоса прокрутки не будет отображаться. |
Комплексное использование
Адрес основного кода на github
HTML-раздел
很重要的思想转换，一定要记得)
CSS стили пользовательского интерфейса
курсор в виде мыши
| значение атрибута | описывать |
|---|---|
| default | Сяобай по умолчанию |
| pointer | крошечная рука |
| move | переехать |
| text | текст |
| not-allowed | запретить |
контур
Обычно наш самый прямой способ написания: план: нет, отменить план.
<input type="text" style="outline: none;"/>
Запретить перетаскивание текстового поля
При использовании макета текстового поля, если вы не установите какие-либо атрибуты, пользователь возражает против изменения размера текстового поля, что повлияет на общий макет страницы. В настоящее время мы должны обратить внимание на: В реальной разработке правый нижний угол нашего текстового поля нельзя перетаскивать ❗
<textarea style="resize: none;"></textarea>
вертикальное выравнивание вертикальное выравнивание
вертикальное выравнивание не влияет на выравнивание содержимого в элементах блочного уровня, оно применяется только к行内元素или行内块元素
В частности, встроенные блочные элементы,Обычно используется для управления выравниванием изображений/форм и текста..
vertical-align : baseline |top |middle |bottom
Порядок выравнивания: базовая линия, верхняя линия, средняя линия, нижняя линия.
Переполнение текстового многоточия
Задает или извлекает, следует ли использовать маркер многоточия (...) для обозначения переполнения текста внутри объекта
text-overflow : clip ；不显示省略标记（...），而是简单的裁切
text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）
white-space Устанавливает или извлекает способ отображения текста в объекте. Обычно мы используем его, чтобы заставить строку отображать контент.
white-space:normal ；默认处理方式
white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
трилогия с многоточием
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
Технология спрайтов CSS (спрайт)很重要
Зачем нужна технология спрайтов
👇Картинка представляет собой принципиальную схему запроса веб-страницы. Когда пользователь посещает веб-сайт, ему необходимо отправить запрос на сервер. Каждое изображение на веб-странице должно пройти через запрос, прежде чем оно может быть показано пользователю, но
一个网页中往往会应用很多小的背景图作为修饰，当网页中的图像过多，服务器就会频繁的接收和发送请求，会降低页面的加载速度
Особенности: эффективное сокращение количества запросов, которые сервер получает и отправляет, а также повышение скорости загрузки страниц.
Объяснение технологии мастера
Изображение спрайта CSS фактически интегрирует некоторые фоновые изображения на веб-странице в большое изображение, поэтому, когда пользователь получает доступ к странице, ему нужно только отправить запрос на сервер, и все фоновые изображения на веб-странице могут быть отображены. .
Технология CSS, которую необходимо использовать: свойства background-image, background-repeat, background-position для позиционирования фона.
Основное резюме использования технологии эльфов
- Точно измерьте размер и положение каждого маленького фонового изображения.
- При назначении небольшого фонового изображения блоку позиционирование фона в основном отрицательное.
Три механизма компоновки CSS
нормальный поток
Элементы уровня блока будут находиться на отдельной строке,从上向下заказ;
- 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
Строчные элементы будут в порядке,从左到右Расположите по порядку и автоматически переносите линию, когда она касается края родительского элемента;
- 常用元素：span、a、i、em等
плавать
浮动最主要的价值是可以让多个块级元素在同一行内展示出来。
Плавающий элемент означает, что элемент с установленным плавающим атрибутом будет
- из-под контроля стандартных обычных потоков
- Переместитесь в указанное место.
селектор { float: значение свойства; }
| значение атрибута | описывать |
|---|---|
| none | Элементы не плавают(По умолчанию) |
| left | ЭлементОсталосьплавать |
| right | элемент кправильноплавать |
Мы используем числа с плавающей запятой для основной цели — отображать несколько блоков блочного уровня в одной строке. Это также наш самый распространенный макет
Полная веб-страница завершается стандартным потоком + плавающим + позиционированием.
Плавающее значение влияет только на текущую или последующую стандартную последовательность операций и не влияет на предыдущую стандартную последовательность операций.Каждая стандартная последовательность операций занимает отдельную строку.
如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，避免引起其他的问题哈。
Давайте рассмотрим следующие ситуации:
Следующая структура div такая же:
<div>
<div class="a"></div>
<div class="b"></div>
</div>
Когда поле a является плавающим, и поле b также является плавающим, поля a и b будут отображаться в одной строке. Когда блок a не является плавающим, а блок b плавающим, блок a представляет собой стандартный поток документов, который очень властный.Он будет занимать отдельную строку, поэтому блок b будет следовать за блоком a в качестве ссылки, и поле b будет плавать.
очистить поплавок
Почему мы очищаем поплавки ❓
父级盒子很多情况下，不方便给高度, но подбокс не занимает позицию, если он плавает,注意哦，浮动的盒子不占位置。Наконец, высота родительского поля равна 0, что влияет на стандартное поле потока ниже, а стандартное поле потока ниже будет охватывать содержимое, изначально предназначенное для отображения.
- Суммировать:
- Поскольку плавающий элемент больше не занимает положение исходного потока документов, он повлияет на макет следующих элементов.
- Если быть точным, это не очистка поплавка, а
清除浮动后造成的影响。
Основная цель очистки плавающего элемента — решить проблему, заключающуюся в том, что внутренняя высота родительского элемента равна 0 из-за плавающего элемента дочернего элемента. После очистки плавающего элемента родительский элемент автоматически определит высоту на основе плавающего дочернего блока. Когда родитель имеет высоту, это не повлияет на стандартный поток ниже.
Как очистить поплавки
Как показано на рисунке ниже, если для навигационного блока родительского элемента не задана высота, а дочерние элементы настроены как плавающие, это приведет к тому, что дочерний элемент будет плавать вне нормального потока документа. Высота родительского элемента: 0, что позже повлияет на нормальный поток документов, так что это когда мы очистим поплавок.
以下👇所示的四种清除浮动的方式，均以此案例为参照
注意此处说的浮动元素是指浮动的最后一个元素哈
W3C рекомендует добавлять пустой тег, такой как
, в конце плавающего элемента.
Вы можете добавить к родителю: переполнение скрыто | авто | прокрутка может быть достигнута.
Обычно мы добавляем: overflow: hidden после стиля родительского элемента.
Недостатки: когда содержимое увеличивается, его легко скрыть без автоматического переноса строк, а элементы, которые должны быть переполнены, не могут быть отображены.
3. Используйте псевдоэлемент after, чтобы очистить поплавок
Хотя этот метод имеет немного больше кода, он не изменит структуру html.
:after相当于在结构后用css添加了一个新的标签。
/*声明清除浮动的样式 */
.clearfix:after{
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix{
*zoom:1; /* ie6，7专门清除浮动的样式*/
}
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
Позиционирование и свертывание (решение для сворачивания)
Ранее мы упоминали, что когда значение поля устанавливается для дочернего элемента внутри родительского элемента, родительский элемент также может измениться, то есть слияние полей обычно называют схлопыванием, но绝对定位和浮动不会触发外边距合并👇:
что такое коллапс
为什么会出现塌陷呢，只有父子元素会出现塌陷吗，下面会进行详细的讲解，很重要的，一定要掌握理解，只有了解了原因才会自然的想起他的解决方式。
Причина: В стандартном документообороте появится вертикальное поленаложениеФеномен (горизонтальное направление не рухнет), два поля находятся рядом друг с другом, а посередине нет границ или отступов.Когда два поля находятся в непосредственном контакте, происходит слияние, то есть поля сливаются , и большее поле будет закрывать меньшее.Между двумя прямоугольниками в вертикальном направлении есть только одно большее поле, что является явлением схлопывания полей.
Свернутые объекты
- Ящик Братства
- коробка отношений отца и сына
Свернуть решение
Вот краткое изложение семи решений.Вы должны выбрать подходящее решение в соответствии с требованиями проекта.
Детальное позиционирование
Синтаксис: позиционирование = режим позиционирования + смещение края
смещение края
В CSS черезtop,bottom,leftа такжеrightАтрибут определяет смещение края элемента, проще говоря, это существительное в четырех направлениях вверх, вниз, влево и вправо😀
| Свойства смещения кромки | Пример | описывать |
|---|---|---|
top |
top: 80px |
верхСмещение, определяющее элемент относительно его родительского элемента.расстояние от верхней линии. |
bottom |
bottom: 80px |
НижнийСмещение, определяющее элемент относительно его родительского элемента.Расстояние нижней линии. |
left |
left: 80px |
осталосьСмещение, определяющее элемент относительно его родительского элемента.расстояние от левой линии. |
right |
right: 80px |
ВерноСмещение, определяющее элемент относительно его родительского элемента.расстояние по правой линии |
Позиционированные блоки имеют ценность только в том случае, если у них есть смещения краев. В общем, там, где есть позиционирование, должно быть и смещение края.
режим позиционирования
В CSS режим позиционирования элемента определяется атрибутом position, который является классификацией позиционирования.很重要的需要掌握的
选择器 { position: 属性值; }
Существуют разные категории режимов позиционирования, и в разных ситуациях мы используем разные режимы позиционирования.
| стоимость | семантика |
|---|---|
static |
статическийтаргетинг (по умолчанию) |
relative |
относительнопозиция |
absolute |
абсолютныйпозиция |
fixed |
фиксированныйпозиция |
Относительное позиционирование (относительное)很重要
Относительное позиционирование — это перемещение элемента относительно его исходного положения в стандартном потоке.
相对定位的特性：
- Перемещено относительно исходного положения в стандартном потоке.
- Позиционированный блок продолжает занимать исходную область в стандартном потоке, а последний блок по-прежнему обрабатывает его так же, как и стандартный поток.
Абсолютное позиционирование (абсолютное)很重要
Абсолютное позиционирование — это когда элемент перемещается с позиционированным родителем.
绝对定位的特性：
- Не занимает места вообще
- Позиционирование основано на ближайшем позиционированном (абсолютном, фиксированном или относительном) родительском элементе.
- Если родительский элемент не позиционирован, он позиционируется в соответствии со стандартом браузера.
Как показано на рисунке 👇, родительский элемент имеет режим относительного позиционирования, а для дочернего элемента установлено абсолютное позиционирование, при этом дочерний блок будет располагаться с левым верхним углом родителя в качестве стандартной точки.
Как показано на рисунке ниже, когда родительский элемент не позиционирован, установите абсолютное позиционирование для дочернего элемента, и дочерний блок будет позиционироваться в соответствии с документом, то есть браузером.注意这里的父级元素不仅指子元素的上一级父亲元素，会一级一级元素的向上找，如果父亲元素的上一级有定位，就以爷爷元素为准进行定位。
总结一下：将元素依据最近的已经定位（绝对、固定或者相对定位）的父元素进行定位。
Фиксированное позиционирование (фиксированное)很重要
Фиксированное позиционирование — это особая форма абсолютного позиционирования.
固定定位的特性：
- Нет места вообще
- Он распознает только видимое окно браузера, не имеет ничего общего с родительским элементом и не прокручивает полосу прокрутки.
Абсолютно позиционированное поле по центру
Абсолютно позиционированные блоки не могут быть центрированы по горизонтали с margin:0 auto.
Вот простая формула расчета для центрирования абсолютно позиционированного блока по горизонтали.Сначала мы сдвинем блок влево на 50%.В это время мы обнаружим, что положение перемещения слишком велико, а длина блока нормальная, поэтому нам нужно вычесть его Половина длины поля, вы можете установить margin-left на отрицательное число, отрицательное значение равно половине ширины поля.
Абсолютно позиционированный бокс по вертикали и по центру по горизонталиhin重要
👆Вышеизложенное в основном представляет собой подробное объяснение абсолютного позиционирования и горизонтального центрирования.Далее мы подробно объясним вертикальное и горизонтальное центрирование абсолютного позиционирования и центрирование других положений с помощью изображения:
Давайте сначала посмотрим на это изображение. Вся черная рамка представляет собой большой прямоугольник длиной 800 пикселей и высотой 400 пикселей. Блок в примере имеет ширину 200 пикселей и высоту 100 пикселей. Верхний и нижний блоки расположены по центру по горизонтали, а левое и правое поле центрируются по вертикали и горизонтали.Принцип тот же.
重点来啦, мы обычно используем центрирование по вертикали и горизонтали.После установки абсолютного позиционирования бокса, установите: слева: 50%, сверху: 50%, тогда вы обнаружите, что бокс смещен на половину ширины вправо от среднего положения . Смещение снизу больше половины высоты, поэтому его нужно вычесть. Задайте поле поля: -50px -100px, конкретный пример кода выглядит следующим образом👇: