| Kosten | Среда, 14 Февраля 2018, 20:17 | Сообщение 1 |
| В этом уроке мы поговорим об использовании float для размещения объектов в CSS. Свойство float позволяют помещать элементы уровня блока по разные стороны. Это позволяет нам создавать всевозможные строение, в том числе боковые панели, много колоночные страницы, сетки и статьи в стиле журнала, где текст будет вокруг изображения.
Свойство float имеет 4 значения, которым относятся left, right, none и значение, что будет идти по умолчанию. Это будет означать, что элемент не будет плавать. И наконец Inherit, который принимает значение float из родительского элемента, где CSS float определяет, что элемент должен быть выведен из нормального документа и помещен по левую и также можно по правую сторону, где будет содержаться блок блока. Затем текст и встроенные элементы обернут вокруг этого элемента.
Первое, что мы должны знать о плавающих элементах, это то, почему этот метод был изобретен в первую очередь. Первоначальная концепция float была предназначена для обертывания текста. Идея заключалась в том, чтобы взять элемент уровня блока, такой как изображение и установить его для выравнивания влево или вправо соответственно, позволяя обтекать текст.
Есть также несколько других свойств, которые следует учитывать перед погружением в любые случаи кодирования или примеры float. Они включают:
float: left - перемещайте элемент влево, позволяя обтекать текст с правой стороны
float: right - переместите элемент вправо, позволяя обтекать текст с левой стороны
float: none - превратится в плавание
В этом уроке мы обсудим создание структуры столбцов с помощью float. Мы рассмотрим свойство float CSS, свойство clear и методы компоновки для создания столбцов и центрирующих элементов с использованием полей.
Поправки используются для обертывания текста вокруг изображений, а также могут использоваться для создания шаблонов веб макета. Скажем, у вас есть логотип или изображение профиля рядом с фрагментом текста, довольно распространенным видом.
Код img {
float: right;
margin: 0 0 9px 9px;
}
Это основная функция float, что теперь его аналог clear, это свойство, которое будет задействовано вокруг элемента, что появится после плавающего блока. Чтобы этого не случилось, вы можете задействовать свойство clear, что перестает плавать.
Лучший способ учиться, а это увидеть элемент в действии. Один из наиболее распространенных способов сделать, это посмотреть на абзац текста и поместить его рядом с изображением. Мы собираемся просто захватить некоторый текст Lorem Ipsum, сделанный на месте и поместить его в изображение с правым краем.
HTML будет выглядеть так:
Код <p><img src="http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/LEmGGoRbTr_xy934ztIvtA.png" width="135" height="151">
Здесь первое описание
Также можно сделать в несколько блоков, как второй текст.
</p>
Выберите любую фотографию, которую хотите разместить в интернете и заполните предыдущий абзац любыми словами, чтобы у нас был базовый образец. Следующий код уже имеет изображение и текст. Это основные элементы на которые мы будем помещать float.
Код img {
float: right;
margin: 0 0 9px 9px;
}
Это повлечет за собой возможность переноса текста и завершения кода. Поиграйте с ним, чтобы узнать, насколько это полезно и применять к этому шаблону различные элементы. После этого вы сможете применить Float Properties ко всем будущим проектам.
Демонстрация:
| | Страна: (RU) |
| |
| Kosten | Среда, 14 Февраля 2018, 20:53 | Сообщение 2 |
|
| Поплавки и очистка используются, чтобы текст мог обтекать объект. С более сложным использованием плагины могут использоваться для создания сложных макетов, включая столбцы и сетки.
overflow: hidden имеет еще один интересный побочный эффект: он создает новый контекст позиционирования.
Код <img src="#" alt=""> <p>…</p>
CSS
Что если мы хотим, чтобы текст не обертывался вокруг изображения, а вместо этого создавал два столбца. Следуя приведенному выше руководству, мы знаем, что мы могли бы просто floatсоздать абзац для создания столбцов.
Используя overflow: hiddenв абзаце, мы можем создавать простые столбцы. Это не истинные столбцы, а больше группы без обертывания. Хорошо когда вы не знаете насколько широко будет изображение и вы не хотите, чтобы абзац обернулся ниже.
CSS
Код p {
overflow: hidden;
}
| | Страна: (RU) |
| |
