一、CSS布局与定位
在CSS中对一个网页进行布局与定位，首先通过盒子模型，即页面元素的大小、边框、各元素之间的间距将布局进行设计元素，然后通过定位，即文档流、浮动定位、层定位来决定盒子模型的位置，且盒子是可以嵌套的。
二、盒子模型
简单的来说盒子模型它可以是一个区域、图片、列表、导航栏等等，都可以称作盒子，即HTML元素都可以称作为盒子。
可以通过下图来简单了解一下盒子模型，以下是一个网页页面当按下F12后的html源码，我们可以看到布局中的盒模型：
三、盒子模型的组成
盒子模型以四个部分组成，可以以几个不同大小的矩形内嵌为例，从外到内依次分别是外边距（Margin）、边框（Border）、内边距（Padding，也可以叫做填充）、内容（Content），其中内容的空间由height属性和width属性设定。
例如，下列代码，设置一个div区域，设置内容的空间宽度为250px、高度为200px，边框大小为20px，且为实体天蓝色，内边距大小为20px，外边距大小为20px：
css代码：
div { width: 250px; height: 200px; border: 20px solid skyblue; padding: 20px; margin: 20px; }
html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../CSS/new_file.css" /> </head> <body> <div> 内容 </div> </body> </html>
运行结果如下：
我们可以发现其实该盒子模型的实际宽度（高度）=内容宽度（高度）+两边内边距（padding）+两边边框（border）+两边外边距（margin）。
例如上图的：
div { width: 250px; height: 200px; border: 20px solid skyblue; padding: 20px; margin: 20px; }
该盒子模型的实际宽度=内容宽度（width：250px）+两边内边距（左侧内边距padding-left：20px+右侧内边距padding-right：20px）+两边边框（左边框border-left：20px+右边框border-right：20px）+两边外边距（左侧外边距padding-left：20px+右侧外边距padding-right：20px）=370px；
该盒子模型的实际高度=内容高度（height：200px）+两边内边距（上侧内边距padding-top：20px+下侧内边距padding-bottom：20px）+两边边框（上边框border-top：20px+下边框border-bottom：20px）+两边外边距（上侧外边距padding-top：20px+下侧外边距padding-bottom：20px）=320px。
四、设置边框的属性
通过对border属性进行设置，可以改变边框的大小、颜色等等。
border-width:属性设置边框的宽度，后跟像素px或thick（粗）、medium（中，即默认值）、thin（细）。
border-style:属性设置边框的样式，它默认值是none，后跟solid时表示实线边框；后跟dashed时表示虚线边框；后跟dotted时表示点线边框；后跟double时表示定义两个边框，其中两个边框的宽度取值取决于border-width的值；后跟inset或outset属性，表示设置3D嵌入或3D突出边框，其取决于border-color边框的颜色；后跟ridge或groove，表示设置3D脊边框或3D槽边框，其也是取决于border-color边框的颜色。
border-color:属性设置边框的颜色，这里要注意如果只设置border-color:改变边框颜色是不起作用的，前提是要设置了border-style:边框样式。
也可以直接通过border:属性在一个属性中设置边框的属性，即同时设置border-width属性、border-style属性和border-color属性，例如：border: 2px dashed red;
例如，下列代码，设置盒子模型的边框属性为虚线红色且宽度为2px：
css代码：
#first { width: 150px; height: 200px; border: 2px dashed red; padding: 20px; margin: 20px; }
html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../CSS/new_file.css" /> </head> <body> <div id="first"> <p>计算机（computer）俗称电脑，是现代一种用于高速计算的电子计算机器。</p> </div> </body> </html>
运行结果如下：
且也可以在css中附加以下代码，对边框的上边框、下边框或左右边框进行设置，即单独设置各边属性。如下，设置边框的上边框、下边框为2px，且为实体蓝色：
border-top: 2px solid blue; border-bottom: 2px solid blue;
运行结果如下：
五、设置外、内边距的属性
可以通过不同方向（top、bottom、right、left）来设置外、内边距不同面的边距，在设置margin属性值时，依次是按top、bottom、right、left的顺序来设置的，也可以设置三个值，中间的值是左右边距，左右即是上边距和下边距；可以设置两个值，即表示上下边距、左右边距。
#first { width: 150px; height: 200px; border: 2px dashed red; padding: 20px; margin: 20px 10px 20px 15px; }
当有两个盒子模型合并时，margin属性垂直方向合并（即垂直方向像素大的即为合并结果），而水平方向不合并。且当设置div区域，若想让该区域水平居中，可设置margin属性margin:0 auto使该区域达到效果。
例如，下列代码：
css代码：
#first { text-align: left; font-size: 0; } #first img { width: 100px; height: 100px; border: 2px dashed skyblue; padding: 5px; margin-left: 2px; }
html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../CSS/new_file.css" /> </head> <body> <div id="first"> <img src="../image/mountain.jpg"> <img src="../image/酒柜.png"> </div> </body> </html>
运行结果如下：
六、overflow 属性
当盒子模型的内容溢出盒子时，通过overflow 属性可以设置处理方式，它分为以下五种：
当 overflow: visible时，溢出内容会显示在盒子模型以外，这也是默认情况，即不设置overflow 属性时的默认值。
当 overflow: hidden时，溢出内容会被修剪，即内容被修剪掉。
当 overflow: auto时，如果内容被修剪，溢出内容会以滚动条的方式来查看溢出的内容。
当 overflow: scroll时，溢出内容会以滚动条的方式来查看溢出的内容，若内容没有溢出，滚动条仍然可见，但无法滚动，即它是始终显示滚动条的。
当 overflow: inherit时，继承父元素overflow属性的值。
例如，下列代码，设置盒子模型的属性overflow: visible，使溢出内容显示在模型以外：
css代码：
div { width: 150px; height: 200px; border: 20px; padding: 20px; margin: 20px; background-color: aquamarine; }
html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../CSS/new_file.css" /> </head> <body> <div> <p>计算机（computer）俗称电脑，是现代一种用于高速计算的电子计算机器，可以进行数值计算，又可以进行逻辑计算，还具有存储记忆功能。是能够按照程序运行，自动、高速处理海量数据的现代化智能电子设备。</p> </div> </body> </html>
运行结果如下，可以看到内容是溢出的：
要区分当overflow: auto属性和overflow: scroll属性的不同情况，overflow: scroll属性的滚动条是始终显示的，与内容无关。
例如下列代码，可以看出auto属性和scroll属性的区别：
css代码：
#first { width: 150px; height: 200px; border: 20px; padding: 20px; margin: 20px; background-color: aquamarine; overflow: scroll; } #second { width: 100px; height: 150px; border: 20px; padding: 20px; margin: 20px; background-color: aquamarine; overflow: auto; }
html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../CSS/new_file.css" /> </head> <body> <div id="first"> <p>计算机（computer）俗称电脑，是现代一种用于高速计算的电子计算机器。</p> </div> <br /> <div id="second"> <p>由硬件系统和软件系统所组成，没有安装任何软件的计算机称为裸机。可分为超级计算机、工业控制计算机、网络计算机、个人计算机、嵌入式计算机五类，较先进的计算机有生物计算机、光子计算机、量子计算机等。</p> </div> </body> </html>
运行结果如下，我们发现区域first的内容并未溢出，也显示了滚动条，但滚动条不能使用；区域second的内容溢出，通过设置auto属性，可以支持滚动查看修剪内容。：
