Вопросы о позиционировании CSS - использовать ли float, position или display? - PullRequest
Новая
       8

Вопросы о позиционировании CSS - использовать ли float, position или display?

0 голосов
/ 29 ноября 2018

Интересно, сможет ли кто-нибудь помочь мне понять немного больше о позиционировании? 1001 *

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

  1. Как профессиональные разработчики внешнего интерфейса регулярно используют позиционирование элементов?Они используют float, position: relative|absolute или используют flexbox или css grid?Или их комбинация?

  2. Используют ли профессиональные разработчики сброс CSS каждый раз, когда создают новый сайт?

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

Так что, если я использую inline-block, я получаю этот странный результат, где«World Guitars» не выровнен по логотипу, но чуть ниже. 

#logo {
  height: 60px;
  width: 50px;
  border: 2px solid #34495e;
  margin: 2px;
  align-self: center;
}

header p {
  font-family: Poppins;
  font-size: 2em;
  margin-left: 500px;
  align-self: center;
}

header p,
img {
  display: inline-block;
}
<header>
  <img src="images/logoGM.jpg" alt="logo" id="logo">
  <p>World Guitars</p>
</header>

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

header p {
  float: right;
  width: 900px;
}

header img {
  float: left;
}

section nav ul {
  clear: both;
}
<header>
  <img src="images/logoGM.jpg" alt="logo" id="logo">
  <p>World Guitars</p>
</header>

Наконец-то в position:relative, и я абсолютно потерян.

Могу ли я использовать относительное положение и присвоить значения моему сердцусодержание или это не рекомендуется?

Как мне это сделать в этом случае?

Спасибо !!

Ответы [ 3 ]

0 голосов
/ 29 ноября 2018

Отображение в сравнении с позицией в сравнении с плавающей точкой

В целом, я бы сказал, что современный способ позиционирования элементов - это использование display свойств - обычно с помощью display:flex или display:grid в родительских элементах для позиционирования их дочерних элементов.или используя display:block, display:inline или display:inline-block для элемента, чтобы позиционировать его самостоятельно.

Где бы вы использовали position:relative и position:absolute, если вам нужно вывести элемент из потока.Типичный случай, если вам нужно, чтобы некоторые элементы перекрывались.(т.е. если у вас есть три холста, которые вы кладете друг на друга).

Плавания были стандартным способом позиционирования элементов (то есть заставить что-то сидеть справа от страницы) в старые времена.Но теперь пришла гибкая коробка.

Однако - где вы, возможно, захотите использовать плавающие объекты, - это если вы хотите, чтобы текст оборачивался вокруг элемента - как это может быть в новостной газете.Это особенно важно, поскольку теперь HTML-элементы не обязательно должны быть прямоугольными. См. Этот пример.

Сброс CSS

Я их использую.Почему бы и нет.

В наши дни обычно вы можете использовать какую-то библиотеку стилей, например Material-UI или Bootstrap, но да.

Что касается того, что вы пытаетесь сделать.

Я бы использовал здесь flexbox.

Здесь вы использовали 'align-self', но align-self применяется только к дочернему элементу flex-родителя.

header {
  display: flex;
  flex-flow: row nowrap;
  /*By default this is row wrap - I like to always be explicit with it*/
  align-items: center;
  /*center vertically, (because the flex flow is row*/
}

img {
  border: solid 2px black;
  max-height: 100px;
  /*size the image*/
  object-fit: scale-down;
  /*make the image keep it proportions*/
}

p {
  font-weight: bold;
  font-size: 2em;
}
<header>
  <img src="https://www.designevo.com/res/templates/thumb_small/black-wing-and-brown-guitar.png" alt="logo" id="logo">
  <p>World Guitars</p>
</header>
0 голосов
/ 29 ноября 2018

Я люблю отвечать на такие вопросы!Не стесняйтесь добавлять дополнительные комментарии к вопросу.Источник: Я занимаюсь веб-разработкой около 8 лет.

Q1.Каким образом профессиональные разработчики внешнего интерфейса используют элементы позиционирования? Они используют float, position..relative, absolute..или они используют Flex? (Или css grid?) Или их комбинацию?

Краткий ответ - это комбинация всего, но это еще не все.Я бы сказал, что в большинстве случаев разработчики будут использовать CSS-фреймворк, такой как Bootstrap, Materialize или Foundation.Эти структуры предоставляют много абстракций при написании всего самостоятельно, например, просто определяя строки и столбцы с помощью классов, и простые классы, чтобы определить, как эти столбцы ведут себя при изменении размера экрана.CSS Grid имеет много тех же концепций, что и эти фреймворки, но я бы сказал, что он менее доступен, если вы только начинаете.

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

Q2.Используют ли профессиональные разработчики CSS reset каждый раз, когда создают новый сайт?

Это зависит.Многие фреймворки включают в себя перезагрузку CSS, чтобы ваш веб-сайт выглядел одинаково во всех браузерах.Я бы вообще сказал, что это экономит время на исправление таких вещей, как нечетные тени кнопок в Firefox или дополнительные границы ввода, появляющиеся в Safari.

Что касается вашего кода, я думаю, что это идеальное приложение для flexbox!Вы сказали «название справа», поэтому я не уверен, что это именно то, что вы ищете. 

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  height: 60px;
  width: 50px;
  border: 2px solid #34495e;
  margin: 2px;
}

.title {
  font-family: Poppins;
  font-size: 2em;
  margin: 0;
}
<header>
  <img src="https://placeimg.com/50/60/any" alt="logo" class="logo">
  <p class="title">World Guitars</p>
</header>
0 голосов
/ 29 ноября 2018

Это зависит от ваших потребностей и намерений.В единицах измерения CSS имеет абсолютные размеры (например, сантиметры и т. Д.) И единицы измерения, которые масштабируются относительно размера шрифта или относительно размера области просмотра, внутри которой вы работаете.Там нет правильной или неправильной единицы для использования, это зависит от того, что вам нужно.Подробности о единицах приведены здесь: https://www.w3schools.com/cssref/css_units.asp

С точки зрения того, использовать ли flexbox или нет, это может быть очень полезным инструментом, если вы хотите, чтобы элементы на странице могли динамически масштабироваться в зависимости от устройства.или размер окна, в котором они отображаются. Вы также можете использовать его для создания адаптивных страниц без javascript, с комбинацией flex-wrap и настройкой минимальной ширины для элементов.Но не все проекты выигрывают от гибкости, и иногда вам нужны элементы, которые не уменьшаются и не растут в зависимости от устройства, на котором они отображаются.Сетка старше, чем гибкая, но все же полезная.Он очень часто используется с начальной загрузкой.

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

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

...