浮动 float, 定位 positi 和盒模型是布局的关键
盒模型 盒模型是 CSS 的基石之一, 它指定元素如何显示, 如何交互, 页面上的每个元素被看成一个矩形框, 这个框有内容, 内边框, 边框, 外边框组成. 其中内边框, 边框, 外边框都是可选的默认值为零. 许多元素将由用户代理样式表设置外边距和内边距解决方法 *{margin: 0;padding: 0;}.
在 CSS 中 width 和 height 指的是内容区域的宽度和高度, 增加内容边距. 边框和外边距不会影响内容区域的尺寸, 但会增加元素边框的总尺寸.
内边距, 边距和外边距可以应用于一个元素的所有边, 也可以应用于单击的边. 外边距可以是负值.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 布局 </title>
- </head>
- <body>
- <div id="box" style="margin: 10px; padding: 5px; width: 70px; background-color: #667788">
- </div>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 布局 </title>
- <style>
- #box{
- width: 300px;
- height: 300px;
- background: #434343;
- margin-bottom: 100px;
- }
- #box1{
- width: 300px;
- height: 300px;
- background: #767;
- margin-top: 45px;
- }
- </style>
- </head>
- <body>
- <div id="box"></div>
- <div id="box1"></div>
- </body>
- </html>
来源: http://www.qdfuns.com/note/49226/26977a82539dbf15a1c654510794aded.html