1 Введение в CSS
CSS — это аббревиатура каскадных таблиц стилей.
CSS также является языком разметки, который в основном используется для установки текстового содержимого (шрифт, размер, выравнивание и т. д.), формы изображения (ширина и высота, стиль границы,
поля и т. д.) на страницах HTML, а также макета и внешний вид, стиль отображения страницы. .
Для получения дополнительной информации о CSS см. MDN: нажмите, чтобы отправить.
1.1 Спецификации синтаксиса CSS
Все стили включены в
<head>
<style>
h4 {
color: blue;
font-size: 100px;
}
</style>
</head>
1.2 Три основные особенности CSS
CSS имеет три очень важные характеристики: каскадность, наследование и приоритет.
1.2.1 Штабелируемость
Если один и тот же селектор устанавливает один и тот же стиль, один стиль перезапишет (каскадирует) другой конфликтующий стиль. Каскадирование в основном решает
проблему конфликта стилей.Принцип
каскадирования:
- Конфликты стилей происходят по принципу близости: тот стиль, который ближе к структуре, будет исполнен.
- Стили не конфликтуют и не перекрываются.
1.2.2 Наследование
Наследование в CSS: дочерние теги наследуют некоторые стили родительского тега, например цвет текста и размер шрифта.
Правильное использование наследования может упростить код и снизить сложность стилей CSS.Дочерние
элементы могут наследовать стили родительских элементов (текстовые, шрифтовые, строковые элементы в начале этих элементов могут наследоваться, а также атрибут цвета )
- наследование высоты строки
body {
font:12px/1.5 Microsoft YaHei；
}
- Высота строки может соответствовать или не соответствовать единице измерения.
- Если дочерний элемент не задает высоту строки, он унаследует высоту строки родительского элемента, которая равна 1,5.
- В настоящее время высота строки дочернего элемента равна: размер текста текущего дочернего элемента * 1,5.
- body line height 1.5 Самым большим преимуществом этого способа написания является то, что внутренние подэлементы могут автоматически регулировать высоту строки в соответствии с собственным размером текста.
1.2.3 Приоритет
Если для одного и того же элемента указано несколько селекторов, будет создан приоритет.
Если селекторы одинаковые, будет выполнено каскадирование, если селекторы разные, то селекторы будут выполняться на основе веса селектора.
- Вес состоит из 4 групп цифр, но переноса не будет.
- Можно понять, что селектор класса всегда больше селектора элемента, селектор id всегда больше селектора класса и так далее...
- Оценка уровня производится слева направо. Если значение определенной цифры одинаковое, оценивается значение следующей цифры.
- Простая мнемоника: подстановочный знак и вес наследования — 0, селектор тегов — 1, селектор класса (псевдокласса) — 10, селектор идентификатора — 100, встроенная таблица стилей — 1000
, !important — бесконечность. - Унаследованный вес равен 0. Если элемент не выбран напрямую, независимо от того, насколько велик вес родительского элемента, дочерний элемент получит вес 0.
Перекрытие веса: если это составной селектор, вес будет перекрываться, и его необходимо рассчитать.
- div ul li ------> 0,0,0,3
- .nav ul li ------> 0,0,1,2
- a:hover -----—> 0,0,1,1
- .nav a ------> 0,0,1,1
2 CSS-селектора
Селекторы делятся на две основные категории 基础选择器: и复合选择器
2.1 Базовые селекторы
Базовый селектор состоит из одного селектора, в том числе: селектора метки, селектора класса, селектора идентификатора и селектора с подстановочными знаками.
2.1.1 Селектор тегов
Селектор тегов (селектор элементов) подразумевает использование имен тегов HTML в качестве селекторов, их классификацию в соответствии с именами тегов и указание единого
стиля CSS для определенного типа тегов на странице.
标签名{
属性1: 属性值1;
属性2: 属性值2;
...
}
Селектор тегов может выбирать все теги определенного типа, например все <div>теги и все <span>теги.
Преимущества: позволяет быстро и единообразно задавать стили для однотипных меток на странице.
Недостатки: невозможно создавать разные стили, можно только выбрать все текущие теги.
2.1.2 Селектор класса
Если вы хотите дифференциально выбрать разные теги или выбрать один или несколько тегов по отдельности, вы можете использовать селектор классов. Селектор классов представлен атрибутом class в HTML. В CSS селектор классов отображается с точкой "." .
.类名 {
属性1: 属性值1;
...
}
В атрибуте класса метки можно записать несколько имен классов, причем несколько имен классов должны быть разделены пробелами.
2.1.3 селектор идентификатора
Селектор идентификатора может указать определенный стиль для элементов HTML, отмеченных определенным идентификатором.
Элемент HTML использует атрибут id для установки селектора id, а селектор id в CSS определяется знаком «#».
#id名 {
属性1: 属性值1;
...
}
Примечание. Атрибут id может появляться только один раз в каждом HTML-документе.
2.1.4 Выбор подстановочного знака
В CSS селектор подстановочных знаков определяется знаком «*», что означает, что выбраны все элементы (теги) на странице.
* {
属性1: 属性值1;
...
}
2.1.5 Краткое описание основных селекторов
2.2 Составной селектор
Обычно используемые составные селекторы включают: селекторы-потомки, подселекторы, селекторы-объединения, селекторы псевдоклассов и т. д.
2.2.1 Селекторы потомков
Селектор-потомок, также известный как содержащий селектор, может выбирать дочерние элементы внутри родительского элемента. Чтобы написать это, нужно написать внешнюю метку спереди и внутреннюю метку сзади
, разделяя их пробелами. Когда теги вложены, внутренний тег становится потомком внешнего тега.
元素1 元素2 { 样式声明 }
- Элемент 1 и элемент 2 разделены пробелом.
- Элемент 1 является родительским, элемент 2 — дочерним, и в конечном итоге выбирается элемент 2.
- Элемент 2 может быть сыном, внуком и т. д., если он является потомком элемента 1.
- Элемент 1 и элемент 2 могут быть любым базовым селектором.
2.2.2 Подселектор
Селекторы дочерних элементов (дочерние селекторы) могут выбирать только те элементы, которые являются самым последним дочерним элементом элемента. Простое понимание состоит в том, чтобы выбрать элемент сына.
元素1 > 元素2 { 样式声明 }
- Элемент 1 и элемент 2 разделены знаком «больше».
- Элемент 1 является родительским, элемент 2 — дочерним, и в конечном итоге выбирается элемент 2.
- Элемент 2 должен быть биологическим сыном, а его внуки и правнуки ему неподвластны.Его также можно назвать биологическим селектором сына.
2.2.3 Селектор объединения
Селектор объединения состоит из селекторов, соединенных английскими запятыми (,). Как часть селектора объединения можно использовать любую форму селектора.
元素1,元素2 { 样式声明 }
2.2.4 Селектор псевдокласса
Селекторы псевдоклассов используются для добавления специальных эффектов к определенным селекторам, например добавления специальных эффектов к ссылкам или выбора 1-го или n-го элемента.
Самая большая особенность написания селекторов псевдоклассов заключается в том, что они обозначаются двоеточиями (:), например :hover и :first-child.
2.2.4.1 Селектор псевдокласса ссылки
- Для обеспечения эффективности укажите: link-:visited-:hover-:active в порядке LVHA.
- Поскольку ссылка имеет стиль по умолчанию в браузере, нам необходимо указать отдельный стиль для ссылки в реальной работе.
/* a 是标签选择器 所有的链接 */
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
2.2.4.2 :селектор псевдокласса focus
Селектор псевдокласса :focus используется для выбора элемента формы, на котором находится фокус.
Фокусом является курсор, который обычно можно <input>получить с помощью элементов формы, поэтому этот селектор в основном ориентирован на элементы формы.
input:focus {
background-color:yellow;
}
2.2.5 Краткое описание составных селекторов
3 свойства шрифта CSS
Свойства CSS Fonts используются для определения семейства шрифтов, размера, веса и стиля текста (например, курсива).
3.1 Семейство шрифтов
CSS использует свойство font-family для определения семейства шрифтов текста.
p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
Наиболее распространенные шрифты: body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }
3.2 Размер шрифта
CSS использует свойство font-size для определения размера шрифта.
p {
font-size: 20px;
}
По умолчанию разные браузеры могут отображать разные размеры шрифта. Размер текста по умолчанию в Google Chrome составляет 16 пикселей.
3.3 Вес шрифта
CSS использует свойство font-weight для установки веса текстовых шрифтов.
p {
font-weight: bold;
}
3.4 Стиль текста
CSS использует свойство font-style для стилизации текста.
p {
font-style: normal;
}
3.5 Составные свойства шрифта
body {
font: font-style font-weight font-size/line-height font-family;
}
При использовании атрибута шрифта его необходимо записывать в указанном выше синтаксическом формате. Порядок не может быть изменен, каждый атрибут отделяется пробелом.
Атрибуты, которые не нужно устанавливать, можно опустить (примите значение по умолчанию). value), но атрибуты Font-size и Font-Family должны быть сохранены, иначе атрибут Font не будет иметь никакого эффекта.
3.6 Обзор атрибутов шрифта
4 текстовых атрибута
Свойство CSS Text определяет внешний вид текста, например цвет текста, выравнивание текста, оформление текста, отступ текста, межстрочный интервал и т. д.
4.1 Цвет текста
Атрибут цвета используется для определения цвета текста.
div {
color: red;
}
4.2 Выравнивание текста
Атрибут text-align используется для установки горизонтального выравнивания текстового содержимого внутри элемента.
div {
text-align: center;
}
4.3 Оформление текста
Атрибут text-decoration определяет украшения, добавляемые к тексту. В текст можно добавить подчеркивание, зачеркивание, надчеркивание и т. д.
div {
text-decoration：underline；
}
4.4 Отступы текста
Атрибут text-indent используется для указания отступа первой строки текста, обычно первой строки абзаца.
div {
text-indent: 10px;
}
p {
text-indent: 2em;
}
em — относительная единица, представляющая собой размер одного текста текущего элемента (font-size).Если для текущего элемента не задан размер, то это будет
один размер текста родительского элемента.
4.5 Межстрочный интервал
Свойство line-height используется для установки расстояния между строками (высоты строки). Вы можете контролировать расстояние между строками текста.
p {
line-height: 26px;
}
4.6 Обзор текстовых атрибутов
5 методов внедрения CSS
В зависимости от места написания стилей CSS (или того, как они представлены), таблицы стилей CSS можно разделить на три основные категории:
- Встроенные таблицы стилей (встроенные)
- Внутренняя таблица стилей (встроенная)
- Внешняя таблица стилей (ссылка)
引入外部样式表：
<link rel="stylesheet" href="css文件路径">
6 режимов отображения CSS-элементов
Это может улучшить макет веб-страницы.Режим отображения элементов – это способ отображения элементов (меток). Например, они <div>занимают одну строку сами по себе, и, например, на одной строке можно разместить несколько элементов <span>.
Элементы HTML обычно делятся на два типа: блочные элементы и встроенные элементы.
6.1 Элементы блока
К общим блочным элементам относятся <h1>~<h6>, <p>, <div>, <ul>, <ol>и <li>т. д., среди которых <div>наиболее типичным блочным элементом является тег.
Характеристики блочных элементов:
① Занимают одну строку.
② Можно контролировать высоту, ширину, поля и отступы.
③ Ширина по умолчанию равна 100 % контейнера (родительской ширины).
④ Это контейнер и блок, который может содержать элементы уровня строки или блока.
Уведомление :
- Элементы уровня блока нельзя использовать внутри элементов текстового типа.
<p>Теги в основном используются для хранения текста, поэтому<p>внутри них нельзя размещать элементы уровня блока, особенно<div>- Таким же образом и
<h1>~<h6>т. д. являются всеми текстовыми тегами уровня блока, и внутри них нельзя размещать другие элементы уровня блока.
6.2 Встроенные элементы
К распространенным встроенным элементам относятся <a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>и т. д <span>. Среди них
<span>наиболее типичным встроенным элементом является тег. В некоторых местах строчные элементы также называют строчными элементами.
Характеристики строчных элементов:
① Соседние строчные элементы располагаются на одной строке, и в одной строке может отображаться более одного.
② Непосредственная настройка высоты и ширины недействительна.
③ Ширина по умолчанию — это ширина собственного контента.
④ Встроенные элементы могут содержать только текст или другие встроенные элементы.
Уведомление:
- Внутри ссылки больше нельзя размещать ссылки.
- Блочные элементы можно размещать в специальных ссылках
<a>, но<a>безопаснее всего преобразовать их в блочный режим.
6.3 Элементы встроенного блока
Во строчных элементах есть несколько специальных тегов — <img />, <input />, <td>, которые обладают характеристиками как блочных, так и строчных элементов.
В некоторых источниках их называют встроенными блочными элементами.
Характеристики элементов строчных блоков:
① На одной строке со смежными строчными элементами (строчными блоками), но между ними будет пустой промежуток. В одной строке может отображаться несколько элементов (характеристики встроенных элементов).
② Ширина по умолчанию — это ширина собственного контента (характеристики встроенных элементов).
③ Можно контролировать высоту, высоту строки, поля и отступы (характеристики элемента на уровне блока).
6.4 Обзор режимов отображения элементов
6.5 Преобразование режима отображения элемента
В особых случаях требуется преобразование режима элемента.Простое понимание: элементам одного режима нужны характеристики другого режима
, например, желание увеличить <a>диапазон срабатывания ссылки.
- Преобразовать в блочный элемент: display:block;
- Преобразовать во встроенный элемент: display:inline;
- Преобразование во встроенный блок: display: inline-block;
7 CSS-фон
В свойствах фона можно установить цвет фона, фоновое изображение, мозаику фона, положение фонового изображения, фиксацию фонового изображения и т. д.
7.1 Цвет фона
Свойство background-color определяет цвет фона элемента.
background-color:颜色值;
Обычно значение цвета фона элемента по умолчанию прозрачное.Вы также можете вручную указать цвет фона как прозрачный.
background-color:transparent;
7.2 Фоновое изображение
Атрибут фонового изображения описывает фоновое изображение элемента. В реальной разработке обычно используются логотипы или небольшие декоративные картинки или
фоновые изображения большого размера.Преимущество в том, что очень легко контролировать положение.(Спрайты также являются сценарием использования)
background-image : none | url (url)
Примечание . Не забудьте добавить URL-адрес к адресу за фоновым изображением и не добавляйте кавычки к пути внутри.
7.3 Мозаика фона
Если вам нужно расположить фоновое изображение на HTML-странице плиткой, вы можете использовать атрибут background-repeat.
background-repeat: repeat | no-repeat | repeat-x | repeat-y
7.4 Расположение фонового изображения
Используйте свойство background-position, чтобы изменить положение изображения на заднем плане.
background-position: x y;
- Параметр является существительным с направлением.
Если два указанных значения являются существительными с направлением, порядок двух значений не имеет к этому никакого отношения. Например, left top и top left имеют одинаковый эффект
. Если только одно указано существительное направления, а другое значение опущено, второе значение будет использоваться по умолчанию. - Параметр – точная единица измерения.
Если значение параметра – точная координата, то первой должна быть координата x, а второй — координата y
. Если указано только одно значение, то значение должно быть координатой x. координата, а другая по умолчанию центрирована по вертикали. - Параметр — смешанная единица измерения.
Если два указанных значения представляют собой смесь точных единиц и азимутальных существительных, первое значение — это координата x, а второе значение — координата y.
7.5 Фиксация фонового изображения (прикрепление фона)
Свойство background-attachment определяет, является ли фоновое изображение фиксированным или прокручивается вместе с остальной частью страницы.
Background-attachment может позже создать эффект прокрутки параллакса.
background-attachment : scroll | fixed
7.6 Метод фонового композиционного письма
Чтобы упростить код атрибута фона, мы можем объединить эти атрибуты в один атрибут фона. Это экономит объем кода.При
использовании сокращенных атрибутов определенного порядка записи не существует.Обычно согласованный порядок следующий:
фон: цвет фона, адрес фонового изображения, фоновая плитка, фоновое изображение, прокрутка положения фонового изображения;
background: transparent url(image.jpg) repeat-y fixed top ;
7.7 Полупрозрачный фоновый цвет
CSS3 обеспечивает эффект полупрозрачного цвета фона.
background: rgba(0, 0, 0, 0.3);
- Последний параметр — альфа-прозрачность, диапазон значений от 0 до 1.
- Мы привыкли опускать 0 в 0.3 и записывать его в качестве фона: rgba(0, 0, 0, .3);
- Примечание. Прозрачность фона означает, что фон поля полупрозрачен, а содержимое внутри поля не затрагивается.
- Новые атрибуты CSS3 поддерживаются только браузерами IE9+.
7.8 Общие сведения
8-боксовая модель
Процесс верстки веб-страницы:
- Сначала подготовьте соответствующие элементы веб-страницы, которые по сути представляют собой блоки.
- Используйте CSS, чтобы установить стиль поля, а затем поместите его в соответствующую позицию.
- Наполните коробку содержимым.
Основная суть макета веб-страницы заключается в использовании CSS для размещения блоков.
Так называемая блочная модель. Элемент макета на HTML-странице рассматривается как прямоугольный блок, который является контейнером для хранения содержимого.
Боковая модель CSS — это, по сути, блок, который инкапсулирует окружающие HTML-элементы, включая границу, поля, отступы и фактическое содержимое.
8.1 Граница
border может установить границу элемента. Граница состоит из трех частей: ширина (толщина), стиль границы и цвет границы.
border : border-width || border-style || border-color
Для стиля границы border-style можно установить следующие значения:
- none: нет границы, т.е. игнорируется ширина всех границ (значение по умолчанию).
- сплошная: граница представляет собой одну сплошную линию (наиболее часто используемая).
- пунктир: граница пунктирная
- пунктир: граница представляет собой пунктирную линию.
Аббревиатура границы:
border: 1px solid red; 没有顺序
Как написать отдельные границы:
border-top: 1px solid red; /* 只设定上边框， 其余同理 */
8.1.1 Тонкие линии границ таблиц
Свойство border-collapse управляет тем, как браузер рисует границы таблицы. Он контролирует границы соседних ячеек.
border-collapse: collapse;
- коллапс: это слово означает слияние
- border-collapse: коллапс; означает, что соседние границы сливаются вместе
Граница увеличивает фактический размер коробки. Поэтому есть два решения:
- Измеряя размер коробки, не измеряйте границу.
- Если измерение включает границу, вам необходимо вычесть ширину границы из ширины/высоты.
8.1.2 Закругленная граница
В CSS3 добавлен новый стиль закругленной границы, а атрибут border-radius используется для установки закругленных углов внешней границы элемента.
border-radius:length;
- Значения параметров могут быть в виде чисел или процентов.
- Если это квадрат и вы хотите превратить его в круг, просто измените значение на половину высоты или ширины или напишите его как 50 %.
- Этот атрибут является сокращенным атрибутом, за которым могут следовать четыре значения, представляющие левый верхний угол, правый верхний угол, правый нижний угол и левый нижний угол соответственно.
- Напишите отдельно: border-top-left-radius, border-top-right-radius, border-bottom-right-radius и
border-bottom-left-radius. - Совместимость Поддержка браузера IE9+, но не повлияет на макет страницы, вы можете использовать его с уверенностью.
8.2 Заполнение
Свойство padding используется для установки отступа, то есть расстояния между границей и содержимым.
После присвоения значения заполнения полю происходят две вещи:
- Между содержимым и границей существует расстояние, и добавляется отступ.
- Отступы влияют на фактический размер поля.
Другими словами, если у блока уже есть ширина и высота, а затем в этот момент указана внутренняя граница, блок будет увеличен.
Решение.
Если вы уверены, что размер поля соответствует размеру рендеринга, просто вычтите дополнительные отступы из ширины/высоты.
8.3 Поля
Свойство поля используется для установки поля, которое контролирует расстояние между полем и рамкой.
Аббревиатура поля означает то же самое, что и дополнение.
Поля могут центрировать блоки уровня блока по горизонтали, но должны быть соблюдены два условия:
① У блока должна быть указана ширина (ширина).
② Установите для левого и правого поля поля значение «авто».
.header{ width:960px; margin:0 auto;}
Общие методы письма включают следующие три метода:
- поле слева: авто; поле справа: авто;
- маржа: автомобиль;
- маржа: 0 авто;
Примечание. Вышеупомянутый метод заключается в центрировании элементов уровня блока по горизонтали и добавлении строчных элементов или строчных блочных элементов к их родительским элементам text-align:center.
При использовании поля для определения вертикальных полей для элементов блока может произойти объединение полей.
Есть две основные ситуации:
- Объединение вертикальных полей соседних элементов блока
- Схлопывание вертикальных полей на вложенных блочных элементах
8.3.1 Объединение вертикальных полей соседних элементов блока
Когда встречаются два соседних блочных элемента (однородных), если верхний элемент имеет нижнее поле-нижний, а нижний элемент имеет верхнее поле
-верх, то вертикальное расстояние между ними не является полем-нижним. Явление принятия большего из двух значений
называется слиянием вертикальных полей соседних элементов блока.
Решение:
попробуйте добавить значение маржи только к одному ящику.
8.3.2 Схлопывание вертикальных полей на вложенных блочных элементах
Для двух блочных элементов со вложенной связью (отношения родитель-потомок) родительский элемент имеет верхнее поле, а дочерний элемент также имеет верхнее поле. В это время родительский элемент свернется с большим значением поля.
Решение:
① Вы можете определить верхнюю границу родительского элемента.
② Вы можете определить верхнее дополнение для родительского элемента.
③ Вы можете добавить переполнение: скрыто к родительскому элементу.
④ Существуют и другие методы, такие как плавающие, фиксированные и абсолютно позиционированные коробки, не возникающие проблемы с разрушением.
8.4 Четкие внутренние и внешние поля
Многие элементы веб-страницы имеют внутренние и внешние поля по умолчанию, а значения по умолчанию различаются в разных браузерах. Поэтому перед макетированием мы должны сначала очистить
внутренние и внешние поля элементов веб-страницы.
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
Примечание. Чтобы обеспечить совместимость, для строчных элементов следует устанавливать только левые и правые внутренние и внешние поля, но не устанавливать верхние и нижние внутренние и внешние поля. Но преобразование в блочные и встроенные
блочные элементы работает нормально.
9 теней
9.1 Тень коробки
Тень блока — это новая возможность в CSS3, и вы можете использовать свойство box-shadow, чтобы добавить тень к блоку.
box-shadow: h-shadow v-shadow blur spread color inset;
Уведомление:
- По умолчанию используется внешняя тень (начало), но вы не можете написать это слово, иначе тень будет недействительной.
- Тени блоков не занимают места и не влияют на другие расположения блоков.
9.2 Тень текста
В CSS3 вы можете применить тень к тексту, используя свойство text-shadow.
text-shadow: h-shadow v-shadow blur color;
10 методов компоновки
CSS предоставляет три традиционных метода компоновки (проще говоря, то, как располагаются блоки): нормальный поток (стандартный поток), плавающий и позиционирование.
10.1 Стандартный поток (обычный поток/поток документов)
Так называемый стандартный поток: метки располагаются заданным по умолчанию способом.Стандартный поток — это самый простой метод компоновки.
- Элементы уровня блока будут занимать отдельные строки, расположенные сверху вниз.
Часто используемые элементы: div, hr, p, h1~h6, ul, ol, dl, form, table. - Встроенные элементы будут расположены слева направо и будут автоматически переноситься при касании края родительского элемента.
Общие элементы: span, a, i, em и т. д.
10.2 Плавание
Свойство float используется для создания плавающего блока, перемещая его в сторону до тех пор, пока левый или правый край не коснется края содержащего блока или другого плавающего блока.
选择器 { float: 属性值; }
Элементы после добавления поплавков будут иметь множество характеристик:
- Плавающие элементы вырвутся из стандартного потока (нестандартного)
- Плавающие элементы будут отображаться в одну строку, а верхняя часть элемента будет выровнена.
- Плавающие элементы будут иметь характеристики встроенных блочных элементов.
Примечание . Плавающие элементы расположены близко друг к другу (промежутков не будет). Если родительская ширина не может вместить эти плавающие блоки, дополнительные блоки
будут выровнены по другой строке.
Плавающие элементы будут иметь свойства встроенного блочного элемента.
- Любой элемент может быть плавающим. Независимо от исходного режима элемента, добавление float будет иметь характеристики, аналогичные встроенным блочным элементам.
- Если для блока уровня блока не задана ширина, ширина по умолчанию такая же, как у родительского блока, но после добавления плавающего элемента его размер определяется на основе содержимого.
Плавающие элементы часто используются в сочетании со стандартным родительским элементом потока.Сначала родительский элемент стандартного потока используется для упорядочения верхней и нижней позиций, а затем внутренние дочерние элементы перемещаются для упорядочения левой и правой позиций.
Что следует учитывать при использовании плавающего макета
- Поплавки сопоставляются с родительскими блоками стандартных потоков.
Сначала используйте родительский элемент стандартного потока, чтобы расположить верхнюю и нижнюю позиции, а затем используйте плавающее расположение внутренних дочерних элементов в левой и правой позициях. - Если один элемент является плавающим, теоретически остальные одноуровневые элементы также должны быть плавающими.
В коробке есть несколько подбоксов. Если один из ящиков плавает, другие братья тоже должны плавать, чтобы предотвратить проблемы.
Плавающий блок будет влиять только на стандартный поток за плавающим блоком, но не на стандартный поток перед ним.
10.2.1 Очистить поплавок
Во многих случаях неудобно задавать высоту родительского блока, но дочерний блок плавает и не занимает позиции.Наконец, когда высота родительского блока равна 0, это повлияет на
стандартный блок потока ниже.
Поскольку плавающий элемент больше не занимает позицию исходного потока документов, он повлияет на расположение последующих элементов.
Очистить сущность плавающего режима:
- Суть очистки плавающих элементов заключается в воздействии очистки плавающих элементов.
- Если сам родительский блок имеет высоту, нет необходимости очищать поплавок.
- После очистки плавающего поля родительский элемент автоматически определит высоту на основе плавающего дочернего поля. Если родительский элемент имеет высоту, это не повлияет на стандартный поток ниже.
选择器{clear:属性值;}
Стратегия очистки резервов: Закройте резерв.
Очистить метод плавания:
- Дополнительный метод маркировки, также известный как метод разделения, — это практика, рекомендованная W3C.
- Добавить атрибут переполнения в родительский элемент
- Добавить после псевдоэлемента к родительскому элементу
- Добавить двойной псевдоэлемент к родительскому элементу
10.2.1.1 Дополнительный метод маркировки
Дополнительный метод маркировки, также известный как метод разделения, — это практика, рекомендованная W3C.
Метод extra tag добавляет пустой тег в конец плавающего элемента. Например <div style=”clear:both”></div>, или другие теги
(например, <br />и т. д.)
. Недостатки: Добавление множества бессмысленных тегов, плохая структура.
Примечание. Требуется, чтобы этот новый пустой тег был элементом уровня блока.
10.2.1.2 Добавление переполнения к родительскому элементу
Вы можете добавить атрибут переполнения к родительскому элементу и установить для него значение атрибута «скрытый», «автоматический» или «прокрутка».
Недостатки: невозможно отобразить переполненные части.
10.2.1.3: после метода псевдоэлемента
Метод :after — это обновленная версия метода дополнительных тегов. Также добавлен к родительскому элементу
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}
Недостатки: забота о браузерах более ранних версий.
10.2.1.4 Очистка двойного псевдоэлемента с плавающей запятой
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
Недостатки: забота о браузерах более ранних версий.
10.2.2 Очистить плавающую сводку
10.2 Расположение
Позиционирование позволяет блоку свободно перемещаться внутри блока или фиксировать определенное положение на экране, а также может подавлять другие блоки.
Позиционирование: расположите коробку в определенной позиции, поэтому позиционирование также означает размещение и перемещение коробки в соответствии с методом позиционирования.
10.2.1 Расположение компонентов
Позиционирование = режим позиционирования + смещение края.
Режим позиционирования используется для указания положения элемента в документе. Смещение края определяет конечное положение элемента.
10.2.1.1 Режим позиционирования
Режим позиционирования определяет метод позиционирования элемента. Он задается через атрибут позиции CSS. Его значение можно разделить на четыре:
10.2.1.2 Смещение края
Смещение края — это когда позиционированный блок перемещается в конечное положение. Есть 4 атрибута: верхний, нижний, левый и правый.
10.2.2 Статическое позиционирование статическое
Статическое позиционирование является методом позиционирования элементов по умолчанию и не имеет значения позиционирования.
选择器 { position: static; }
Статическое позиционирование размещает позиции в соответствии со стандартными характеристиками потока. Оно не имеет смещения края. Статическое позиционирование редко используется в макете.
10.2.3 Относительное позиционирование относительно
Относительное позиционирование означает, что при перемещении элемента он перемещается относительно своего исходного положения.
选择器 { position: relative; }
Характеристики взаимного расположения:
- Он перемещается относительно исходного положения (при перемещении положения опорной точкой является его исходное положение).
- Исходная позиция в стандартном потоке продолжает оставаться занятой, и последующие блоки по-прежнему рассматривают ее как стандартный поток.
Таким образом, относительное позиционирование не является чем-то необычным. Его наиболее типичное применение — абсолютное позиционирование. . .
10.2.4 Абсолютное абсолютное позиционирование
Абсолютное позиционирование означает, что при перемещении элемента он перемещается относительно элементов-предков.
选择器 { position: absolute; }
Характеристики абсолютного позиционирования:
- Если родительский элемент отсутствует или родительский элемент не позиционируется, преобладает позиционирование браузера (документ-документ).
- Если элемент-предок имеет позиционирование (относительное, абсолютное, фиксированное), позиция будет перемещена с использованием ближайшего позиционированного элемента-предка в качестве опорной точки.
- Абсолютное позиционирование больше не занимает исходное положение. (Нестандартно)
Таким образом, абсолютное позиционирование выходит за рамки стандартного процесса.
Если дочерний элемент позиционирован абсолютно, родительский элемент должен использовать относительное позиционирование.
① Дочерний элемент абсолютно позиционирован и не будет занимать какую-либо позицию. Его можно разместить в любом месте родительского блока, не затрагивая другие дочерние блоки.
② Родительский блок должен быть расположен так, чтобы дочерний блок не отображался внутри родительского блока.
③ Когда родительский блок расположен, он должен занять определенную позицию, поэтому родительский блок можно расположить только относительно.
10.2.5 Фиксированное позиционирование фиксированное
Фиксированное позиционирование — это когда элемент фиксируется в видимой области браузера. Основные сценарии использования: Положение элемента не будет меняться при прокрутке страницы браузера.
选择器 { position: fixed; }
Особенности фиксированного позиционирования:
- Перемещайте элементы, используя область просмотра браузера в качестве ориентира. Он не имеет ничего общего с родительским элементом и не прокручивается с помощью полосы прокрутки.
- Фиксированное позиционирование больше не занимает исходное положение.
Фиксированное позиционирование также не соответствует действительности.Фактически фиксированное позиционирование также можно рассматривать как особый вид абсолютного позиционирования.
10.2.5 Привязка к позиционированию
Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования.
选择器 { position: sticky; top: 10px; }
Характеристики липкого позиционирования:
- Перемещайте элементы, используя визуальное окно браузера в качестве ориентира (функция фиксированного позиционирования).
- Липкое позиционирование занимает исходное положение (характеристики относительного позиционирования)
- Чтобы быть действительным, необходимо добавить одно из значений «верхнее», «левое», «правое» и «нижнее».
Используется в сочетании с прокруткой страницы. Плохая совместимость и не поддерживается IE.
10.2.6 Сводная информация о позиционировании
| Режим позиционирования | Это нестандартно? | переместить место |
|---|---|---|
| статическое статическое позиционирование | нет | Смещение края не может быть использовано |
| относительное относительное позиционирование | Нет (занять позицию) | Двигаться относительно собственной позиции |
| двигаться | ||
| абсолютное позиционирование | Да (не занимает должности) | Позиционированный родитель |
| фиксированное фиксированное позиционирование | Да (не занимает должности) | Область просмотра браузера |
| липкое липкое позиционирование | Нет (занять позицию) | Область просмотра браузера |
10.2.7 Расположение z-индекса порядка укладки
При использовании макета позиционирования блоки могут перекрываться. В настоящее время вы можете использовать индекс z для управления порядком полей (ось Z).
选择器 { z-index: 1; }
- Значение может быть положительным целым числом, отрицательным целым числом или 0. По умолчанию установлено значение auto. Чем больше значение, тем выше будет поле.
- Если значения атрибутов одинаковы, порядок записи соблюдается, причем первым идет последний.
- После номера нельзя добавить единицу измерения.
- Только позиционированные блоки имеют атрибут z-index.
10.2.8 Расширение позиционирования
10.2.8.1 Центрирование абсолютно позиционированного блока
Блок с абсолютным позиционированием не может быть центрирован по горизонтали с помощью поля Margin:0 auto, но его можно центрировать по горизонтали и вертикали с помощью следующих методов расчета.
① влево: 50%;: переместите левую часть поля в горизонтальное центральное положение родительского элемента.
② Margin-left: -100px;: Пусть поле переместится на половину своей ширины влево.
10.2.8.2 Поиск особых характеристик
Абсолютное и фиксированное позиционирование также аналогичны плавающему.
- Добавьте абсолютное или фиксированное позиционирование к встроенным элементам, и вы сможете напрямую устанавливать высоту и ширину.
- Элементы уровня блока добавляют абсолютное или фиксированное позиционирование. Если ширина или высота не указаны, размер по умолчанию равен размеру содержимого.
10.2.8.3 Коробки, не соответствующие этикетке, не приводят к схлопыванию полей
Плавающие элементы и абсолютно позиционированные (фиксированные) элементы не вызовут проблемы слияния полей.
10.2.8.4 Абсолютное позиционирование (фиксированное позиционирование) полностью прижмет коробку.
Плавающий элемент отличается. Он подавляет только стандартное поле потока под ним, но не подавляет текст (изображение) в стандартном поле потока ниже.
Однако абсолютное позиционирование (фиксированное позиционирование) подавляет все содержимое стандартного элемента. поток ниже.
Причина, по которой плавание не подавляет текст, заключается в том, что изначально целью плавания является создание эффекта переноса текста. Текст будет обтекать плавающий элемент.
10.3 Краткое описание макета веб-страницы
Полная веб-страница компонуется с использованием стандартного расположения, плавания и позиционирования, каждый из которых имеет свое специализированное использование.
- Стандартный поток
позволяет располагать блоки вверх и вниз или влево и вправо. Вертикальные блоки на уровне блоков отображаются с использованием стандартного макета потока. - Плавающий макет
позволяет отображать несколько элементов уровня блока в одной строке или выравнивать блоки по левому и правому краю. Используйте плавающий макет для отображения нескольких блоков уровня блока по горизонтали.
Позиционирование Самой важной особенностью позиционирования является концепция штабелирования, которая означает, что несколько блоков могут отображаться один за другим .
Используйте макет позиционирования, если элемент может свободно перемещаться внутри рамки .
11 Порядок написания свойств CSS
Рекомендуется соблюдать следующий порядок:
- Атрибуты позиционирования макета: display/position/float/clear/visibility/overflow (рекомендуется сначала написать display, ведь это связано с режимом)
- Собственные атрибуты: ширина/высота/поля/отступ/граница/фон.
- Свойства текста: цвет/шрифт/текст-декорация/выравнивание текста/вертикальное выравнивание/пробелы/разрывное слово.
- Другие свойства (CSS3): content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…
12 Отображение и скрытие элементов
Подобно рекламным объявлениям на веб-сайтах, они исчезают, когда мы нажимаем, чтобы закрыть их, но появляются снова, когда мы обновляем страницу!
Суть: Пусть элемент будет скрыт или отображен на странице.
- дисплей показывает скрытое, но не сохраняет положение
- видимость показывает скрытое, но сохраняет исходное положение
- overflow отображает и скрывает переполнение, но обрабатывает его лишь частично.
12.1 атрибут отображения
Атрибут display используется для установки способа отображения элемента.
- отображение: нет; скрыть объекты
- display:block; помимо преобразования в элементы уровня блока, это также означает отображение элементов.
После того, как display скрывает элемент, он больше не занимает исходное положение.
12.2 видимость видимость
Атрибут видимости используется для указания, должен ли элемент быть видимым или скрытым.
- видимость: видимый; элемент виден
- видимость: скрыт; элемент скрыт
После того, как видимость скрывает элемент, он продолжает занимать исходное положение.
Если скрытый элемент не хочет своего исходного положения, используйте видимость: скрытый.
Если скрытый элемент не хочет своего исходного положения, используйте display: none (больше внимания полезности).
12.3 переполнение переполнение
Атрибут overflow определяет, что произойдет, если содержимое выйдет за пределы поля элемента (за пределы указанной высоты и ширины).
13 продвинутых советов по CSS
13.1 Спрайты
Множество небольших фоновых изображений часто используются в качестве украшений на веб-странице. Когда на веб-странице слишком много изображений, сервер будет часто получать и отправлять
изображения запросов, вызывая чрезмерную нагрузку на сервер, что значительно снижает скорость загрузки. страницы.
Поэтому, чтобы эффективно сократить количество приемов и отправок сервером запросов и улучшить скорость загрузки страницы, появилась технология CSS-спрайтов (также известная как CSS Sprites, CSS Sprite)
.
Основной принцип: объединить несколько небольших фоновых изображений веб-страницы в одно большое изображение, чтобы серверу требовался только один запрос.
Использование ядра спрайта:
- Технология спрайтов в основном используется для фоновых изображений. Это объединение нескольких маленьких фоновых изображений в одно большое изображение.
- Эту большую картинку еще называют спрайтами или спрайтами.
- Чтобы переместить положение фонового изображения, вы можете использовать фоновую позицию.
- Пройденное расстояние — это координаты x и y целевого изображения. Обратите внимание, что координаты на веб-странице другие.
- Поскольку он обычно движется вверх и влево, значение отрицательное.
- При использовании спрайтов необходимо точно измерить размер и положение каждого небольшого фонового изображения.
13.2 Значки шрифтов
Сценарии использования значков шрифтов: в основном используются для отображения некоторых распространенных и часто используемых небольших значков на веб-страницах.
Спрайтовые диаграммы имеют много преимуществ, но их недостатки очевидны.
- Файл изображения по-прежнему относительно большой.
- Само изображение будет искажаться при увеличении и уменьшении масштаба.
- Заменить изображение после его создания очень сложно.
В настоящее время появилась технология, которая очень хорошо решает вышеуказанные проблемы, а именно iconfont.
Значки шрифтов могут предоставить разработчикам интерфейса удобный и эффективный способ использования значков.Они отображают значки, которые по сути являются шрифтами.
13.2.1 Преимущества значков шрифтов:
- Легкий: шрифт значка меньше, чем серия изображений. После загрузки шрифта значок отображается немедленно, что сокращает количество запросов к серверу.
- Гибкость: сутью является текст, который может менять цвет, генерировать тени, эффекты прозрачности, вращение и т. д. по своему желанию.
- Совместимость: поддерживает практически все браузеры, используйте его свободно.
Примечание. Иконки шрифтов не могут заменить эльфийскую технологию, а лишь улучшают и оптимизируют некоторые из работающих технологий иконок.
13.2.2 Резюме
- Если вы встретите небольшие значки с относительно простой структурой и стилем, используйте значки шрифтов.
- Если вы встретите небольшие картинки с более сложной структурой и стилем, используйте спрайты.
13.2.3 Веб-сайт загрузки значков шрифтов
Рекомендуемый сайт загрузки:
- шрифт icomoon http://icomoon.io Индекс рекомендаций ★★★★★
Основанная в 2011 году компания IcoMoon запустила первый генератор собственных значков шрифтов, который позволяет пользователям выбирать нужные значки и объединять их в
один шрифт. Шрифт содержит широкий спектр содержимого и очень информативен. Единственное сожаление заключается в том, что зарубежный сервер имеет низкую скорость сети. - Библиотека значков шрифтов Alibaba http://www.iconfont.cn/ Индекс рекомендаций ★★★★★
Это библиотека значков шрифтов значков Alibaba M2UX, включая библиотеку значков Taobao и библиотеку значков Alimama. Вы можете использовать ИИ
для создания значков и загрузки их для генерации. Дело в том, что это бесплатно!
13.2.4 Представление значков шрифтов
- Поместите папку шрифтов из пакета загрузки в корневой каталог страницы.
- Глобально объявляйте шрифты в стилях CSS. Просто поймите, как добавить эти файлы шрифтов на нашу страницу с помощью CSS.
Обязательно обратите внимание на путь к файлу шрифта.
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
- Добавляйте небольшие значки в html-теги.
- Определите шрифт для метки.
span {
font-family: "icomoon";
}
Примечание. Убедитесь, что этот шрифт соответствует шрифту в @font-face выше.
13.2.4.1 Формат файла шрифта
Форматы шрифтов, поддерживаемые разными браузерами, различаются. Причина совместимости значков шрифтов заключается в том, что они содержат файлы шрифтов, поддерживаемые основными браузерами.
- Шрифт формата TrueType (.ttf) .ttf — наиболее распространенный шрифт для Windows и Mac. Браузеры, поддерживающие этот шрифт, включают IE9+, Firefox3.5+,
Chrome4+, Safari3+, Opera10+, iOS Mobile, Safari4.2+; - Формат Web Open Font Format (.woff) — шрифт woff. Браузеры, поддерживающие этот шрифт, включают IE9+, Firefox3.5+, Chrome6+,
Safari3.6+, Opera11.1+; - Шрифт Embedded Open Type (.eot).eot — это специальный шрифт для IE. Браузеры, поддерживающие этот шрифт: IE4+;
- Формат SVG (.svg). Шрифт svg – это формат, основанный на рендеринге шрифта SVG. Браузеры, поддерживающие этот шрифт, включают Chrome4+, Safari3.1+,
Opera10.0+ и iOS Mobile Safari3.2+;
13.3 CSS-треугольник
Треугольники часто встречаются на веб-страницах и могут быть нарисованы непосредственно с помощью CSS. Нет необходимости превращать их в изображения или значки шрифтов.
div {
width: 0;
height: 0;
border-top: 10px solid pink;
border-right: 10px solid red;
border-bottom: 10px solid blue;
border-left: 10px solid green;
}
13.4 Стили пользовательского интерфейса CSS
Так называемый стиль интерфейса предназначен для изменения некоторых стилей работы пользователя, чтобы улучшить взаимодействие с пользователем.
- Изменение стиля мыши пользователя
- контур формы
- Запретить перетаскивание полей формы
13.4.1 Курсор в стиле мыши
li {cursor: pointer; }
Устанавливает или извлекает определяемую системой форму курсора, принимаемую указателем мыши, перемещающимся по объекту.
13.4.2 Контурная линия
После добавления стиля контура: 0 или контура: нет; в форму вы можете удалить синюю рамку по умолчанию.
input {outline: none; }
13.4.3 Запретить изменение размера текстовых полей при перетаскивании
В реальной разработке нижний правый угол нашего текстового поля нельзя перетаскивать.
textarea{ resize: none;}
13.5 применение атрибута вертикального выравнивания
Сценарии использования атрибута CSSverter-align: часто используется для установки вертикального выравнивания изображений или форм (элементов встроенного блока) и текста.
Официальное объяснение: используется для установки вертикального выравнивания элемента, но эффективно только для строчных элементов или строчных блочных элементов.
vertical-align : baseline | top | middle | bottom
13.5.1 Выравнивание изображений, форм и текста
Изображения и формы являются встроенными блочными элементами, а вертикальное выравнивание по умолчанию — выравнивание по базовой линии.
В настоящее время вы можете установить атрибут вертикального выравнивания элементов встроенного блока, таких как изображения и формы, на среднее значение, чтобы выровнять текст и изображения по вертикали и по центру
.
13.5.2 Решите проблему пустого пробела по умолчанию внизу изображения.
Ошибка: в нижней части изображения будет пробел, поскольку элемент встроенного блока будет выровнен по базовой линии текста.
Есть два основных решения:
- Добавьте к изображению вертикальное выравнивание: по середине | сверху | снизу и т. д. (Рекомендуется использовать)
- Преобразуйте изображение в элемент блочного уровня display:block;
13.6 Отображение переполненных текстовых эллипсов
13.6.1 Однострочное переполнение текста отображает эллипсы
Должны быть соблюдены три условия
/*1. 先强制一行内显示文本*/
white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
13.6.2 Многострочное переполнение текста отображает эллипсы
Многострочный текст переполняется и отображает многоточия, что имеет серьезные проблемы с совместимостью и подходит для браузеров WebKit или мобильных терминалов (большинство мобильных терминалов имеют ядро WebKit
).
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;