No.5小白的HTML+CSS心得篇

Posted 2020-06-27 沙皮狗de爱

在No.4中谈及了下盒子模型，引出布局模型

1、布局模型有三类：

                                1）流动模型  flow（默认）

                                2）浮动模型  float

                                3）层模型  layer  

2、文档流 ：指的是文本沿着从左到右的方向展开，就像流的形式

   脱离文档流指的是一个元素脱离文档流之后，其他元素在定位的时候会当作没发现它，两者的位置重叠都是可以的

   html的布局机制就是用文档模型的，即块元素独占一块

3、对于CSS的浮动float问题 查阅一些资料解释 弄清楚了些  先加个链接 这个对浮动问题总结的比较好http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

浮动就是脱离文本流，独立于原来的网页之上，浮动的内容就在文档流空间上空独立出来。

上面链接中提到了：

       div的顺序是HTML代码中div的顺序决定的。

       靠近页面边缘的一端是前，远离页面边缘的一端是后。

所以注意有时候几个div右浮动，123的顺序显示出来却是321，这就是因为上面的原因

 

清除浮动问题  清除浮动式针对某个div自身设定的， 语法： clear : none | left | right | both

    none  :  默认值。允许两边都可以有浮动对象

    left   :  不允许左边有浮动对象

    right  :  不允许右边有浮动对象

    both  :  不允许有浮动对象

4、层模型 类似ps中的图层，对某个图层进行准确移动定位，层模型就可以对div模块进行准确的进行定位

定位的类型分为：

                        1）绝对定位 absolute    脱离文档流

                        2)相对定位   relative      不脱离文档流

                        3）固定定位 fixed

                        4）不定位   static     （默认）

今天先做个简单总结，随后补加详细分析