码迷,mamicode.com
首页 > 移动开发 > 详细

谈一谈在css中的wrapper

时间:2020-03-28 23:12:52      阅读:284      评论:0      收藏:0      [点我收藏+]

标签:使用   ice   wrap   site   bootstra   情况下   trap   习惯   between   

wrapper 和 container

习惯上 wrapper表示封装单个对象,赋予其更多的功能和接口
container包含多个元素的结构

所以,二者意义不同,功能不同

说到wrapper,通常会想到用一个

包含文档的HTML的其余部分。我相信我们中的许多人都经历过一段时间,我们把它设置为960像素的宽度,然后居中对齐。

Container,而另一方面,通常用于另一种控制。有时需要实现多个组件的行为或样式。它用于在语义和视觉上分组元素的目的。作为一个例子,Bootstrap有一个 “ container classes ”来容纳它们的网格系统或者包含各种其他组件。

Wrapper和container也可以代表着相同的东西,这取决于开发人员的想法。也可能有其他约定,所以最好的建议通常是实现对你最有意义的任何事情。但请记住,命名是开发者活动中最重要的部分之一。命名约定使我们的代码更加可读和可预测。谨慎选择!

一般而言的wrapper:

.wrapper {
  margin-right: auto; /* 1 */
  margin-left:  auto; /* 1 */
  max-width: 960px; /* 2 */
  padding-right: 10px; /* 3 */
  padding-left:  10px; /* 3 */
}

宽度VS最大宽度

为块级元素设置width将阻止它扩展到其容器的边缘(对于像可读行长度是很友好的)。因此,包装器元素将占用指定的宽度。当浏览器窗口比wraper的特定宽度窄时,就会出现此问题。这将触发一个水平滚动条,这几乎总是不合需要的。

使用max-width替代,在这种情况下,是更窄的浏览器窗口更好。当在小型设备上使用网站时,这很重要。这里有一个很好的例子来展示这个问题。

HTML:

<div class="width">This div element has width: 960px;</div>
<br />
<div class="max-width">This div element has max-width: 960px;</div>
<br />
<strong>Note:</strong> Drag the browser window to smaller than 960px wide, to see the difference between the two divs!

css:

/**
 * 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‘s 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
 */

谈一谈在css中的wrapper

标签:使用   ice   wrap   site   bootstra   情况下   trap   习惯   between   

原文地址:https://www.cnblogs.com/geck/p/12590089.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!