布局（一）——流体浮动布局

记录一下自学过程中对布局的自我理解

一，流体布局

 

流体布局通俗的讲就像水上偏流的“盒子”一样，哪有缝隙往哪里流动，前提是缝隙放的下“盒子”的宽度，这里的“盒子”宽度用百分比表示，即：width：40%，（相对整个body的宽度），这也算是流体布局的一大优点，可以铺满屏幕

属性用到：

float ：(为“盒子”添加浮动特性)

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

clear：（清除盒子的浮动特性）注意，即使自身没有设置浮动特性，旁边的盒子有，他就要清除浮动，否则他也会“浮动”，看默认设置，

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

 

以上列布局为列，Style.css代码如下：

注意代码里面的box-sizing：border-box；

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

（通俗的讲，就是内容加边框的时候及border和padding的宽带算在哪里，下面的两个属性，content-box算在定义的width宽带之外，这样就会出现溢出，border-box算在定义width之内，开始定好的宽度，不会因为加了border而改变，即border和padding算在了宽带之内，就不会出现溢出）

box-sizing: content-box|border-box|inherit;

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。