zoukankan      html  css  js  c++  java
  • 浅谈CSS布局

    在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     (默认)

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

  • 相关阅读:
    PNG文件格式具体解释
    opencv2对读书笔记——使用均值漂移算法查找物体
    Jackson的Json转换
    Java实现 蓝桥杯VIP 算法训练 装箱问题
    Java实现 蓝桥杯VIP 算法训练 装箱问题
    Java实现 蓝桥杯VIP 算法训练 单词接龙
    Java实现 蓝桥杯VIP 算法训练 单词接龙
    Java实现 蓝桥杯VIP 算法训练 方格取数
    Java实现 蓝桥杯VIP 算法训练 方格取数
    Java实现 蓝桥杯VIP 算法训练 单词接龙
  • 原文地址:https://www.cnblogs.com/lanyiming/p/5304374.html
Copyright © 2011-2022 走看看