float,clear,BFC理解

时间：2023-03-31 01:09:36 CSS

参考网址：学习CSS布局显示“display”属性：none另外一个常用的`display`值是`none`。它是一些特殊元素的默认display值，例如script。display:none通常被JavaScript用来隐藏或显示元素而不删除它们。它与可见性属性不同。将display设置为none不会保留元素应显示的空间，但visibility:hidden;将要。marginmargin:auto;`#main{width:600px;保证金：0自动；}设置块级元素的宽度可以防止它从左到右填充容器。然后您可以将左右边距设置为自动以使其水平居中。元素会占据你指定的宽度，然后将剩余的宽度一分为二作为左右边距。唯一的问题是，当浏览器窗口比元素的宽度窄时，浏览器会显示水平滚动条以适应页面。让我们再次改进这个解决方案...

`max-widthmax-width#main{max-width:600px;保证金：0自动；}在这种情况下使用max-width替换width以使浏览器更好地处理小窗口。这一点在移动设备上尤为重要，调整浏览器窗口大小即可查看！顺便说一句，包括IE7+在内的所有主要浏览器都支持max-width，所以请放心使用它。

box-sizingbox-sizing几代人都意识到数学并不有趣，因此他们添加了一个名为box-sizing的新CSS属性。当您将元素设置为box-sizing:border-box;,该元素的padding和border将不再增加其宽度。*{-webkit-box-sizing:border-box;-moz-box-sizing：边框框；box-sizing:border-box;}由于box-sizing是一个非常新的属性，你应该还是像我之前一样使用示例中的-webkit-和-moz-前缀。这会启用特定浏览器实验中的功能。还要记住它支持IE8+。