Результат 100%
.block1{
width: 196px;
height: 36px;
}
.block2{
width: 56px;
height: 36px;
padding: 10px 40px ;
margin: 20px 120px;
}
.block3{
width: 166px;
height: 26px;
margin: 20px;
padding: 5px;
border-width: 12px;
}
100%
.block {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
padding-bottom: 15px;
width: 196px;
}
.block2 {
margin-top: 20px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 25px;
padding-top: 10px;
margin-left: 120px;
width: 56px;
}
.block3 {
border: 12px solid;
margin-top: 20px;
margin-left: 20px;
padding-left: 5px;
padding-top: 5px;
width: 171px;
height: 16px;
}
Позиционирование было в Знакомство с CSS правда очень кратко и рассказали только про значение absolute. Поэтому я выполнила задание используя position: absolute 
Подскажите, пожалуйста, как решается противоречие между заданными размерами блока и его внешними отступами?
.block2 {
width: 96px;
margin: 20px 120px;
padding: 10px 0 25px 40px;
}
С одной стороны задана ширина блока 96px, с другой стороны указан размер отступа от блока слева и справа 120px. Там же справа явно не 120px
Указывайте отступ только слева.
Я не совсем корректно задал вопрос. Такой вариант, отрывок который я разместил, указал DevilInRed_ru 20 февраля, и его вариант верный, не дает ошибок. Но не понятно почему указание margin: 20px 120px не растягивает границы блока вправо до отступа от окна браузера на 120px? Ведь насколько я помню если классы приоритетов равны, то работает тот селектор который ниже. А значение внешнего отступа стоит ниже значения границы блока
Внешние отступы не влияют на ширину и высоту блока, а вот внутренние - да, они влияют.
1 лайк
Пардон. Это не селектор. Это свойство. Но все равно, вопрос остался: Почему свойство ширины блока менее приоритетно чем значение внешнего отступа?
Я понял. Спасибо
Всем доброго времени суток! Вот такое решение получилось у меня. Задание выполнено на 100%. Правда немного схитрил (использовал св-во которое не было изучено в уроках ранее).
.block1 {
height: 36px;
width: 196px;
margin-bottom: 20px;
}
.block2 {
height: 60px;
width: 140px;
margin-left: 120px;
margin-bottom: 20px;
box-sizing: border-box;
padding-left: 40px;
padding-top: 10px;
}
.block3 {
border-width: 12px;
height: 60px;
width: 200px;
margin-left: 20px;
box-sizing: border-box;
padding-left: 5px;
padding-top: 5px;
}
1 лайк
Мой вариант ( корявый как не в себя, боролся с паддингами)
/* Базовые стили, изменять не нужно */
html,
body {
margin: 0;
padding: 0;
}
body {
width: 540px;
min-height: 290px;
padding-top: 20px;
padding-left: 20px;
font-size: 14px;
line-height: 1.5;
font-family: “Arial”, sans-serif;
color: white;
background-color: #3a78a1;
background-image: url(“grid.png”);
background-repeat: repeat;
background-position: -80px -80px;
}
.block {
background-color: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}
.block1 {
width: 196px;
height: 36px;
}
.block2 {
width: 96px;
height: 46px;
margin-top: 20px;
margin-left: 120px;
padding-top: 10px;
padding-left: 40px;
}
.block3 {
border: 12px solid white;
width: 171px;
height: 26px;
margin-top: 20px;
margin-left: 20px;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
.block1{
width: 196px; height: 36px;
}
.block2{
margin: 20px 280px 20px 120px;
padding: 10px 20px 10px 40px;
height: 36px;
}
.block3{
border: 12px solid white;
margin: 20px 320px 20px 20px;
padding: 5px 20px 8px 5px;
height: 23px;
}
А я сама не справилась, в этом задании.
Когда сравниваете, ошибка показывает в третьем блоке. Смотрите образец на третий блок и результат, там видно, что ширина и высота не совпадают, их нужно подбирать. Когда подберёте так, чтобы одинаковые были, то что внутри рамки. Потом подбираем, что для меня довольно сложно подбирать каждый пиксель, так чтобы не отличались ни на один. Подобрали, потом смотрим на размер рамки, после того как подобрали размер содержимого блока, он у вас толщиной меньше чем на образце, начинаем опять подбирать пиксели, так чтобы размер визуально не отличался от размера на образце. Если вы сами подбирали всё выше, то должны были увидеть где у вас ошибка.
Лично я более менее поняла, только после того как просмотрела написанное всеми и подумала что к чему.
вам удовольствие приносит общаться с постами, которым 2+ года? вам не ответят же и не увидят. вообще у меня такое ощущение, что вы учитесь не по программе https://htmlacademy.ru/program
как-то то кексби, то js, то в блоках. материал и так не самый простой, так еще из разных тем читаете.
Я просто не обратила внимание, что тема 2015 года. Я ввожу в поисковик название темы, то что первое выскакивает в поисковике, то и рассматриваю, как делали другие. Если посмотреть, то не одна я писала в этом году в этой теме, значит наверное не одна я так просматриваю.
Вы правы, не по программе иду, вначале шла по программе, потом решила там, где открываешь курсы, по главам, так как то мне удобнее показалось по этому порядочку. По программе с одной главы в другую перепрыгиваешь, получается то тяжелее, то совсем лёгкие. Прошла начальный уровень полностью, теперь начинаю средний. Да и разве это важно, по программе, или по главам, ведь там же в курсах говорилось, что можно изучать как удобнее будет. Вот я и выбираю так как мне удобнее, рассматриваю одно, другое, теперь у меня более менее сложилось мнение что к чему. Если что-то не понятно, могу ещё дополнительные уроки рассматривать на других сайтах, рассматриваю несколько справочников, смотрю всё ли совпадает в них, отбираю для себя лучшие, в ССS к примеру псевдоклассы не везде совпадают на сайтах.
у вас не будет комплексного понимания, если будете прыгать. потому что зачастую ответ на более позднюю задачу решается легче, если применять предыдущие знания. я бы вообще предложил изучить сначала js (хотя бы логику, без DOM), уже потом изучать css и html академии, потому что академия и так дает знания в достаточно скомканном виде, так еще и вы себе задачу усложняете, прыгая по темам.
Вот когда по программе, то как раз прыгаешь, а когда по порядочку идёшь, то слаживаеться небольшое представление. По программе с яво скриптом начального уровня, я бы ещё познакомилась не скоро, а так я уже познакомилась поверхностно. Вот как я сейчас иду, прошла начальный уровень, теперь средний проходить начинаю А если просмотрите ниже начатые ниже, то это было по программе, а не по порядку, именно поэтому я решила по главам.
Ну иногда когда создают новые задания, я возвращаюсь назад, чтобы их выполнить. А иногда возвращаюсь назад, чтобы пройти ещё раз и лучше запомнить пройденное.
Сейчас у меня построение сеток идёт, а начатые декоративные эффекты, оформление текста, они были по программе.
Насчёт знакомства с яваскриптом, он как раз по главам в нужном месте стоит, вторая глава. Но всё таки там правильнее стоит, знакомство с html и CCS оно и должно быть первым, если бы яво скрипт был первым, я бы не поняла что к чему.
поверьте, вы и сейчас не понимаете, это иллюзия обучения такая. все равно как если бы человеку сказали, что молния и гром это физика, а не бог. а как там внутри происходит, этого человек не понимает, поэтому и пишу про js. ток я имею ввиду конечно нормальное обучение js, а не интерактивные курсы.
1 лайк