Как в данном случае работает наследование?

tigrus2014 · November 14, 2016

Здравствуйте! Есть такой код css

html, body {width:100%; padding:0; margin:0;}
body {font: 14px/25px Arial, Helvetica, sans-serif;font-family: 'Open Sans', sans-serif;background:#F6F8F7;padding:0 40px ;}
body .wrap-body{}

И собственно HTML (весь не пишу только часть)

<body>
<div class="wrap-body">
	<div class="header">
		<div id='cssmenu' class="align-right">
			<ul>
			   <li class="active"><a href='index.html'><span>zSawyer</span></a></li>
			   <li class=' has-sub'><a href='archive.html'><span>Blog</span></a>
				  <ul>
					 <li class='has-sub'><a href='#'><span>Item 1</span></a>
						<ul>
						   <li><a href='#'><span>Sub Item</span></a></li>
						   <li class='last'><a href='#'><span>Sub Item</span></a></li>
						</ul>
					 </li>
					 <li class='has-sub'><a href='#'><span>Item 2</span></a>
						<ul>
						   <li><a href='#'><span>Sub Item</span></a></li>
						   <li class='last'><a href='#'><span>Sub Item</span></a></li>
						</ul>
					 </li>
				  </ul>
			   </li>
			   <li><a href='#'><span>Gallery</span></a></li>
			   <li><a href='single.html'><span>About</span></a></li>
			   <li class='last'><a href='contact.html'><span>Contact</span></a></li>
			</ul>
		</div>
	</div></div>
</body>
</html>

Спрашивается зачем нужно и HTML и Body давать width 100%? Если я не ошибаюсь свойство от html перейдёт к body и body будет тоже width 100%? А от него и унаследуется body .wrap-body{}? Так?

Единственное что приходит в голову, что какому-то div в коде ( уже в теге body) дано позиционирование. Вот если слои absolut или relative, они ( и от них) наследуются свойства?

SelenIT · November 15, 2016

Странный код. 100% ширины для body плюс горизонтальные padding-и по 40px — разве это не приводит к гориз. скроллингу? Или где-то еще (в reset.css или чем-то подобном) спрятан * { box-sizing: border-box }?

Конструкция html, body { height: 100% } обычно используется именно для высоты — высота наследуется только от явно указанной высоты предка и без этих звеньев цепочки высоту окна браузера «не донести» до внутренних оберток (что бывает нужно для прибитого футера). Сейчас, когда можно задать height:100vh непосредственно нужному элементу, она нужна реже. Но смысла делать так для ширины я вообще не вижу, блоки ведь занимают всю доступную ширину предка по умолчанию.

tigrus2014 · November 15, 2016

Только что, SelenIT сказал:

Но смысла делать так для ширины я вообще не вижу, блоки ведь занимают всю доступную ширину предка по умолчанию.

Так я за тоже! Да там есть box-sizing: border-box Я бы Задал для HTML 100%, соответственно для Body и то что в нем/ Без всяких body .wrap-body{} А .wrap-body (без body конечно) width если нужна другая ширина. Или padding ему или margin 0 auto дал например

html {width:100%; padding:0; margin:0;}
body {font: 14px/25px Arial, Helvetica, sans-serif;font-family: 'Open Sans', sans-serif;background:#F6F8F7;padding:0 40px ;}
.wrap-body{width: 92%; margin: 0 auto}

Так лучше по-моему?

wwt · November 15, 2016

13 минуты назад, tigrus2014 сказал:

Так лучше по-моему?

html {width:100%;

бесполезное правило, ибо html и так по умолчанию занимает всю ширину.

Sign In

Как в данном случае работает наследование?

Question

tigrus2014

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

SelenIT

Link to comment

Share on other sites

tigrus2014

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information