предисловие
Я очень нервничал во время моего первого интервью сегодня, я встретил очень хорошего интервьюера, который заставил меня чувствовать себя очень сердечно. Когда интервьюер задает мне вопрос, который я не понимаю, интервьюер просит меня пойти в Baidu и объяснить ему это после того, как я понял. Однако я не могу найти его на Baidu, поэтому я могу только смущенно сказать «нет». и попросите интервьюера объяснить мне эту проблему. Также было приятно пообщаться с интервьюером в конце интервью и дать мне хороший совет. Ниже я дам вам мои вопросы интервью!
Вы знаете, что означают эти три параметра в flex: 7 1 100px?
Поясним это на примере!
Свойства расширения и сжатия дочернего элемента flex
- Первый параметр означает: flex-grow определяет коэффициент увеличения элемента, по умолчанию 0, то есть если осталось место, то не будет увеличиваться
- Второй параметр означает: flex-shrink определяет коэффициент сжатия элемента, по умолчанию 1, то есть если места недостаточно, элемент сожмется
- Третий параметр означает: flex-basis вычисляет, есть ли у элемента избыточное пространство, прежде чем выделять лишнее пространство для двух вышеуказанных свойств.Значение по умолчанию — auto, то есть размер самого элемента.
1. Расширение
<style>
.item {
display: flex;
width: 500px;
height: 100px;
}
.item0 {
width: 50px;
flex: none;
background-color: red;
}
.item1 {
flex: 1 1 50px;
background-color: green;
}
.item2 {
flex: 7 1 100px;
background-color: blue;
}
</style>
<body>
<div class="item">
<div class="item0">0</div>
<div class="item1">1</div>
<div class="item2">2</div>
</div>
</body>
См. приведенный выше эффект, чтобы проанализировать результаты.
Почему для item0 установлено значение 50px или 50px?
Почему для item1 установлено значение 50 пикселей, как оно может стать 87,5 пикселей?
Почему для item2 установлено значение 100 пикселей, как оно может стать 362,5 пикселей?
когда空间充足час,flex子项Формула расчета ширины:自身的基础宽度 + 容器剩余宽度 *（自身伸张比例 / 所有子项伸张比例之和), обратите внимание на две аббревиатуры
- flex:none — это сокращение от flex: 0 0 auto
- flex:num — это сокращение от flex:num 1 0%. Например, flex: 1 => flex: 1 1 0%.
补充:在空间充足情况下，flex-basis的优先级高于width属性。当设置的flex子项是flex：1,width:100px时（等价于 flex: 1 1 0% ），那么0%会覆盖掉原来的width：100px属性，0%相当于width：0px
Мы устанавливаем общую ширину контейнера в элементе равным 500px, элементы item0, itme1 и item2 в контейнере сначала занимают свою базовую ширину, а оставшаяся ширина в контейнере увеличивается на коэффициент увеличения.
Оставшаяся ширина: 500 - 50 - 50 - 100 = 300
Ширина самого item0 устанавливается равной 50px, flex: none эквивалентно flex: 0 0 auto, все item0 не участвует в увеличении или 50px
ширина элемента0: 50 + 300*( 0 / (0+1+7)) = 50
Ширина самого item1 устанавливается в значение третьего параметра во flex: 1 1 50px из 50px.В случае расширения нам нужно смотреть только на первый параметр.Первый параметр item0 равен 0, а первый параметр item1 Первый параметр равен 1, а первый параметр item2 равен 7, поэтому оставшаяся ширина контейнера будет разделена на 8 частей, item1 занимает одну часть, которая составляет 37,5 пикселей, а общая ширина item1 равна 87,5. пикс.
ширина элемента 1: 50 + 300 * ( 1 / (0+1+7)) = 87,5
Точно так же можно получить Item2, Item2 занимает 7 копий, что составляет 262,5, а общая ширина Item2 равна 362,5.
ширина элемента2: 100 + 300 * (7/(0+1+7)) = 362,5
обновленный контент
Вопросы в комментариях: Давайте подумаем об этом вместе!
Давайте ответим на этот вопрос (я долго думал об этом и не придумал, и, наконец, понял это, посоветовавшись с большим парнем!)
Текст имеет ширину, так какова ширина текста? Сначала я подумал, что размер текста по умолчанию
16px, поэтому ширина16px, но на самом деле это не так. Позже я узнал, что я могу добавить к тексту тег span, а затем проверитьspanРазмер метки найден, а ширина текста примерно равна9.39.
Во-первых, есть два случая: первый — это добавление текста, а числа зарезервированы.1и,2, в этом случае нужно заранее знать ширину шрифта, чтобы правильно ее рассчитатьitem1иitem2ширина. Он по-прежнему удовлетворяет формуле расчета!
Ширина текста станет шириной item1 и item2.
Оставшаяся ширина: 500 - 50 - 9,39 - 9,39 = 431,22
ширина элемента0: 50 + 431,22*( 0 / (0+1+7)) = 50
ширина элемента 1: 9,39 + 431,22* ( 1 / (0+1+7)) = 63,29
ширина элемента 2: 9,39 + 431,22* (7/(0+1+7)) = 386,71
Второй случай - удалить текст,item1иitem2ширина0;
Оставшаяся ширина: 500 - 50 - 0 - 0 = 450
ширина элемента0: 50 + 450*( 0 / (0+1+7)) = 50
ширина элемента 1: 0 + 450* ( 1 / (0+1+7)) = 56,25
ширина элемента2: 0 + 450* ( 7 / (0+1+7)) = 393,75
Я верю, что все так же внезапно просветляются, как и я!
2. Сузьте ситуацию
<style>
.item00 {
display: flex;
width:300px;
height: 100px;
}
.item0 {
width:300px;
background-color: red;
}
.item1 {
flex: 1 1 100px;
background-color: green;
}
.item2 {
flex: 2 2 200px;
background-color: blue;
}
</style>
когда
空间不充足час,flex子项Формула расчета ширины:自身的基础宽度 - 超出宽度 *(自身宽度*收缩比例/总权重）
Превышать ширину=300+100+200-300=300
Общий вес=300 * 1+100* 1+200*2=800 //Понять, как получается общий вес
Ширина элемента 0 = 300 - 300 * 300 * 1/800 = 300 - 112,5 = 187,5; (когда используется только атрибут ширины, значение атрибута flex равно 0 1 auto, и оно будет уменьшаться при недостатке места)
ширина 1=100 - 300 * 100*1/800 =100 - 37,5=62,5;
ширина п.2=200 - 300*200*2/800=200-150=50;
Обратите внимание на аббревиатуру flex:num, расширение эквивалентно flex:num 1 0%, flex-basis в это время равен 0%, а не заданной ширине; вес этого элемента равен 0 при расчете общего веса
Изменить рамку аватара на круг?
оригинальный стиль cssИзмененный стиль css
Приходит вопрос, интервьюер спросил меня, почему 20px — это нормально, 24px — это нормально, так сколько же px наиболее подходит? (Смысл здесь в том, что нельзя писать число произвольно) Как вы это придумали?
отвечать:
Длина и ширина равны, а радиус границы равен половине длины (ширины). Поскольку длина и ширина этого аватара составляют 32 пикселя, наиболее подходящим является 16 пикселей.评论区指出使用border-radius:50% 更好
Обход вложенных объектов
Проблема: Напишите функцию для получения значения в объекте
666, необходимо использоватьstr = 'a.b.c';
- метод первый
const obj = {
a:{
b:{
c:666
}
}
}
var str = 'a.b.c';
const getData = ()=>{
var newArr = str.split('.').reduce((o,s)=>{ return o[s]},obj)
return newArr
}
console.log( getData());
- Способ второй
const obj = {
a:{
b:{
c:666
}
}
}
var str = 'a.b.c';
const getData=(obj,str)=>{
str.split('.').forEach(element =>{
obj= obj[element]
})
return obj;
}
console.log(getData(obj,str));
Смысл этого вопроса в том, чтобы узнать, как получить значение, содержащееся в объекте.
Есть два метода:
- существует
[]Способ включения строкового выражения в суффикс следующий:obj[a] - можно использовать
.Обозначения, такие как:obj.a
Вышеупомянутое решение заключается в использовании[]метод решения этой проблемы.
Суммировать
Благодаря этому интервью я узнал о своих недостатках, а также получил много полезных советов из разговора с интервьюером. Продолжать! спешить спешить!
Если есть лучший способ обхода вложенных объектов, вы можете оставить сообщение в области комментариев! Давайте учиться друг у друга вместе!
Наконец, я дам вам предложение для проекта: лучше всего сделать проект с вашей собственной идеей, потому что интервьюер предпочитает знать вас по проекту.
本人大三，正在学习前端知识！