脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS >

css布局模型全面了解

  发布时间：2016-07-19 11:38:04   作者：佚名   我要评论
下面小编就为大家带来一篇css布局模型全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

css是网页的外衣，好不好看全凭css样式，而布局是css中比较重要的部分，下面来分析一下常见的几种布局。

流动模型

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

1.块状元素都在所处包含元素内自上而下按顺序垂直延伸分布。常见的块状元素有：div,p,ul,ol,h1~h6,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. <!DOCTYPE html>  
  2. <html lang="zh-cn">  
  3. <head>  
  4. <meta charset="utf-8" />  
  5. <title>Css3学习</title>  
  6. <style>  
  7. .test{position:absolute;top:0px;left:0px;width:200px;height:200px;padding:5px 10px;background:#c00;color:#fff;line-height:120%;}   
  8. </style>  
  9. </head>  
  10. <body style="background:#ccc;">  
  11.     <div style="background:#494444; position:relative;width:300px;height:300px;">  
  12. <div class="test">我是绝对定位，在这里相对于父级div定位</div>  
  13. </div>  
  14. </body>  
  15. </html>  

3.相对定位　　　　设置position:relative

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

4.固定定位　　　　设置position:fixed

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="zh-cn">  
  3. <head>  
  4. <meta charset="utf-8" />  
  5. <title>Css3学习</title>  
  6. <style>  
  7. .test{position:fixed;top:0px;left:0px;width:200px;height:200px;padding:5px 10px;background:#c00;color:#fff;line-height:120%;}   
  8. </style>  
  9. </head>  
  10. <body style="background:#ccc;">  
  11.     <div style="background:#494444; width:300px;height:300px;position:relative;">  
  12. <div class="test">我是固定定位，在这里相对于body定位</div>  
  13. </div>  
  14. </body>  
  15. </html>  

下节探讨定位以及布局的其他属性：z-index,display,float,clear,visibility,clip,overflow,overflow-x,overflow-y

以上这篇css布局模型全面了解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

原文地址：http://www.cnblogs.com/wangxiaosan/archive/2016/07/19/5683619.html

相关文章

  • 解析CSS的box model盒模型及其内的子元素布局控制

    盒模型是CSS控制布局的主要方式之一,尤其是内部的元素排列控制,这里我们将来解析CSS的box model盒模型及其内的子元素布局控制,需要的朋友可以参考下
    2016-07-01

  • CSS3弹性盒模型flex box快速入门心得(必看篇)

    下面小编就为大家带来一篇CSS3弹性盒模型flex box快速入门心得(必看篇)。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-24

  • CSS弹性盒模型flex在布局中的应用详解

    下面小编就为大家带来一篇CSS弹性盒模型flex在布局中的应用详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-24

  • 几个CSS3的flex弹性盒模型布局的简单例子演示

    这篇文章主要介绍了几个CSS3的flex弹性盒模型布局的简单例子演示,flex布局是迄今为止最强大的web布局方式,需要的朋友可以参考下
    2016-05-12

  • CSS网页布局的核心内容:CSS盒模型

    网页制作Webjx文章简介：本节的内容非常重要，因为盒模型是CSS定位布局的核心内容。从前面章节中，读者学习了布局网页基本方法，只需利用p元素和列表元素，即可完成页面大
    2009-04-02

  • 掌握盒模型轻松DIV CSS网页布局

    网页制作Webjx文章简介：如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的
    2009-04-02

最新评论

关注微信公众号

扫一扫