Позиционирование элементов на веб-странице может иногда казаться невероятно трудным, особенно с учетом всех доступных методов. И варианты продолжают расширяться, с появлением flexbox и макетов сетки, а также классных вещей, таких как CSS3 преобразования, которые также могут быть использованы для удивительных трюков макета .
На этом форуме dCode эксперт по CSS Пол О’Брайен (Paul O’Brien) отвечает на все вопросы о хитрой теме позиционирования CSS — от плаваний и относительного, абсолютного и фиксированного позиционирования до отображения таблиц и даже flexbox.
Если у вас есть какие-либо вопросы о позиционировании CSS, пожалуйста, присоединяйтесь к разговору !
О dCodes
Наш форум dCodes — это темы, в которых присутствует гость, который глубоко погружается в предметную область. В отличие от наших сессий вопросов и ответов , которые длятся всего час, темы dCode остаются открытыми в течение длительного периода, так что вопросы можно обсуждать более подробно и более подробно. Вы можете задавать вопросы или просто сидеть сложа руки и следить за временем, пока гость отвечает на вопросы и публикует интересующий контент.
О Павле
Пол О’Брайен — широко признанный эксперт по всем вопросам CSS. Он стал соавтором знаменитого тома Ultimate CSS Reference , и в течение многих лет был ориентиром для многих разработчиков, блуждающих в темных лесах CSS.
Слышали ли вы, что в них есть поплавки с overflow: hidden Именно Пол раскопал эту технику в тот день .
Если что-то можно сделать в CSS, Пол будет знать, как это сделать. Он даже регулярно указывает, как делать то, что люди считали невозможным .
Пол Автор темы
Чтобы начать обсуждение, Пол создал небольшую демонстрацию, которая просто помещает маленькое красное поле с фиксированной шириной и высотой 50 пикселей справа от страницы. HTML в основном выглядит следующим образом:
<div class="wrap">
<div class="box">Box</div>
</div>
Прежде чем вы посмотрите на демо, найдите время и посмотрите, сколько способов вы можете придумать для этого?
Вы можете сразу подумать о трех способах сделать это, но, углубившись в детали, вы обнаружите, что на самом деле существует много способов сделать это, и в демоверсии я остановился на 15, но я не удивлюсь, увидев довольно много способы, которыми я не думал о появлении!
Вот мое демо и посмотрите, можете ли вы придумать другие способы сделать это:
Цель этого упражнения состояла в том, чтобы просто показать, что в CSS часто есть много способов, с помощью которых можно достичь макета, и часто решение зависит от того, какой метод лучше всего использовать. Я часто говорю, что «прелесть CSS в том, что есть много способов сделать то же самое», но трудность для начинающих заключается в том, чтобы знать, какой путь подходит для работы.
Теперь, когда вы посмотрели на демо (честно говоря), сколько из вас подумали или поняли самый первый метод в демо?
Это был самый простой и самый простой ответ и, вероятно, один из первых уроков, усвоенных и забытых большинством людей, и я предполагаю, что немногие из вас подумают об этом.
.box {margin:0 0 0 auto; width:50px; height:50px;background:red;}
Это выглядит достаточно просто, но как это поставить поле справа от страницы?
Мы все знакомы с margin:0 automargin:0 0 0 auto; переместить коробку вправо?
Чтобы ответить на этот вопрос, вам нужно обратиться к спецификациям, но упрощенный пример — ширина + отступ + поля = ширина содержащего блока.
Следовательно, для элемента фиксированной ширины, который имеет правое поле, равное нулю, тогда левое поле должно равняться расстоянию, оставленному до левого края содержащего блока. Это достигается с margin-leftauto
Если вместо этого вы поместите поле слева от нуля, то поле переместится в левую сторону, а на языках ltr
и, наконец, если вы установите margin-leftmargin-rightauto
(Я упростил ответ, поэтому прочтите спецификации для получения полной информации и понимания.)
Я упоминаю эту технику автоматического наложения, потому что это выдающаяся техника при использовании flexbox, и автоматическое наложение на flex-item Кстати, не очень хорошо известно, что margin:autoцентрировать элемент как по горизонтали, так и по вертикали в пределах контейнера фиксированной высоты и ширины .
В любом случае этого достаточно для наценки и посмотрите остальные примеры в первой демонстрации, и если вы можете придумать больше способов сделать это, не стесняйтесь размещать сообщения или обсуждать.
Если вы не понимаете ни одного из примеров, пожалуйста, обсудите, и мы можем уточнить.
Обратите внимание, что эта тема не просто об этом первом посте, а в основном как предмет для обсуждения, поэтому если у вас есть темы, которые вы хотите обсудить, пожалуйста, продолжайте.
Я с нетерпением жду ответа или быть сбитым с толку вашими запросами. Я не могу гарантировать, что знаю все ответы, но я уверен, что, если я не знаю ответа, кто-то другой будет иметь хорошую идею и участвовать в разговоре.