2014-02-02 2 views
0

Я видел, что box-sizing: border-box избежит вопроса расчета ширины. У меня есть сомнения, что почему на * какПочему размер коробки на * вместо тела

*, *:before, *:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Что такое проблема определяется, как показано ниже.

body { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Не распространяется на все дочерние элементы? Зачем?

+1

См. Здесь: http://stackoverflow.com/questions/11250259/why-are-css-styles-not-inherited-by-html-form-fields * делает стиль применимым ко всем элементам, поэтому один не нужно указывать размер окна: наследовать. – ryanlutgen

ответ

1

Он будет применен к всем элементам в документе, а не только элементу кузова.

Таким образом, вам не нужно добавлять размер окна во все правила стиля, в которых вам требуется размер окна.

Просто имейте в виду, что это может повлиять на производительность страницы, используя *. Если вам это нужно только для нескольких элементов, лучше указать размер окна для этих немногих.

+0

Хорошо, но могу ли я определить их в элементе body вместо *, что может быть проблемой производительности. –

+1

@FizerKhan в этом случае влияет только на элемент тела. Этот параметр не будет наследовать дочерние элементы, поэтому вам необходимо установить все элементы, которые вам нужны, с помощью этого правила. Вы можете, например, «собрать» все в одном определении: 'body, # box1, # box2 {box-sizing: ...;}' – K3N

+0

Кен знает, о чем он говорит. Идите сюда и убедитесь сами. http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-sizing – jimeast

Смежные вопросы