Второе испытание 16/23

Курсы §10. Блочная модель документа
41
16/23 
/* Базовые стили, изменять не нужно */
html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 520px;
  min-height: 270px;
  padding: 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;
}

input[type="text"] {
  height: 38px;

  font-size: 18px;
  font-family: inherit;

  border: 2px solid #cccccc;
  border-radius: 5px;
}

.block {
  background-color: rgba(0, 255, 255, 0.2);
}

/* Пользовательские стили */
input {
  box-sizing: border-box;
  padding:0 0 0 10px;
}
.block1 {
  border: 2px solid white;
}
.block2 {
  padding: 20px; 
  margin: 18px;
}
42

Всех приветствую, я тут новенький … Подскажите насколько не приемлемо мое решение:
/* Базовые стили, изменять не нужно */
html,
body {
margin: 0;
padding: 0;
}

body {
width: 520px;
min-height: 270px;
padding: 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;
}

input[type=“text”] {
height: 38px;

font-size: 18px;
font-family: inherit;

border: 2px solid #cccccc;
border-radius: 5px;
}

.block {
background-color: rgba(0, 255, 255, 0.2);
}

/* Пользовательские стили */
.block {
padding: 20px !important;
}

.block1 {
border: 2px solid white;
padding: 18px !important;
}

input[type=“text”] {
padding-left: 10px;
box-sizing: border-box;
}

43

попробуйте сделать без !important, используя внешний отступ

44

спасибо, попробую.

45

Подскажите кто-нибудь, я понимаю как задан цвет целиком для класса block, а каким образом он ранжируется здесь на два цвета? Где это прописано, что цвет block1 светлее, чем цвет block2??? http://prntscr.com/mqe8s1

46

обратите внимание, что цвет задан в формате rgba, т.е.
background-color: rgba(0, 255, 255, 0.2);
и вот это 0.2 это прозрачность, которая задваивается при наложении слоев.
по факту цвет один. но т.к. он прозрачный, то они накладываются друг на друга искажая восприятие.

47

Спасибо, теперь более или менее понятно

48 
/* Базовые стили, изменять не нужно */

.block {
background-color: rgba(0, 255, 255, 0.2);
}

/* Пользовательские стили */
.block-1 {
width: 480px;
height: 120px;
border: 20px solid white;
}

.block-2 {
height: 40px;
width: 400px;
margin: 20px auto;
padding: 20px;
}

.text-input {

box-sizing: border-box;

}

49 
.block-1 {
  border: 20px solid white;
}

.block-2 {
  width: 400px;
  padding: 20px;
  margin: 20px;
}

.text-input {
  box-sizing: border-box;
}
1 лайк
50

.block-1 {
border: 20px solid white;
}

.block-2 {
margin: 20px;
padding: 20px;
}

.text-input {
box-sizing: border-box;
}

51

100% код
/* Базовые стили, изменять не нужно */
.block {
background-color: rgba(0, 255, 255, 0.2);
}

/* Пользовательские стили */
.block-1 {
border: 20px solid white;
}

.block-2 {
padding: 20px;
margin: 20px;

}

.text-input {
box-sizing: border-box;
}

52

100%

/* Базовые стили, изменять не нужно */
.block {
background-color: rgba(0, 255, 255, 0.2);
}

/* Пользовательские стили */

.block-1 {
border: 20px solid white;
width: 480px;
height: 120px;
}

.block-2 {
margin: 20px;
padding: 20px;
}

.text-input {
box-sizing: border-box;
width: 400px;
}

53

.block-1 {
border: 20px solid white;
width: 480px;
height: 120px;
}

.block-2 {
margin: 20px;
padding: 20px
}

.text-input {
box-sizing: border-box;
}
как?