HTML基本布局

块级元素和行内元素区别：

Html里面的容器（body、div、…）他们的宽度，都是默认为你显示屏的宽度，但是高度，可以不设置，让里面的内容进行撑高，而他的行内标签（span、a、b、p…）他们的宽度和高度，都是只能根据它里面的文子大小进行自动撑开，没办法设置他们的宽度，和高度。
但是，若想实现对一个a、span、…等标签设置宽度、高度，就要用display：block设置成块状元素，也就是类似一块div的元素

想让一个容器居中，你可能一开始的想法是center，但是center并不可以对容器居中，只能对容器里面的文字进行居中；容器居中的正确办法就是，设置这个容器的宽度，然后设置他的边距margin：auto，所以，有时候想让body显示在中间，可以设置body的长度并且margin：auto，设置div…也可以

浮动float：

Div、li等容器排列：例如div

现在里面有3个div，并且有高度宽度，但是，他们没办法在同一行

要想他们在同一行，就需要用到float浮动；

float浮动的原理是，是把修饰的块状元素进行浮动，加入现在向left浮动，他们会往左边一直排队排下去，排成一行，直到位置不够，他自动换行

上面的三个div，是在body里面的，现在有完全够的空间，所以他们会排成一行；但是现在我把body改成宽度599px；三个div加起来的宽度为600px

所以就会出现了有一个div跑到下面去的情况；所以，一般当自己网页布局出现这种有一个东西跑到别的地方去的时候，就要点开网页检查元素，查看自己的宽度，是否不足

文字的位置：

假如现在，我要把文字设置到正中间
，需要用到文字居中text-align: center;
和line-height:本容器高度 ;
，关于文字的标签，常用的有，color颜色、font-size字体大小、font-weight字体粗度（bord加粗）

内间距、外边距：

布局要学会观察：
例如：你会发现我们的body内容一开始都不是贴合在左上角的，而是有一段距离的，这时候你就要学会开开检查元素
观看这张图，这张图就已经说明了，body的宽为1520高100，外边距为8所以一开始就会距离左边上面8像素。但是想要完全贴合左上角开始，需要通过*来设置magin：0；

外边距应用：

假如现在有一个ul里面有三个li并且已经向左浮动了
但是还是距离左边还有距离，这时你就要点开检查，查看
这时候就可以发现，他们没有完全靠左边是因为有40的左内间距。去掉即可；

现在我想实现这三个li，每一块的距离，都有一段落，以保持美观，就需要用到外边距了

看图，我设置了三个li的外边距margin。给他们上下左右都添加的8px的边距，所以他们就会分开，网页中123上面的距离，就是他们的上边距，23之间看起来比上面长的原因是，因为23中间的距离是2的右边距+3的左边距组成了，所以，以后想单独设置可以通过margin-top、bottom、…来设置上下左右边距。

内间距应用：

一般应用的比较少，内间距好比，一个盒子，然后我要给他外边装修一层1厘米厚的东西，这个房子，就会比原来上下左右多出一层1cm的东西，里面的内容不变，而且会改变原来的大小，而外边距，是不改变原来的大小的只是改变附近的元素和他之间的距离。

定位position：

当一般的浮动和间距解决不了或者难以解决时，就需要用到定位了，
常用的两个定位absolute（绝对定位）、relative（相对定位）
先说相对定位，相对定位他是相对于原来的位置进行left、top、…移动的，而且移动后，在html的检查元素还是在原来的位置，就好比，现在有两个div都左浮动呈现一行

我给第一个div设置相对定位，距离左边30px后的效果是

他会在原来的位置上距离左边移动30px；而他的位置还是属于一开始在左边的那个位置，所以其他元素不会出现在他原来的位置上；这种操作也称为不脱离文档流；

文档流的大概意思是：里面的标签，都有自己的一个私人位置，别的标签，是不可以出现在他的这个位置上

现在说绝对定位：
绝对定位，是绝对，定位，在与他，最近的一个，设置了，相对定位，的祖先元素来定位；（上面这句话看不懂私聊问我）
如果没有一个祖先元素设置了相对定位，那么绝对定位会默认以body来进行定位。并且他定位，他会脱离文档流，也就是原来的位置，已经不是他了的，是共有的了，别的标签，可以在他原来的地方覆盖了。

就像这幅图，你看到类似这种图，就要想到，这个红色是相对于绿色来定位来定位，所以这个红色div是嵌套在绿色的div里面，红色是相对定位，绿色是绝对定位，ps：距离可以是负数