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

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

  • 相关阅读:
    gcc -I -L -l区别
    如何在LINUX中开机、登陆、退出、定时、定期自动运行程序
    4B/5B编码原理
    powerpc平台移植zebra或quagga-0.99.23
    ubuntu 命令配置ip 网关 dns
    ubuntu新机安装工具
    svn add --no-ignore
    SSL handshake failed: SSL error: Key usage violation in certificate has been detected.
    netif_start_queue/netif_wake_queue/netif_stop_queue
    Linux系统中提示/usr/bin/ld: cannot find -lxxx错误的通用解决方法
  • 原文地址:https://www.cnblogs.com/lanyiming/p/5304374.html
Copyright © 2011-2022 走看看