Подтвердить что ты не робот

Каков правильный способ создания CSS Wrapper?

Я слышал, что многие мои друзья говорят об использовании оберток в CSS для центрирования "основной" части веб-сайта.

Это лучший способ добиться этого? Что такое лучшая практика? Существуют ли другие способы?

4b9b3361

ОТВЕТЫ

Ответ 1

Самый простой пример (живой пример здесь):

CSS

#wrapper {
    width: 500px;
    margin: 0 auto;
}

HTML:

<body>
    <div id="wrapper">
        Piece of text inside a 500px width div centered on the page
    </div>
</body>

Принцип работы:

Создайте свою обертку и назначьте ей определенную ширину. Затем примените к нему автоматический горизонтальный разрез с помощью margin: 0 auto; или margin-left: auto; margin-right: auto;. Автоматические поля удостоверяются, что ваш элемент центрирован.

Ответ 2

Вам не нужна оболочка, просто используйте тело в качестве обертки.

CSS

body {
    margin:0 auto;
    width:200px;
}

HTML:

<body>
    <p>some content</p>
<body>

Ответ 3

<div class="wrapper">test test test</div>

.wrapper{
    width:100px;
    height:100px;
    margin:0 auto;
}

Проверьте рабочий пример http://jsfiddle.net/8wpYV/

Ответ 4

Самый простой способ - иметь элемент div с набором width и левым и правым краем auto.

Пример разметки:

<!doctype html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .wrapper { width: 960px; margin: 0 auto; background-color: #cccccc; }
        body { margin: 0; padding: 0 }
    </style>
</head>
<body>
    <div class="wrapper">
        your content...
    </div>
</body>
</html>

Ответ 5

Лучший способ сделать это зависит от вашего конкретного случая использования.

Однако, если мы говорим об общих рекомендациях по внедрению CSS Wrapper, вот мое предложение: ввести дополнительный элемент <div> со следующим классом:

/**
 * 1. Center the content. Yes, that a bit opinionated.
 * 2. Use `max-width` instead `width`
 * 3. Add padding on the sides.
 */
.wrapper {
    margin-right: auto; /* 1 */
    margin-left:  auto; /* 1 */

    max-width: 960px; /* 2 */

    padding-right: 10px; /* 3 */
    padding-left:  10px; /* 3 */
}

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

1. Вместо max-width используйте width

В ответе в настоящее время принят Арон говорит width. Я не согласен и предлагаю max-width вместо этого.

Установка width элемента уровня блока предотвратит его растяжение до краев его контейнера. Поэтому элемент Wrapper займет указанную ширину. Проблема возникает, когда окно браузера меньше ширины элемента. Затем браузер добавляет горизонтальную полосу прокрутки на страницу.

Используя max-width, в этой ситуации улучшится обработка браузером небольших окон. Это важно при использовании сайта на небольших устройствах. Вот хороший пример, демонстрирующий проблему:

/**
 * The problem with this one occurs
 * when the browser window is smaller than 960px.
 * The browser then adds a horizontal scrollbar to the page.
 */
.width {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid #73AD21;
}

/**
 * Using max-width instead, in this situation,
 * will improve the browser handling of small windows.
 * This is important when making a site usable on small devices.
 */
.max-width {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid #73AD21;
}

/**
 * Credits for the tip: W3Schools
 * https://www.w3schools.com/css/css_max-width.asp
 */
<div class="width">This div element has width: 960px;</div>
<br />

<div class="max-width">This div element has max-width: 960px;</div>

Ответ 6

Существуют ли другие способы?

Отрицательные поля также использовались для горизонтального (и вертикального!) центрирования, но при изменении размера браузера окна существует немало недостатков: нет ползунка окна; содержимое больше не видно, если размер окна браузера слишком мал.
Не удивительно, поскольку он использует абсолютное позиционирование, зверь никогда не приручается!

Пример: http://bluerobot.com/web/css/center2.html

Итак, это было только FYI, как вы его просили, margin: 0 auto; - лучшее решение.

Ответ 7

a "wrapper" - это просто термин для некоторого элемента, который инкапсулирует все другие визуальные элементы на странице. Тег body, по-видимому, соответствует счету, но вы были бы во власти браузера, чтобы определить, что отображается ниже, если вы отрегулируете max-width.

Вместо этого мы используем div, потому что он действует как простой контейнер, который не прерывается. теги main, header, footer и section в HTML5 являются просто div элементами, которые названы соответственно. Кажется, что из-за этой тенденции может (или должен) быть тег wrapper, но вы можете использовать любой способ обертывания, который вы найдете наиболее подходящим для вашей ситуации. через классы, ids и css, вы можете использовать тег span очень похожим образом.

Существует много тегов элементов HTML, которые мы часто не используем или, возможно, даже не знаем. Проведение некоторых исследований покажет вам, что можно сделать с помощью чистого HTML.

Ответ 8

Я думаю, что они подразумевают использование div в качестве основного контейнера.

Ответ 9

/******************
Fit the body to the edges of the screen
******************/    

body {
         margin:0;
         padding:0;
    }

header {
     background:black;
     width:100%;
}

.header {
     height:200px;
}

nav {
     width:100%;
     background:lightseagreen;
}

.nav {
     padding:0;
     margin:0;
}

.nav a {
     padding:10px;
     font-family:tahoma;
     font-size:12pt;
     color:white;
}

/******************
Centered wrapper, all other content divs will go inside this and will never exceed the width of 960px.
******************/

    .wrapper {
         width:960px;
         max-width:100%;
         margin:0 auto;
    }



<!-------- Start HTML ---------->

    <body>

<header>

    <div id="header" class="wrapper">

    </div>

</header>

<nav>

     <div id="nav" class="wrapper">

     </div>

</nav>



    </body>