要怎么做一个属于自己的网站?我们都知道网页布局的核心——就是用CSS来摆放盒子，我们也知道，盒子的模型特别重要，它关系到一个网页的美观，图片的尺寸，文字的大小显示都需要盒子模型布局，那你知道如何把这些盒子模型正确规律的摆放在我们的网页中吗？来看完下面这些做出一个个人图片的网页.我们之前说过有些标签是块级元素它会独占一行，而有些是行内元素，它可以一行显示三个，但是有时候我们就想让多个盒子(div)水平排列成一行或者如何实现盒子的左右对齐？怎么办呢？虽然我们前面说过行内块（inline-block）但是他却有自己的缺陷：1.它可以实现多个元素一行显示，但是中间会有空白缝隙，不能满足以上第一个问题。2.它不能实现以上第二个问题，盒子左右对齐准备三个盒子,转成成行内块每个盒子中间有默认的空白缝隙这种默认的空白我们不知道它的大小，也没法去掉，但是我们有的网站设计稿上的空白是精确地测量出来的而不是这种默认空白的.就比如我们看百度图片网页时候，每个图片之间的大小都是一样的，图片摆放的错落有致，但是默认的空白缝隙就会影响美观，甚至让盒子模型样式乱掉.这是百度图片的摆放方式这时候我们就要知道CSS提供了3种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：1.普通流（标准流）-块级元素会独占一行，从上向下顺序排列；(之前有写过块元素和行内元素，以及行内块元素的显示方式就是普通流)2.浮动-让盒子从普通流中浮起来，主要作用让多个块级盒子一行显示。3.定位-将盒子定在浏览器的某一个位置——CSS离不开定位，特别是以后搭配js特效。什么是浮动？因为一些网页布局要求，标准流不能满足我们的需要了，因此我们需要浮动来完成网页布局。元素的浮动是指设置了浮动属性的元素会：1.脱离标准普通流的控制2.移动到指定位置。浮动的作用1.让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。2.可以实现盒子的左右对齐等等..在CSS中，通过`float`中文音，浮漏特属性定义浮动用的时候找到选择的盒子{float:left(rightnone)}float:left向左依次浮动,float:rigfht向又浮动,none代表不浮动.两个大小不一样的不加浮动的盒子这是盒子默认的显示方式(普通流)当我们加上浮动属性会变成什么样呢？给盒子1加浮动left盒子1就出现在了盒子2的上方为什么盒子1会出现在盒子2的上方呢？我们可以看出以下特点：1,`float`属性会让盒子漂浮在标准流的上面(相当于漂浮在网页上)，所以第二个标准流的盒子跑到浮动盒子的底下了。2.浮动的盒子，把自己原来的位置漏给下面标准流的盒子，就是不占有原来位置，是脱离标准流的，我们俗称“脱标”。所以，box2下面的其实就是跑到box1盒子下面了，被box1给压住了，遮挡起来了3.float属性会改变元素display(显示)属性。盒子1div添加浮动之后，不再是块级元素默认相当于类似转换为了inline-block(行内块元素)利用浮动我们再看看一开始转程行内块的三个盒子是不是还有默认的空白缝隙.三个浮动的盒子中间没有默认的空白缝隙了注意：1.浮动的元素互相贴靠一起的，但是如果父级盒子的width(宽度)装不下这些浮动的盒子，多出的盒子会另起一行对齐(样式会乱掉)2.我们知道，浮动是脱标的，会影响下面的标准流元素(会使网页其他元素被遮盖住)，此时，我们需要给浮动的元素添加一个标准流的父亲(就是把我们浮动的盒子放在一个普通的大盒子里面)，这样，最大化的减小了对其他标准流元素的影响。一个完整的网页，是标准流+浮动+我们后面写的定位一起完成的,现在我们知道了HTML骨架CSS选择器,标签,元素的显示方式,盒子模型.完成一个静态的网站已经不成问题了,比如下面我们自己做一个做一个浮动的布局,放入想要的图片这样我们就能做出一个整齐的像百度图片一样的个人网页了.关于浮动制作个人网页就这些了,感谢大家的
转载请注明：http://www.aierlanlan.com/rzgz/6707.html
