Я делаю домашнее задание для университета, чтобы сделать сайт. Таким образом, у меня есть идентификатор div id, который является моим div, который будет определять ширину для всей моей страницы. Поэтому мой вопрос заключается в том, что учитель сказал
#container {
width:Anyvaluepx;
margin:auto;
}
Поэтому я искал способы сосредоточиться на контейнере, и я видел, как люди говорили, чтобы что-то типа:
#container {
width:valuepx;
margin 0 auto;
}
Я думаю, не нужен мой html файл, но я тоже опубликую:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Eagle Guitar Shop</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="nav">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div> <!--Finish Container div-->
</body>
</html>
Поэтому мой вопрос прост, в чем разница между маркой use: auto; и margin: 0 auto ;?
Спасибо за весь вопрос, так что маржа работает для изменения размера сайта с разрешением экрана? так лучше отпустить все авто? или 0 auto ;?
Спасибо за ваше время.
Оба поместит ваш div горизонтально в центр. Добавление 0 гарантирует, что верхнее и нижнее поля будут равны нулю. Он не должен ничего делать с выравнивающим центром. Для получения дополнительной информации обратитесь к следующему сообщению.
margin: 0 auto
- это правильный способ центровки контейнера. Разница заключается в margin: auto
беспорядки с вертикальной и горизонтальной осью, где последний фокусируется на горизонтали.
Разница заключается в том, что margin: auto;
устанавливает все поля auto
; в то время как margin: 0 auto
устанавливает margin-top
и margin-bottom
как на 0
и на margin-left
и margin-right
как на auto
.
margin: auto;
эквивалентно:
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
В то время как
margin: 0 auto;
эквивалентно:
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
По аналогии,
margin: 0 auto 10px;
будет эквивалентно:
margin-top: 0;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
Рекомендации:
auto
, они просто обнуляются для ящика, который не является абсолютно позиционированным.