摘要：通常被用来在不删除元素的情况下隐藏或显示元素。把设置成不会保留元素本该显示的空间，但是还会保留。唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。这可以启用特定浏览器实验中的特性。同时记住它是支持。
参考网址：学习CSS布局
display
"display"属性：none
另一个常用的`display`值是 `none` 。一些特殊元素的默认` display` 值是它，例如` script` 。
display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
它和 visibility 属性不一样。把 display 设置成 none 不会保留元素本该显示的空间，
但是 visibility: hidden; 还会保留。
margin
margin: auto;
`
#main {
width: 600px;
margin: 0 auto;
}
设置块级元素的 width 可以阻止它从左到右撑满容器。
然后你就可以设置左右外边距为 auto 来使其水平居中。
元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。
唯一的问题是，当浏览器窗口比元素的宽度还要窄时，
浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案...
`
max-width
max-width
#main {
max-width: 600px;
margin: 0 auto;
}
在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。
这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！
顺便提下， 所有的主流浏览器包括IE7+在内都支持 max-width ，所以放心大胆的用吧。
box-sizing
box-sizing
经过了一代又一代人们意识到数学不好玩，所以他们新增了一个叫做 box-sizing 的CSS属性。
当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
既然 box-sizing 是个很新的属性，目前你还应该像我之前在例子中那样使用 -webkit- 和 -moz- 前缀。
这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115550.html
摘要：包裹性所谓包裹性，其实是由包裹和自适应两部分组成。官方对属性的解释是元素盒子的边不能和前面的浮动元素相邻。清除高度塌陷的问题在上面的章节中，如果子元素设置浮动属性，则父元素就会出现高度塌陷的问题。 float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了，但是对于优秀的前端开发人员，需要有刨根问底的精神，...
摘要：不会重叠浮动元素可以包含浮动我们可以利用的第三条特性来清浮动，这里其实说清浮动已经不再合适，应该说包含浮动。总而言之清理浮动两种方式利用属性，清除浮动使父容器形成 CSS清浮动处理（Clear与BFC）在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼 1 浮动带来布局的便利，却也带来了新问题 复制代码 1 2 3 4 ...
摘要：时其宽度始终保持占满宽度的态度。清除浮动就是为浮动影响的范围划边界。那么可归结为的父容器包裹所有子元素。注意属性值不能为空白，否则无法清除浮动。 前言 定位系统中第一难理解就是Normal flow，而第二就非Float莫属了，而Float难理解的原因有俩，1. 一开头我们就用错了；2. 它跟Normal flow靠得太近了。本文尝试理清Float的特性和行为特征，若有纰漏望各位指正...
阅读 1495·2023-04-26 01:28
阅读 3314·2021-11-22 13:53
阅读 1419·2021-09-04 16:40
阅读 3188·2019-08-30 15:55
阅读 2675·2019-08-30 15:54
阅读 2487·2019-08-30 13:47
阅读 3365·2019-08-30 11:27
阅读 1144·2019-08-29 13:21
