资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

css的布局模型

本篇内容主要讲解“css的布局模型”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css的布局模型”吧!

创新互联建站云计算的互联网服务提供商,拥有超过13年的服务器租用、电信机房托管、云服务器、虚拟主机、网站系统开发经验,已先后获得国家工业和信息化部颁发的互联网数据中心业务许可证。专业提供云主机、虚拟主机主机域名、VPS主机、云服务器、香港云服务器、免备案服务器等。

流动模型

流动模型是网页布局的默认模式,也是最常见的布局模式,他有两个特点:

1.块状元素都在所处包含元素内自上而下按顺序垂直延伸分布。常见的块状元素有:div,p,ul,ol,h2~h7,address等

2.内联元素都会在所处包含元素内从左到右水平分布显示。常见的内联元素有:a,span,img,input,textarea等

浮动模型

浮动模型是指使用css将块状元素定义为浮动。用法:float:left/right/none

层模型

css定义了一组定位属性(position)支持布局模型。

1.静态定位    设置position:static

无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用

2.绝对定位    设置position:absolute

将元素从文档流中拖出来,然后使用top,right,bottom,left等属性相对于其最接近的一个具有定位属性的父包含快进行绝对定位。如果不存在这样的属性块,则相对于body元素,即相对于浏览器窗口。

XML/HTML Code复制内容到剪贴板

  1.   

  2.   

  3.   

  4.   

  5. Css3学习  

  6.   

  7.   

  8.   

  9.       

  10. 我是绝对定位,在这里相对于父级div定位

  

  •   

  •   

  •   

  • css的布局模型

    3.相对定位    设置position:relative

    对象遵循正常文档流,但可通过top,right,bottom,left等属性进一步确定位置,这也是和static属性不同的地方。

    4.固定定位    设置position:fixed

    固定定位和绝对定位的不同在于fixed参照定位的元素始终是视图本身(屏幕内的网页窗口),而absolute参照的是有定位属性的父级元素。如下代码:

    XML/HTML Code复制内容到剪贴板

    1.   

    2.   

    3.   

    4.   

    5. Css3学习  

    6.   

    7.   

    8.   

    9.       

    10. 我是固定定位,在这里相对于body定位

      

  •   

  •   

  •   

  • css的布局模型

    到此,相信大家对“css的布局模型”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


    网页名称:css的布局模型
    新闻来源:http://cdkjz.cn/article/gpdchp.html
    返回首页 了解更多建站资讯
    多年建站经验

    多一份参考,总有益处

    联系快上网,免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈,可以通过以下方式与我们联系

    业务热线:400-028-6601 / 大客户专线   成都:13518219792   座机:028-86922220