web布局学习---标准文档流、脱标以及页面设计

学习的初期，你就要知道，标准文档流等级森严。标签分为两种等级：

1） 块级元素

    ● 霸占一行，不能与其他任何元素并列

  ● 能接受宽、高

  ● 如果不设置宽度，那么宽度将默认变为父亲的100%。

2） 行内元素

    ● 与其他行内元素并排

    ● 不能设置宽、高。默认的宽度，就是文字的宽度。

在HTML中，我们已经将标签分过类，当时分为了：文本级、容器级。

文本级：p、span、a、b、i、u、em

容器级：div、h系列、li、dt、dd

CSS的分类和上面的很像，就p不一样：

所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。

所有的容器级标签都是块级元素。

此外p标签很特殊，自带margin和padding

但是，标准文档流中块级元素和行内元素之间可以相互改变

将display设置为inline/block可以分别将块级元素设置为行内元素、将行内元素设置为块级元素。

css中一共有三种手段，使一个元素脱离标准文档流：

1） 浮动

2） 绝对定位

3） 固定定位

一个元素，无论它之前是行内元素还是块级元素，在脱标（浮动）后，就算没设置display属性，它都能接受宽、高的设置，也能并排。

浮动元素特点:

     互相贴靠;

     字围效果:浮动的元素虽然能挡住盒子，但是挡不住盒子里面的文字

     浮动的元素“脱标”了，脱标的元素无法将父盒子“撑”出高。

未完待续...