css布局学习笔记

最新推荐文章于 2025-04-26 16:52:08 发布

原创最新推荐文章于 2025-04-26 16:52:08 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了CSS布局中的关键概念，如display属性、margin:auto;的用法、max-width的重要性、box-sizing:border-box的作用以及绝对定位(position: absolute)的特点。此外还提供了一个浮动布局的例子。

css布局学习笔记

“display”属性

对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

margin: auto;

当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。
在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！

顺便提下，所有的主流浏览器包括IE7+在内都支持 max-widt

box-sizing

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。

absolute

bsolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。

浮动布局例子

nav {
  float: left;
  width: 200px;
}
section {
  margin-left: 200px;
}