CSS advanced (2) - ширина, высота настолько глубоки, вы действительно знаете

CSS

Этот раздел в основном извлекает и обобщает содержание главы 3 «Мира CSS» — поток, элементы и основные размеры. Бесспорно, "Мир CSS" - очень хорошая книга, но с точки зрения ощущения после прочтения этой главы, ZXX недостаточно, чтобы называться очень хорошим автором (сугубо личное мнение). Автор хочет ввести читателей в мир CSS, постоянно задавая вопросы и давая соответствующие решения. Тем не менее, сильная корреляция между каждым «индивидуумом» в мире CSS затрудняет разговор об определенной функции в отдельности, поэтому будет много вещей, которые вы не поймете, когда читаете это в первый раз, но я не беспокойтесь об этом, выучить 1+1 тоже было сложно, но после изучения 1*1, 1+1 кажется легким.

1. Внутренняя и внешняя коробка элемент

В HTML есть только два типа элементов: элементы блочного уровня и встроенные элементы.Элементы уровня блока имеют функцию «переноса строки», которая обычно используется для структуры (каркаса), а встроенные элементы могут отображаться в одной строке, которая обычно используется для отображения содержимого. Следует отметить, что элементы блочного уровня не являются элементами «display:block», и аналогичным образом встроенные элементы — это не просто элементы «display:inline». Однако эти два предложения можно поменять местами. Значит ли это, что элемент уровня блока содержит такие элементы, как «display:block/table/list-item»? Ни один!

Здесь нам нужно использовать общую настройку — display:inline-block, чтобы ввести концепцию, то есть каждый HTML-тег или элемент содержит внутренний и внешний слои. Особенность встроенного блока заключается в том, что «внешнее поле» использует свойства встроенных элементов — оно может отображаться вместе с другими встроенными элементами, в то время как «внутреннее поле» использует функцию адаптивной ширины блочных элементов и возможность установки высота контейнера.

С помощью концепции внутреннего и внешнего блоков элемента встроенного блока можно сделать вывод, что display:block=>display:block-block, который состоит из внешнего блока уровня блока и внутреннего блок-блока. уровневый ящик. То же самое справедливо и для элементов display:inline.

2. Специальное «дополнительное поле» в списке-пункте

display:list-item является атрибутом по умолчанию тега li, который обычно отображается в виде маленькой точки, которую нельзя выбрать с помощью F12.На самом деле, проверьте свойства list-style, вы обнаружите, что есть много не только маленьких точки, но и такие, как 1234. Это вид разметки для сортировки, но из-за его недисциплинированного характера мы обычно устанавливаем list-style в none. Все мы знаем, что элемент списка относится к «элементу блочного уровня», однако в силу своей особой природы элемент списка имеет «дополнительный блок» вне блочного элемента, научное название «маркерный блок». » (поле маркера), специализирующееся на Он используется для размещения полей меток, таких как точки и цифры, поэтому все элементы блочного уровня основаны на «основном поле блочного уровня», а элемент списка имеет специальное дополнительное поле. Что касается этой функции, лично у меня сложилось впечатление, что в реальных проектах элемент списка почти устарел.

3. Скрытая ширина: авто

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

  • Первый — это наиболее распространенные элементы блочного уровня.Ширина элементов, таких как теги div и p, по умолчанию составляет 100% родительского контейнера.Мы не будем обсуждать здесь высоту.Мы можем назвать эту функцию полным использованием доступного пространства.
  • Вторая особенностьСжатие дочерних элементов и перенос родительских элементов(Использование сжатия и переноса в исходном тексте кажется неуместным.) Типичными представителями являются плавающие элементы, абсолютное позиционирование, встроенные блочные элементы и табличные элементы. Эта функция будет расширяться один за другим позже, поэтому я не буду вдаваться в подробности здесь.
  • Сократите до минимума, это, скорее всего, появится в таблицах с автоматической разметкой таблиц. Если интересно, можете попробовать по этой ссылке (адрес)
  • Превышен лимит контейнера. Когда ширина родительского элемента фиксирована, ширина дочернего элемента, как правило, не превышает родительского элемента, за исключением некоторых особых случаев, таких как непрерывные и особенно длинные английские слова, или встроенный элемент установлен с пробелом :сейчас . Если интересно, можете попробовать по этой ссылке (адрес)

4. Анализ накрутки элементов

Обтекание элементов упоминается во второй статье предыдущего пункта.Почему мы должны говорить об анализе здесь, потому что характеристики обтекания элементов будут задействованы, когда мы будем говорить о плавании и позиционировании позже, поэтому здесь только некоторые понятия и концепции.Простое приложение. Во-первых, что такое «обертка» элемента, как следует из названия, это обертка и адаптивность, так называемая адаптивность,Относится к размеру внутреннего дочернего элемента, который указывает ширину родительского контейнера (обратите внимание, что спецификация здесь не обязательно указывается) определяется сам по себе. Другими словами, кажется, что внутренние дочерние элементы имеют max-width: ощущение «ширины родительского контейнера». Конечно, это правило не применяется, когда min-width дочернего элемента больше, чем отцовская ширина. Когда ширина содержимого дочернего элемента вот-вот превысит ширину родительского элемента, он будет автоматически перенесен.Звучит нормально, но на самом деле очень полезно, и когда это правило встречается с плавающим и абсолютным позиционированием, оно столкнется со многими ошибками. не очень нормально, и будет подробно описано, когда мы поговорим об этой части позже.

5. Используйте обтекание элементов для выравнивания по центру, когда текста меньше, и выравнивание по левому краю, когда текста больше.

Используя перенос элементов, мы можем сделать простое требование, такое как: мы хотим выровнять текст по центру, когда в элементе с определенной шириной мало текстового содержимого, и выровнять текст по левому краю, когда есть много текстового контента. Когда текста мало, внешнее поле встроенного блочного элемента является встроенным элементом, а встроенный элемент может быть центрирован в блочном элементе с помощью text-align: center. Когда ширина внутри элемента встроенного блока ==> ширина родительского элемента, строка будет автоматически перенесена. В настоящее время мы используем функцию элемента уровня блока внутри встроенного блока, чтобы добавить text-align:left к внутреннему окну, так что дочерние элементы относительно Общая производительность снаружи всегда центрируется в целом, в то время как его собственная производительность заключается в том, что текст находится слева.Окончательный код выглядит следующим образом.

<!-- 文字少居中显示，文字多居左显示 -->
<div class="box">
    <div class="content">少量文字</div>
</div>
<div class="box">
    <div class="content">许多文字许多文字许多文字许多文字</div>
</div>
<style>
.box{
    width: 200px;
    text-align: center;
    background: #1A95FF;
}
.box>.content{ 
    margin:20px 0;
    display: inline-block;
    text-align: left;
    background: #E6A23C;
}
</style>

Поскольку редактор уценки поддерживает язык тегов, мы можем напрямую просмотреть окончательный эффект следующим образом.(Советы: вы можете увидеть стили CSS, просмотрев элементы ниже прямо в браузере)

Несколько слов
много слов много слов много слов много слов

6. Объект значения ширины

Здесь кратко повторяются четыре слоя блочной модели: изнутри наружу: блок содержимого, блок заполнения, блок границы и прозрачный блок поля. В обычных условиях ширина напрямую применяется к блоку содержимого, что часто приводит к увеличению общей ширины и высоты элемента, когда мы добавляем отступы и границы во время макета. Если мы получим элемент с шириной: 100 пикселей, отступом: 10 пикселей, границей: 1 пиксель из черновика дизайна, нам, наконец, нужно рассчитать ширину содержимого через ширину - paddingLeft - paddingRight - boderLeft - borderRight. Это было бы слишком много хлопот. Поэтому CSS предоставляет модель рамки для облегчения нашей разработки. На самом деле то, что изменяется box-sizing:border-box, является объектом ширины. Первоначально ширина работала только с полем содержимого, но после использования рамки ширина = отступы + граница + содержимое.

7. Насколько широка ширина: 100% - что такое динамический расчет процентов

На самом деле в исходном тексте такой главы нет, только похожее содержание. Прежде всего, что означает этот вопрос? Давайте рассмотрим пример. Если ширина родительского элемента с функцией встроенного блока равна auto, он содержит два дочерних элемента A и B, ширина которых рассчитывается в процентах. Ширина A составляет 50%, а ширина B равна 50% Ширина AB также равна 50%, но содержание в AB не равно, так какой же эффект это будет иметь на самом деле? видеть значит верить.

<!-- 百分比计算问题 -->
<div class="f_box">
    <span class="box_a">我是A元素</span>
    <span class="box_b">我是B元素我是B元素</span>
</div>
<style>
.f_box{
    display: inline-block;
    height: 100px;
    background: #F56C6C;
    white-space: nowrap;
}	
.box_a{
    width:50%;
    background: #E6A23C;
    display: inline-block;
}
.box_b{
    width:50%;
    background: #67c23a;
    display: inline-block;
}
</style>

Поскольку редактор уценки поддерживает язык тегов, мы можем напрямую просмотреть окончательный эффект следующим образом.(Советы: вы можете увидеть стили CSS, просмотрев элементы ниже прямо в браузере)

Я элемент А Я элемент Б Я элемент Б

Причина приведенного выше результата заключается в том, что ширина двух дочерних элементов, содержащихся в родительском элементе, является шириной в процентах, поэтому их ширина зависит от ширины родительского элемента, умноженной на процент, а ширина родительского элемента автоматически, автоматически умножается на процент = NaN. Конечно, в реальном расчете это не так, и ширина родительского элемента была рассчитана автоматически. На самом деле это связано с порядком рендеринга браузера.По поводу механизма рендеринга я писал статью о процессе рендеринга браузера раньше.Конечно люди не так подробно как сегодня.В данном примере нужно только знать Содержимое DOM может отображаться сверху вниз и снаружи внутрь. Вы можете понять это, при рендеринге в родительский элемент,Ширина дочернего элемента = авто (фактически зависит от процента ширины родительского элемента), поэтому родительский элемент следует правилу изображения и текста и получает ширину области содержимого элементов A и B плюс один плюс в качестве своей окончательной ширины. С этой шириной, полученной автоматически, она рассчитывается с процентом дочернего элемента, а дочерний элемент соответствует ширине A. В этом примере содержимое A относительно невелико, поэтому ширина избыточна, а содержимое B больше, что превышает ширину области.

8.height: Почему иногда не работает 100%?

Проблема height:auto здесь не описана слишком подробно.Обычно из-за ограниченной ширины браузера, width:auto гораздо сложнее при проектировании, чем height.Некоторые люди могут подумать, что разрывы строк являются частью выделения высоты. На самом деле разрывы строк Это потому, что ширины не хватает, а изменение высоты — это лишь ее проявление. Для height:auto, поскольку высота каждого элемента записана, она может быть наложена.Конечно, некоторые специальные атрибуты, такие как float, проблема перекрытия, вызванная отступом и т. д., будут объяснены отдельно позже.

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

Почему это так? Потому что ответ дан в спецификации. Исходный текст описывается следующим образом: Если высота содержащего блока явно не указана и элемент не имеет абсолютного позиционирования, вычисляемое значение равно auto. То есть 100%*auto=NaN дочернего элемента, поэтому результат вычисления недействителен. Следовательно, элементы с неабсолютным позиционированием должны использовать высоту: 100%, и они должны постоянно добавлять высоту: определенные значения к родителю и родителю родителя, чтобы они вступили в силу.К счастью, таких случаев не так много.

Так почему ширина может поддерживаться? Поскольку ширина содержащего блока зависит от ширины элемента, его поведение "неопределенное", то есть разные браузеры могут иметь разные характеристики. К счастью, все об этом думают, и конечный эффект макета есть в каждом браузере. Ниже подобные. Это основа для процентного расчета, основанного на фактическом вычисленном значении содержащего блока.

9.height: 100% разница между элементами абсолютного позиционирования и элементами неабсолютного позиционирования

Только что было объяснено, что если процент высоты элемента с неабсолютным позиционированием вступает в силу, он должен отображать высоту объявленного родительского элемента. Итак, высота: насколько высока 100%? Мы уже знаем, что объект ширины является содержимым в обычной блочной модели, так же как и высота: 100% относится к содержимому-высота*100%? Ответ заключается в том, что это верно для дочерних элементов с неабсолютным позиционированием, но в элементах с абсолютным позиционированием процент вычисляется с использованием высоты содержимого родительского элемента + высоты заполнения в качестве основы. Это просто примечание, увидеть значит поверить.

<div class="box">
    <div class="child">高度100px</div>
</div>
<div class="box rel">
    <div class="child">高度160px</div>
</div>
<style>
.box {
    height: 160px;
    padding: 30px;
    box-sizing: border-box;
    background-color: #F56C6C;
}
.child {
    height: 100%;
    background: #E6A23C;
}
.rel {
    position: relative;
}
.rel > .child {
    width: 100%;
    position: absolute;
}
</style>

Поскольку редактор уценки поддерживает язык тегов, мы можем напрямую просмотреть окончательный эффект следующим образом.(Советы: вы можете увидеть стили CSS, просмотрев элементы ниже прямо в браузере)

высота 100px
высота 160 пикселей

10. Начальное исследование минимальной/максимальной ширины/высоты

Что касается того, что делает min/max-width/height, то это можно понимать буквально, указывая максимальный и минимальный базовые размеры элемента. Обычно используется в сценариях адаптивного макета. В отличие от основных размеров (ширина, высота), начальные значения min/max-width/height относительно сложны. Согласно авторскому тесту, начальное значение min-width/height — auto, а начальное значение max-width/height — none. Давайте напишем два примера, чтобы доказать, почему начальное значение min- равно auto вместо 0, а начальное значение max- равно none вместо auto.

Во-первых, это min-, этот пример будет очень легко понять, просто используйте следующий CSS, чтобы доказать это.

<style>
.box{
    transtion:min-height .3s;
}
.box:hover{
    min-height:300px;
}
</style>

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

<style>
.box{
    min-height:0px;
    transtion:min-height .3s;
}
.box:hover{
    min-height:300px;
}
</style>

При объявлении min-height равным 0 появляется эффект перехода. Так почему же по умолчанию авто не макс- это? Примеры заимствованного автора, известная ширина родительского элемента 400px, ширина дочернего элемента 800px, если вы не укажете max-width, а он дефолт в строке с догадкой auto, то значение max-width должно быть 400px, тогда по умолчанию значение max-width перекроет значение width, width: 800px не вступит в силу, да на самом деле и не так, поэтому можно прийти к выводам max-width: none.

11.min > max > !important

Оригинальное название, дальше! главное, помимо самого большого - титульная собака!

На самом деле это проблема охвата.«Самый большой» вес в мире CSS !important, верно? На самом деле, есть особые случаи, такие как min-,max-, о которых мы сегодня поговорим, если вы установите width: 100px и купите ему страховку!important ===> width:100px!important; встречайте max-width: 50px, окончательное значение ширины по-прежнему равно 50px, !important недействителен. Когда min-width>max-width, кто слушает в это время? Слушайте min-width, поэтому помните min>max>!important.

12. Используйте принцип максимальной высоты, чтобы реализовать эффект расширения элементов

"Развернуть и свернуть" — довольно распространенная операция на веб-страницах. Раньше я выполнял ее, изменяя высоту. Хотя она требует динамического расчета высоты, ее едва ли можно использовать. Теперь есть лучший способ изменить высоту с меньше. Значение становится "auto". Я делал это раньше и обнаружил, что анимации нет, потому что auto - 0 = NaN, поэтому анимации нет. Было бы неплохо сделать auto конкретным значением, например Я делал это раньше. Как уже упоминалось, значение высоты вычисляется динамически. Теперь мы можем использовать адаптируемость max-height для решения этой проблемы. Нам нужно только установить его на значение, которое гарантированно будет больше, чем высота расширенного содержимого. , потому что значение max-height больше, чем вычисленная высота. Когда значение велико, высота элемента является вычисленной высотой высоты. Увидеть — значит поверить


<!-- 展开效果 -->
<div class="father">
	<div class="son">1</div>
	<div class="son">2</div>
	<div class="son">3</div>
	<div class="son">4</div>
	<div class="son">5</div>
</div>
<style>
.father{
	max-height: 20px;
	overflow: hidden;
	transition: 0.5s linear;
	/*background: green;*/
}
.father:hover{
	max-height: 200px;
	/*background: red;*/
}
.son{
	height: 20px
}
</style>

Ссылка на эффект нажмите здесь

Не забывайте о первоначальном намерении, Фанг Дэ всегда

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

Категории