Wondershare EdrawMind
Галерея диаграмм связей Программа обучения базовому курсу CSS Front-end HTML
- 1
Программа обучения базовому курсу CSS Front-end HTML
Программа обучения базовому курсу CSS Front-End HTML, веб-страница состоит из трех частей, структура - это общая структура страницы, где находится заголовок, где находится абзац, где находится изображение, структура написана в HTML и производительность — это внешний стиль страницы, такой как шрифт, размер шрифта, цвет шрифта, фон.
Отредактировано в 2022-11-08 10:53:34
Программа обучения базовому курсу CSS Front-end HTML
- Рекомендовано вам
- Структура
Программа обучения базовому курсу CSS Front-end HTML
CSS
CSS называется каскадными таблицами стилей и используется для стилизации элементов на странице. Цвет фона, цвет шрифта, размер шрифта. . .
CSS отвечает за производительность структуры, представления и поведения.
письменное место
1. Встроенные стили
Запишите стиль в атрибут style тега.
Этот стиль будет работать только с текущим тегом и не может быть использован повторно. Он неудобен для дальнейшего обслуживания и не рекомендуется.
2. Внутренняя таблица стилей.
Запишите таблицу стилей в тег стиля в заголовке.
Используйте внутренние таблицы стилей для дальнейшего разделения производительности и структуры. Вы можете установить стили для нескольких элементов одновременно, чтобы облегчить дальнейшее обслуживание.
3. Внешние таблицы стилей
Запишите таблицу стилей во внешний файл CSS, а затем введите внешний файл через тег ссылки.
Запишите стили во внешнюю таблицу стилей. Вы можете использовать одну и ту же таблицу стилей на разных страницах, полностью разделяя производительность и структуру, что облегчает дальнейшее обслуживание. Это рекомендуемый метод.
базовая грамматика
Селектор
Используйте селекторы, чтобы выбрать группу элементов на странице, а затем установить для них стили.
селектор элементов
Выберите указанный элемент на странице по имени тега
Синтаксис: имя тега { }
пример:
div{}
п{}
h1{}
селектор идентификатора
Выберите уникальный элемент на основе значения его атрибута id.
Синтаксис: #id {}
пример:
#box1{}
#привет{}
селектор класса
Выберите группу элементов на основе значения атрибута класса элемента.
Синтаксис: .класс{}
пример:
.привет{}
.коробка{}
селектор подстановочных знаков
Выделить все элементы на странице
грамматика:*{}
Производительность селекторов с подстановочными знаками относительно низкая, поэтому старайтесь избегать их использования.
Селектор объединения
Элементы, соответствующие нескольким селекторам, можно выбирать одновременно.
Синтаксис: селектор 1, селектор 2, селектор N{}
пример:
div,p,#box,.hello{}
Селектор пересечений
Можно выбрать элементы, соответствующие нескольким условиям.
Синтаксис: Селектор 1 Селектор 2 Селектор N{}
Пример: п.привет{}
Селектор дочернего элемента
Выбирает указанные элементы-потомки указанного элемента
Синтаксис: Элемент-предок Элемент-потомок {}
пример:
интервал div {}
div p{}
Селектор дочерних элементов
Выберите указанный дочерний элемент указанного элемента
Синтаксис: родительский элемент > дочерний элемент {}
пример:
div > диапазон {}
div >p{}
блок объявлений
Блок объявлений на самом деле является объявлением CSS.
заявление
Каждое объявление CSS — это стиль, который на самом деле представляет собой структуру пар имя-значение.
Использование: связь между именем и значением.
:Слева — название стиля.
:Правая сторона — значение стиля
Каждое утверждение заканчивается;
пример
красный цвет;
размер шрифта: 20 пикселей;
отношения между элементами
родительский элемент
Элемент, который непосредственно содержит дочерние элементы, называется родительским элементом.
дочерний элемент
Элементы, непосредственно содержащиеся в родительском элементе, называются дочерними элементами.
Элементы-предки
Элементы, которые прямо или косвенно содержат элементы-потомки, называются элементами-предками, а родительский элемент также является элементом-предком.
Потомки элементов
Элементы, которые прямо или косвенно содержатся в элементах-предках, называются элементами-потомками, а дочерние элементы также являются элементами-потомками.
братские элементы
Элементы, имеющие один и тот же родительский элемент, называются братьями и сестрами.
Блочные элементы и встроенные элементы
блочный элемент
Элемент блока занимает отдельную строку на странице независимо от его содержимого.
Обычно используйте блочные элементы для макета страницы.
Общие элементы блока
div
п
h1~h6
встроенные элементы
Встроенные элементы занимают только свой размер и не занимают строку.
Встроенные элементы еще называют встроенными элементами (inline).
Обычно встроенные элементы используются для установки эффектов для текста.
Общий встроенный
охватывать
а
изображение
Правила пакета
Обычно блочные элементы используются для переноса строковых элементов, но строчные элементы не используются для переноса блочных элементов.
Элемент a может содержать любой элемент, кроме самого a.
Элемент p не может содержать блочные элементы.
Псевдоклассы и псевдоэлементы
Псевдоклассы и псевдоэлементы используются для представления особого состояния или особой позиции элемента.
:связь
Представляет собой обычную ссылку (непосещенную ссылку).
:посетил
Представляет посещенные ссылки
:наведите курсор
Ссылки, по которым перемещается мышь, также можно настроить на наведение курсора на другие элементы.
:активный
Нажимаемую ссылку также можно сделать активной для других элементов.
:фокус
Указывает состояние элемента, получающего фокус, обычно используется в текстовых полях.
::выбор
Указывает, что контент выбран
В Firefox вместо этого используйте ::-moz-selection
:первое письмо
Представляет первого персонажа
:первая линия
Представляет первую строку текста
:до
Выберите переднюю часть элемента
Обычно этот псевдокласс используется вместе с контентом, с помощью которого контент может быть добавлен в указанное место.
:после
Выберите последний край элемента
Обычно этот псевдокласс используется вместе с контентом, с помощью которого контент может быть добавлен в указанное место.
селектор атрибутов
Выберите указанный элемент на основе его атрибутов
[имя атрибута]
Выберите элементы с указанными атрибутами
[имя атрибута="значение атрибута"]
Выберите элементы, значение атрибута которых равно указанному значению.
[Имя атрибута^="Значение атрибута"]
Выберите элементы, значение атрибута которых начинается с указанного содержимого.
[Имя атрибута$="Значение атрибута"]
Выберите элементы, значение атрибута которых заканчивается указанным содержимым.
[Имя атрибута*="Значение атрибута"]
Выберите элементы, значение атрибута которых содержит указанное содержимое.
Селектор родственного элемента
Выберите следующий родственный элемент
Предыдущий Следующий
Выберите все следующие одноуровневые элементы
Предыдущий ~ Все следующие
Псевдокласс для дочерних элементов
:Первый ребенок
Найдите первый дочерний элемент родительского элемента и выполните сортировку среди всех дочерних элементов.
:последний ребенок
Найдите последний дочерний элемент родительского элемента и выполните сортировку среди всех дочерних элементов.
:n-детский
Найдите дочерний элемент в указанной позиции родительского элемента и выполните сортировку среди всех дочерних элементов.
пример
p:nth-ребенок(3)
Вы можете использовать Even для поиска дочерних элементов с четными номерами.
Вы можете использовать нечетные, чтобы найти нечетные дочерние элементы.
:первый в своем роде
Находит первый дочерний элемент указанного типа.
: последний тип
Находит последний дочерний элемент указанного типа.
:n-го типа
Находит указанный дочерний элемент указанного типа.
отрицать псевдокласс
Исключить из набора элементов элементы, соответствующие требованиям.
грамматика:
:нет (селектор)
пример:
.abc:нет (дел)
Наследование стилей
Установка стилей для элемента-предка также будет применена к его элементам-потомкам. Эта функция называется наследованием стилей.
Благодаря наследованию стилей некоторые стили могут быть одинаково установлены для элементов-предков, так что ко всем потомкам будет применен один и тот же стиль.
Но не все стили будут унаследованы, например: связанные с фоном, связанные с границей, связанные с позиционированием. Конкретные справочные документы
приоритет селектора
При использовании селекторов для стилизации элементов, если стили конфликтуют, приоритет селектора определяет, какой стиль будет использоваться.
приоритет
встроенные стили
1000
селектор идентификатора
100
Селекторы классов и псевдоклассов
10
селектор элементов
1
селектор подстановочных знаков
0
Унаследованные стили
нет приоритета
Если стили конфликтуют, соответствующие приоритеты селектора необходимо суммировать и рассчитать первым. Если приоритеты одинаковы, будет отображаться более поздний стиль.
При расчете приоритетов общий размер не может превышать максимального порядка величины.
Вы можете добавить !important после стиля. Если это содержимое будет добавлено в стиль, стиль получит наивысший приоритет и будет отображаться перед всеми стилями, включая встроенные стили. Однако этот атрибут следует использовать с осторожностью.
Производительность селектора
Когда браузер анализирует группу селекторов, он анализирует их один за другим, снизу вверх.
Если селектор слишком длинный, производительность анализа браузера будет низкой, поэтому при написании селектора чем короче, тем лучше.
* Селекторы с подстановочными знаками имеют низкую производительность. Избегайте использования селекторов с подстановочными знаками.
единица
единица длины
пикселей
Пиксель, пиксель – это мельчайшая единица, из которой состоит картинка. Наш экран состоит из пикселей один за другим.
Пиксель относится к пикселю
В разных дисплеях размер пикселя разный. Чем четче экран, тем мельче пиксели.
%
Вы можете установить значение стиля элемента в процентах, чтобы браузер вычислял соответствующее значение на основе значения родительского элемента.
При изменении значения родительского элемента значение дочернего элемента будет изменяться вместе в определенной пропорции, которая часто используется на адаптивных страницах.
Эм
em будет рассчитываться относительно размера шрифта текущего элемента
1em = 1 размер шрифта
em часто используется для установки некоторых стилей, связанных с текстом, поскольку при изменении размера текста em будет меняться соответствующим образом.
цветовая единица
цветные слова
Используйте английские слова непосредственно для обозначения цветов
красный зеленый синий оранжевый
Значение RGB
Так называемое значение RGB предназначено для сопоставления различных цветов посредством различных комбинаций трех основных цветов: красного, зеленого и синего.
грамматика:
RGB (красный, зеленый, синий)
Эти три значения требуют значения от 0 до 255.
0 означает отсутствие
255 представляет собой максимум
RGB(50,200,30)
Вы также можете использовать проценты для установки значений RGB, для которых требуется значение от 0% до 100%.
Процент в конечном итоге преобразуется в 0-255.
0% эквивалентно 0
100% эквивалентно 255
RGB(100%,0%,0%)
Шестнадцатеричное значение RGB
Это также способ выражения значений RGB. Разница в том, что вместо десятичных чисел используются шестнадцатеричные числа.
грамматика:
#красныйзеленыйсиний
Цвет здесь должен иметь значение от 00 до ff.
пример:
#ff0000
Если цвет повторяется два через два, его можно сократить.
Например, #aabbcc можно записать как #abc.
Например, #bbffaa можно записать как #bfa.
стиль текста
шрифт
цвет
Цвет шрифта
размер шрифта
размер шрифта
Размер шрифта по умолчанию в браузере обычно составляет 16 пикселей, а при разработке он обычно унифицируется до 12 пикселей.
семейство шрифтов
Установить шрифт текста
стиль шрифта
Установить курсив
вес шрифта
Установить жирность текста
вариант шрифта
маленькие шапки
шрифт
атрибут текстового сокращения
Все стили, связанные со шрифтами, можно установить одновременно.
грамматика:
шрифт: [жирный курсив строчные буквы] размер [/высота строки] шрифт
Жирный, курсив, буквы маленькие и большие, порядок не имеет значения, можно писать или нет, если нет, используйте значение по умолчанию.
Размер текста и шрифт должны быть написаны, причем размер должен быть предпоследним, а шрифт должен быть последним.
После размера вы можете установить высоту строки, которую можно писать или нет. Если нет, будет использоваться значение по умолчанию.
стиль текста
высота линии
высота строки
По умолчанию текст центрируется по вертикали в верхнем центре строки.
Высоту строки можно изменить с помощью line-height.
Межстрочный интервал = высота строки – размер шрифта.
преобразование текста
Установить регистр текста
текст-оформление
Установить оформление текста
выравнивание текста
Установить выравнивание текста
отступ текста
Установить отступ первой строки
Требуется единица длины. Если это положительное значение, первая строка переместится вправо. Если это отрицательное значение, она переместится влево.
Межбуквенное расстояние
расстояние между символами
межсловный интервал
интервал между словами
фон
фоновый цвет
фоновый цвет
изображение на заднем плане
Фоновое изображение
В качестве параметра требуется URL-адрес.
Пример: background-image:url (путь к изображению)
фоновое повторение
Установить режим повтора фонового изображения
Необязательные значения:
повторить
По умолчанию фоновое изображение будет отображаться в виде плитки.
Повторите в обоих направлениях вдоль осей X и Y.
не повторяющийся
Фоновое изображение не повторяется
повторить-х
Фоновое изображение повторяется по горизонтали
повторение
Фоновое изображение повторяется вертикально
фоновая позиция
Установите положение фонового изображения
Первый способ установки
Вы можете напрямую установить положение изображения с помощью нескольких ключевых слов позиции.
вершина
левый
верно
нижний
центр
Вы можете установить фоновое изображение в любую позицию элемента, объединив приведенные выше ключевые слова в пары.
Если указано только одно значение, второе значение по умолчанию равно центру.
Второй способ установки
Вы можете напрямую указать два значения для установки смещения фонового изображения.
пример:
background-position: смещение по оси X, смещение по оси Y;
Смещение оси X, используемое для указания горизонтального положения изображения.
Если вы укажете положительное значение, изображение переместится вправо.
Если вы укажете отрицательное значение, изображение переместится влево.
Смещение оси Y, используемое для указания вертикального положения изображения.
Если вы укажете положительное значение, изображение переместится вниз.
Если вы укажете отрицательное значение, изображение переместится вверх.
фоновое вложение
Используется для установки того, будет ли фон прокручиваться вместе со страницей.
Необязательное значение
прокрутка
По умолчанию фоновое изображение будет прокручиваться вместе со страницей.
зафиксированный
Фоновое изображение не прокручивается вместе со страницей и будет зафиксировано в указанной позиции на странице.
Если вы установите фон для этого свойства, фон всегда будет располагаться относительно окна браузера.
Обычно этот фон устанавливается на тело.
фон
Сокращенный атрибут фона
Вы можете использовать его для установки всех стилей, связанных с фоном.
Для этого сокращенного атрибута не существует требований к порядку или количеству. Значение по умолчанию используется для незаписанных атрибутов.
непрозрачность
Используется для установки непрозрачности фона.
Необязательное значение
0-1
0 означает полную прозрачность
1 означает полностью непрозрачный
0,5 полупрозрачный
Браузеры IE8 и ниже не поддерживают этот стиль. Вместо этого вы можете использовать фильтры.
фильтр: альфа (непрозрачность = значение)
Значение здесь требует значения от 0 до 100.
0 эквивалентно полной прозрачности
100 полностью непрозрачный
HTML
Структура веб-страницы
Веб-страница состоит из трех частей
состав
Структура – это общая структура страницы, где заголовок, где абзац, где картинка.
Структура написана с использованием HTML.
Производительность
Производительность — это внешний стиль страницы, такой как шрифт, размер шрифта, цвет шрифта и фон. . .
Используйте CSS для стилизации элементов на вашей странице.
Поведение
Взаимодействие между страницей и пользователем
Используйте JavaScript для настройки поведения страницы
Хорошо спроектированная веб-страница требует разделения структуры, представления и поведения.
При разработке мы всегда сталкиваемся с проблемой связи между программами. Разделение этих трех элементов необходимо для понимания связи.
HTML, язык гипертекстовой разметки
Отвечает за структуру страницы и определяет различные компоненты страницы.
HTML записывается в виде обычного текста и использует теги HTML для идентификации различных частей страницы.
Этикетка
появляются парами
самозакрывающийся тег
Атрибуты
Вы можете установить эффект метки с помощью атрибутов.
Атрибуты должны быть определены в открывающем или закрывающем теге.
Свойства на самом деле представляют собой набор пар имя-значение.
пример:
Базовая структура HTML-страницы
Заявление о документации
HTML-версия, используемая для идентификации текущей страницы.
Этот оператор используется, чтобы сообщить браузеру, что текущая страница написана с использованием стандарта HTML5.
Общие теги
Корневой тег веб-страницы
На странице есть только один корневой тег
Весь контент веб-страницы должен быть записан внутри тега html.
Заголовок веб-страницы
Содержимое этого тега не будет отображаться непосредственно на веб-странице.
Этот тег используется, чтобы помочь браузеру проанализировать страницу.
вложенный тег
Используется для установки заголовка веб-страницы.
По умолчанию он будет отображаться в строке заголовка браузера.
Когда поисковая система находит веб-страницу, она в основном извлекает содержимое заголовка, что влияет на рейтинг страницы в поисковой системе.
Используется для установки метаданных веб-страниц, например набора символов, используемого веб-страницами.
Установите ключевые слова для веб-страниц
Установите описание веб-страницы
Запрошенное перенаправление
Тело веб-страницы
Все видимые части веб-страницы должны быть написаны в теле.
~
тег заголовка
В HTML шесть уровней заголовков.
Среди шестиуровневых заголовков h1 является наиболее важным, а h6 — наименее важным. На общих страницах используются только h1~h3.
По важности h1 уступает только заголовку. Браузер также будет в основном искать контент в h1, чтобы определить основное содержимое страницы.
Обычно на странице можно записать только один h1.
теги абзацев
тег новой строки
метка горизонтальной линии
iframe
Может включать в страницу другие внешние страницы.
Атрибуты
источник
Адрес внешней страницы, можно использовать относительные пути
ширина и высота
Вы можете установить ширину и высоту рамки.
имя
Встроенному фрейму можно дать имя
Значение этого атрибута может быть установлено равным значению целевого атрибута гиперссылки.
Таким образом, при нажатии на гиперссылку страница откроется в соответствующем встроенном фрейме.
Содержимое встроенных фреймов не будет получено поисковыми системами, поэтому старайтесь не использовать встроенные фреймы во время разработки.
Гиперссылка
Может заставить текущую страницу перейти на другие страницы.
<a>Текст ссылки</a>
Атрибуты
href
Указывает на целевой адрес перехода по ссылке, который может быть относительным путем.
Это также может быть значение атрибута #id, чтобы при щелчке по гиперссылке она перемещалась в указанное место на текущей странице.
Вы можете использовать mailto: для создания гиперссылки, которая отправляет электронное письмо.
цель
Укажите окно, в котором должна открываться ссылка
Необязательное значение
_себя
Значение по умолчанию, ссылка будет открываться в текущем окне по умолчанию.
_пустой
Открыть ссылку в новом окне
Значение атрибута имени встроенного фрейма
Открывает ссылку в указанном iframe
Комментарий
грамматика
Содержимое комментариев не будет отображаться на странице, но будет отображаться в исходном коде. Мы можем использовать комментарии для объяснения кода веб-страницы.
Вы также можете скрыть некоторый контент, который не хотите отображать на странице, с помощью комментариев.
сущность
Некоторые специальные символы нельзя использовать непосредственно на страницах HTML, и для замены этих специальных символов необходимо использовать сущности.
Сущности также можно называть escape-символами.
синтаксис объекта
&имя сущности;
Часто используемые сущности
космос
<
>
>
Символ авторского права
©
Теги изображений
<изображение />
Используйте тег изображения, чтобы добавить на страницу внешнее изображение.
Атрибуты
источник
Путь, указывающий на внешнее изображение, вы можете использовать относительные пути.
альтернативный вариант
Укажите описание изображения, если оно не может быть загружено
Поисковые системы в основном используют этот атрибут для идентификации содержимого изображения.
Если вы не пропишете этот атрибут, поисковая система включит изображение.
ширина
Установите ширину изображения
высота
Установите высоту изображения
Формат изображения
JPEG
Красочные изображения, например фотографии.
гифка
Одноцветные, простые прозрачные картинки, динамичная графика.
PNG
Красочные, сложные и прозрачные изображения
Принципы подбора картинок
Эффект постоянный, используйте небольшой
Эффект непостоянный, используйте тот, у которого лучший эффект.
относительный путь
Путь относительно каталога, в котором находится текущий ресурс.
Вы можете использовать ../ для возврата в каталог первого уровня, а для возврата на несколько уровней используйте несколько ../
Спецификация синтаксиса xHtml
1.HTML не чувствителен к регистру, но попробуйте использовать строчные буквы.
2.Комментарии HTML не могут быть вложенными.
3. Этикетка должна иметь целостную структуру.
Либо появляются парами
или самозакрывающийся тег
4. Теги могут быть вложенными, но не перекрестными.
5. Атрибут должен иметь значение, которое должно быть заключено в кавычки. Допускаются как одинарные, так и двойные кавычки.
текстовая метка
выразить акцент тоном
Указывает на важность контента
означает простой курсив
Обозначает просто жирный шрифт
Указывает на содержание, например детали
Чтобы указать справочный контент, cite можно использовать для чего угодно, имеющего название книги.
короткая цитата, встроенная цитата
длинная ссылка, ссылка на уровне блока
надстрочный индекс
нижний индекс
Удаленный контент
Вставленный контент
Предварительно отформатированные теги могут сохранять форматирование пробелов и разрывов строк в коде.
представляет программный код
список
неупорядоченный список
Используйте ul для создания неупорядоченного списка и используйте li для представления элемента списка в списке.
Неупорядоченный список с использованием символов в качестве маркеров
упорядоченный список
Используйте ol для создания неупорядоченного списка и используйте li для представления элемента списка в списке.
Используйте последовательные номера в качестве пунктов списка.
список определений
Все элементы, связанные со списком, являются блочными элементами и могут быть вложены друг в друга.
Удалить пули
стиль списка: нет
макет
плавать
Используйте float, чтобы сделать элементы плавающими
Необязательное значение
никто
Значение по умолчанию, без плавающего числа, элемент в потоке документов
левый
Элемент плавает влево
верно
Элемент плавает вправо
Функции
1. После того как элемент будет плавающим, он полностью вырвется из документооборота.
2. После плавания элемент всегда будет перемещаться к вершине родительского элемента.
3. Он перестанет двигаться, пока не встретит границу родительского элемента или других плавающих элементов.
4. Если плавающий элемент находится над элементом блока, плавающий элемент не будет закрывать элемент блока.
5. Плавающий элемент не будет превышать плавающий одноуровневый элемент над ним и может быть выровнен максимум по одной стороне.
6. Плавающие элементы не перекрывают текст. Текст автоматически обтекает плавающие элементы. Эффект переноса текста можно добиться путем плавания.
Характеристики элементов после плавания
Когда элемент становится плавающим, он полностью удаляется из потока документов.
блочный элемент
После выхода элемента блока из документооборота
1. Не займет очередь
2. Ширина и высота растягиваются за счет содержимого.
встроенные элементы
Встроенные элементы становятся блочными элементами после того, как они покидают поток документов.
сильно разрушенный
Высота родительского элемента в потоке документов по умолчанию увеличивается за счет дочерних элементов. Когда дочерний элемент отделяется от потока документов, он не сможет поддерживать высоту родительского элемента, что приведет к увеличению высоты. родительский элемент свернуть.
Как только высота родительского элемента снизится, позиции всех элементов сместятся вверх, в результате чего макет всей страницы станет хаотичным.
метод первый
Включите BFC или hasLayout родительского элемента.
БФК
Контекст форматирования блока
среда форматирования на уровне блоков
BFC является неявным атрибутом элемента и по умолчанию отключен.
BFC можно включить с помощью некоторых специальных стилей.
После включения BFC элементы будут иметь следующие характеристики:
1. Вертикальные поля родительского элемента не будут перекрываться с дочерними элементами.
2. Элементы с включенным BFC не будут закрыты плавающими элементами.
3. Элементы с включенным BFC могут содержать плавающие дочерние элементы.
Как включить BFC
1. Установите плавающий элемент
2. Установите абсолютное позиционирование элементов.
3. Установите тип элемента на inline-block.
4. Установите для переполнения значение, отличное от значения по умолчанию.
Обычно overflow:hidden используется для включения BFC.
имеетLayout
В IE6 нет BFC, но есть hasLayout, похожий на BFC.
В IE6 проблему схлопывания высоты можно решить, включив hasLayout.
Самый простой способ открытия с минимальными побочными эффектами.
масштаб: 1
При установке для элемента ширины, отличной от заданной по умолчанию, hasLayout будет автоматически включен.
Способ второй
Добавьте пустой элемент div в конец свернутого родительского элемента, а затем очистите его.
Использование этого подхода добавляет ненужную структуру на страницу.
Способ третий
Используйте псевдокласс after, чтобы добавить блочный элемент после родительского элемента и очистить его число с плавающей запятой.
Принцип этого метода такой же, как и у метода 2, но добавлять на страницу соответствующую структуру не требуется.
позиция
Благодаря позиционированию элементы на странице можно разместить в любом месте страницы.
Используйте позицию, чтобы установить расположение элементов.
Необязательное значение
статический
Значение по умолчанию, позиционирование элемента не включено
родственник
Включить относительное позиционирование элементов
абсолютный
Включите абсолютное позиционирование элементов
зафиксированный
Включить фиксированное позиционирование элементов
относительное позиционирование
1. После включения относительного позиционирования элемента элемент никак не изменится, если не задано смещение.
2. Взаимно позиционированные элементы располагаются относительно своего положения в потоке документов.
3. Взаимно расположенные элементы не вырвутся из документооборота
4. Относительное позиционирование не меняет природу элемента, будь то блочный элемент или блочный элемент, строчный элемент или строчный элемент.
5. Взаимно расположенные элементы будут подняты на более высокий уровень.
абсолютное позиционирование
1. После установки элемента на абсолютное позиционирование, если смещение не установлено, положение элемента не изменится.
2. Абсолютно позиционированный элемент позиционируется относительно своего ближайшего элемента-предка, для которого включено позиционирование. Если для всех элементов-предков позиционирование не включено, он позиционируется относительно окна браузера.
3. Абсолютно позиционированные элементы полностью вырвутся из документооборота.
4. Абсолютное позиционирование изменит природу элемента. Блок встроенных переменных, высота и ширина блока растягиваются в зависимости от содержимого и не занимают отдельную строку.
5. Абсолютное позиционирование поднимет элемент на более высокий уровень.
Фиксированное позиционирование
Фиксированное позиционирование — это особый вид абсолютного позиционирования. Большинство его характеристик такие же, как и у абсолютного позиционирования.
Разница в том, что фиксированные элементы всегда располагаются относительно окна браузера. И он не будет прокручиваться с помощью полосы прокрутки
IE6 не поддерживает фиксированное позиционирование
Иерархия
Размещенные элементы > Плавающие элементы > Элементы в потоке документов
Когда для элемента включено позиционирование, уровень элемента можно установить с помощью z-index.
Чем выше значение z-index, тем больше приоритетных элементов будет отображаться.
Если значения z-index совпадают или z-index отсутствует, первым будет отображаться нижний элемент.
Родительские элементы никогда не закрывают дочерние элементы.
Компенсировать
Если для элемента включено позиционирование, положение элемента можно задать по смещению.
левый
Расстояние слева от элемента от позиции позиционирования
вершина
Расстояние от верхней части элемента до позиции позиционирования
верно
Расстояние справа от элемента от позиции позиционирования
нижний
Нижнее расстояние элемента от позиции позиционирования
Обычно для определения положения элемента используются только два значения.
Введение в курс
архитектура программного обеспечения
К/С, клиент/сервер
1. Как правило, используемое нами программное обеспечение имеет архитектуру C/S.
2. Например, ПО в системе QQ, 360, office, XMind
3.C представляет клиента. Пользователи используют программное обеспечение через клиента.
4.S представляет собой сервер, отвечающий за обработку бизнес-логики программного обеспечения.
Функции
1. Программное обеспечение должно быть установлено перед использованием.
2. При обновлении программного обеспечения сервер и клиент должны обновляться одновременно.
3. Программное обеспечение для архитектуры C/S не может использоваться на разных платформах.
4. Клиент и сервер программного обеспечения архитектуры C/S обмениваются данными, используя свои собственные протоколы, что относительно безопасно.
Б/С, браузер/сервер
1.B/S по существу является C/S, но программное обеспечение архитектуры B/S использует браузер в качестве клиента программного обеспечения.
2. Программное обеспечение архитектуры B/S использует это программное обеспечение с помощью браузера для доступа к веб-страницам.
3. Например: JD.com Taobao 12306 Zhihu Sina Weibo.
Функции
1. Программное обеспечение не нужно устанавливать, просто используйте браузер для доступа к указанному URL-адресу.
2. При обновлении программного обеспечения клиент обновляться не требует.
3. Программное обеспечение может быть кроссплатформенным и использоваться при наличии в системе браузера.
4. Программное обеспечение архитектуры B/S использует общий протокол HTTP для связи между клиентом и сервером, что относительно небезопасно.
база
Десятичная система предназначена для прибавления единицы к полному числу.
двоичный
0 1
10 11 100 101 110 111
десятичная дробь
0 1 2 3 4 5 6 7 8 9
10 11 12 13 14. . .
шестнадцатеричный
Введите 1, если вам больше 16 лет
0 1 2 3 4 5 6. . . 9 а б в г е е
10 11 12...19 1а 1б 1в 1г 1д 1е
Поскольку шестнадцатеричное число состоит из 16, необходимо установить несколько специальных символов для обозначения 10, 11, 12, 13, 14, 15.
Используйте bcdef для обозначения 10, 11, 12, 13, 14, 15 соответственно.
Восьмеричный
Введите 1, если 8 или более
0 1 2 3 4 5 6 7
10 11 12 13 14 15 16 17 20 21 22
Проблема с искаженным кодом
Причины искажения символов
Компьютер — очень глупая машина. Он знает только две вещи 0 1.
Любой контент, сохраненный на компьютере, в конечном итоге необходимо будет преобразовать в двоичную кодировку 0 1 для сохранения, включая контент на веб-страницах.
Например: Китай, внизу компьютера, возможно, потребуется преобразовать в 1010001001010101011010.
При чтении контента вам необходимо закодировать двоичный файл и преобразовать его в правильный контент.
кодирование
Процесс преобразования символов в двоичную кодировку по определенным правилам.
декодирование
Процесс преобразования двоичной кодировки в символы по определенным правилам.
набор символов
Правила, используемые для кодирования и декодирования, называются наборами символов.
Общие наборы символов
ASCII
ИСО-8859-1
ГБК
ГБ2312
Кодировка по умолчанию для китайских систем
UTF-8
Универсальный код, поддерживает все тексты на земле.
АНСИ
Автоматически сохранять файлы в кодировке системы по умолчанию.
Основная причина искажения символов заключается в том, что при кодировании и декодировании используются разные наборы символов.
В китайских системных браузерах для декодирования по умолчанию используется GB2312.
коробочная модель
CSS устанавливает каждый элемент в прямоугольный блок.
Установите все элементы в виде полей, чтобы упростить макет страницы.
Когда все эти элементы представляют собой блоки, наш макет становится размещением блоков на странице.
коробочная модель
Каждая коробка состоит из следующих частей
область контента
Область содержимого эквивалентна пространству, в котором в коробке хранятся вещи.
Область содержимого находится в самой внутренней части окна.
Все дочерние элементы элемента размещаются в области содержимого родительского элемента.
Настройки области контента
ширина
ширина области контента
высота
высота области контента
прокладка
Отступы относятся к расстоянию между областью содержимого и границей. Отступы влияют на размер поля.
В поле есть четыре направления заполнения.
обивка-топ
отступ справа
отступ-дно
отступ слева
прокладка
Отступы в четырех направлениях могут быть установлены одновременно, и правила соответствуют ширине границы.
отступ: вверху справа внизу слева
отступы: вверх, влево, вправо, вниз
отступы: вверх, вниз, влево и вправо
отступы: вверх, вниз, влево, вправо
Размер видимого поля определяется областью содержимого, отступами и границами.
рамка
Самая внешняя сторона видимого блока — это рамочный блок, а граница — это край блока.
Установить границы
Установка границы требует одновременной настройки трех стилей, и один из них обязателен.
ширина рамки
ширина рамки
Вы можете указать ширину четырех границ одновременно или по отдельности.
правило
четыре значения
ширина границы: 10 пикселей 20 пикселей 30 пикселей 40 пикселей;
ширина границы: верхний правый нижний левый;
три значения
ширина границы: 10 пикселей 20 пикселей 30 пикселей;
ширина границы: сверху, слева и снизу;
два значения
ширина границы: 10 пикселей 20 пикселей;
ширина границы: вверх, вниз, влево и вправо;
ценность
ширина границы: 10 пикселей;
ширина границы: вверх, вниз, влево и вправо;
цвет границы
цвет границы
бордюрный стиль
Стиль границы
В дополнение к этим трем стилям CSS также предоставляет
граница-xxx-ширина
граница-xxx-цвет
граница-xxx-стиль
ххх может быть
вершина
верно
нижний
левый
Эти стили позволяют вам индивидуально указать цвет, ширину и стиль четырех сторон.
Сокращенное свойство для границы
граница
левая граница
граница-верх
правая граница
граница-дно
Эти атрибуты могут одновременно устанавливать стили, связанные с границами.
граница может одновременно устанавливать цвет, ширину и стиль четырех сторон
border-xxx может устанавливать определенный край отдельно
правило
Используя эти стили, вы можете одновременно установить border-width border-style. Различные атрибуты разделяются пробелами, и порядок их расположения не требуется.
поля
Расстояние между полем поля и другими полями. Поле не влияет на размер видимого поля, но влияет на его положение.
Также имеет поля в четырех направлениях
маржа-верх
маржа справа
поле-дно
поле слева
Сокращенный атрибут
допуск
Правила такие же, как и для заполнения.
маржинальная стоимость
Можно установить на авто
Если вы установите для левого и правого полей значение «авто» по отдельности, для левых или правых полей будет установлено максимальное значение.
Если для левого и правого полей установлено значение auto, для левого и правого полей будет установлено одинаковое значение, тем самым центрируя дочерний элемент по горизонтали внутри родительского элемента.
маржа: 0 авто
Можно установить отрицательные значения
Если для поля установлено отрицательное значение, элемент перемещается в противоположном направлении.
перекрытие полей
Соседние вертикальные поля перекрываются
Поля соседних элементов примут максимальное значение
Поля дочернего элемента будут переданы родительскому элементу.
Горизонтальные поля не перекрываются, а суммируются.
Боксовая модель для встроенных элементов
ширина
высота
не поддерживается
прокладка
Поддержка горизонтального заполнения
Вертикальное заполнение также поддерживается, но не влияет на макет.
граница
Поддерживает границы в четырех направлениях, но вертикальные границы не влияют на макет.
допуск
Поддержка горизонтальных полей
Не поддерживает вертикальную ориентацию
Стили, связанные с коробочной моделью
отображать
Установить тип отображения элемента
Необязательное значение
никто
Элемент не будет отображаться на странице и не займет позицию страницы.
блокировать
Элемент появится как блочный элемент.
в соответствии
Элемент будет отображаться как встроенный элемент.
встроенный блок
Элемент появится как встроенный блочный элемент.
Имеет как встроенные, так и блочные элементы.
Не занимайте линию
Можно установить ширину и высоту
видимость
Установите, будет ли элемент отображаться на странице
Необязательное значение
видимый
Значение по умолчанию, элемент отображается на странице нормально.
скрытый
Элемент не отображается на странице, но все равно занимает позицию на странице.
переполнение
Установите, как элемент обрабатывает содержимое переполнения.
Необязательное значение
видимый
Значение по умолчанию, содержимое переполнения не будет обрабатываться и отображаться за пределами родительского элемента.
скрытый
Переполняющий контент будет скрыт и не будет отображаться.
прокрутка
Добавьте горизонтальную и вертикальную полосы прокрутки к родительскому элементу.
Полосы прокрутки будут добавлены независимо от того, переполняется ли содержимое.
авто
Автоматически генерировать полосы прокрутки по мере необходимости
документооборот
Поток документов относится к местоположению на веб-странице.
Поток документов — это основа веб-страницы и самый нижний уровень веб-страницы. По умолчанию все элементы располагаются в потоке документов.
По умолчанию элементы располагаются в потоке документа слева направо и сверху вниз (в соответствии с нашими привычками письма).
блочный элемент
1. Элементы блока располагаются в документообороте сверху вниз.
2. Ширина блочного элемента в потоке документов по умолчанию составляет 100 % от родительского элемента.
3. Высота блочного элемента в потоке документов по умолчанию растягивается по содержимому.
встроенные элементы
1. Строковые элементы располагаются в потоке документов слева направо. Если одной строки недостаточно для размещения всех строчных элементов, переключитесь на следующую строку и продолжайте располагать слева направо.
2. В потоке документов ширина и высота встроенных элементов по умолчанию растягиваются в зависимости от содержимого.