• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • 位置: css3教程 -> css3盒子模型

    css3定位布局

    css是一个网页的外衣,网页好不好看取决于css样式,而布局是css中比较重要的部分,当产品把一个需求设计交到手中,我首先要做的是一点点的解剖这些需求,首先想到的是html的结构,根据要兼容的浏览器,数据的拼接,代码的可维护性,扩展性来选择css的布局方法。有时候,一个好的布局可以减少很多代码,用css处理网页布局的时候有很多技巧性的东西,下面就给大家介绍一些css布局技巧实例及css布局模型。


    块区域

    <body>
        <div>
          <p>this is a pargraph.</p>
        </div>
      </body>
    

    p 元素的包含块是 div 元素,因为作为块级元素,表单元格或行内元素,这是最近的祖先元素,类似的,div的包含块是 body。因此,p的布局依赖于 div的布局,而div的布局则依赖于 body的布局。

    块级元素会自动重启一行。


    块级元素

    一般的,一个元素的width被定义为从左内边界到右内边界,height则是从上内边界到下内边界的距离。

    不同的宽度,高度,内边距和外边距相结合,就可以确定文档的布局。


    浮动布局

    在“文字环绕效果-初识float”这一节,我们已经接触过浮动是怎样一回事了。

    在传统的印刷布局中,文本可以按照实际需要来围绕图片。一般把这种方式称为“文本环绕”。在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里被文字包围的图片一样。

    浮动属性float是CSS布局的最佳利器,我们可以通过不同的浮动属性值灵活地定位div元素,以达到布局网页的目的。我们可以通过CSS的属性float使元素向左或向右浮动。也就是说,让盒子及其中的内容浮动到文档的右边或者左边。以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS中,任何元素都可以浮动。

    浮动元素会生成一个块级框,而不论它本身是何种元素。

    语法: float:取值; 说明:

    float属性的取值很简单也很容易记忆,就2个属性值:

    表1 float属性
    float属性值说明
    left元素向左浮动
    right元素向右浮动

    默认情况下,元素是不浮动的。这个表忽略“none”和“inherit”这2个一辈子派不上场的属性值,大家也不需要花心思去理会“none”和“inherit”这2个属性值。

    浮动的性质比较复杂,下面通过一个简单的实例讲解float属性的使用。

     
    <!doctype html> 
    <html>
    <head>
    <title>css浮动float属性</title>
    <style type="text/css">
    /*定义父元素样式*/
    #father
    {
    width:400px;
    background-color:#0c6a9d;
    border:1px solid silver;
    }
    /*定义子元素样式*/
    #father div
    {
    padding:10px;
    margin:15px;
    border:2px dashed red;
    background-color:#fcd568;
    }
    /*定义文本样式*/
    #father p
    {
    margin:15px;
    border:2px dashed red;
    background-color:#fcd568;
    }
    #son1
    {
    /*这里设置son1的浮动方式*/
    }
    #son2
    {
    /*这里设置son2的浮动方式*/
    }
    #son3
    {
    /*这里设置son3的浮动方式*/
    }
    </style>
    </head>
    <body>
    <div id="father">
    <div id="son1">box1</div>
    <div id="son2">box2</div>
    <div id="son3">box3</div>
    <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,</p>
    </div>
    </body>
    </html>
    

    上面代码定义了4个div块,一个是父块,另外3个是它的子块。为了便于观察,将各个块都加上了边框以及背景颜色,并且让body以及各个div有一定的margin(外边距)。

    如果3个子块都没有设置浮动方式,在父盒子中,由于div元素是块元素,因此4个盒子各自向右伸展,并且自上而下排列,如下图:

    1、设置第1个div浮动

     
    #son1
    {
    /*这里设置son1的浮动方式*/
    float:left;
    }
    

    在浏览器预览效果如下:

    分析:

    由于box1设置为左浮动,box1变成了浮动元素,因此此时box1的宽度不再延伸,其宽度为容纳内容的最小宽度,而相邻的下一个div元素(box2)就会紧贴着box1,这是由于浮动引起的效果。

    大家可以在“在线代码测试工具”工具中,设置一下box1右浮动,看看是怎样的。

    2、设置第2个div浮动

     
    #son2
    {
    /*这里设置son2的浮动方式*/
    float:left;
    }
    

    在浏览器预览效果如下:

    分析:

    由于box2变成了浮动元素,因此box2也跟box1一样,宽度不再延伸,而是由内容确定宽度。并且相邻的下一个div元素(box3)变成紧贴着浮动的box2。

    大家会觉得很奇怪,为什么这个时候box1和box2之间有一定的距离呢?其实原因是这样的:我们在CSS中设置了box1、box2和box3都有一定的外边距(margin:15px;),如果box1为浮动元素,而相邻的box2不是浮动元素,则box2就会紧贴着box1;但是如果box1和box2同时为浮动元素,外边距就会生效。这是由于浮动元素的特性决定的。大家不需要深究这个问题。“浮动”这个复杂的性质,我们只需要多加练习,慢慢就会感性认知它的各种性质。

    在这里,大家可以在在线工具中,设置一下box2右浮动,看看是怎样的。

    3、设置第3个div浮动

     
    #son3
    {
    /*这里设置son3的浮动方式*/
    float:left;
    }
    

    在浏览器预览效果如下:

    分析:

    由于box3变成了浮动元素,因此box3跟box2和box1一样,宽度不再延伸,而是由内容确定宽度,并且相邻的下一个p元素(box3)变成紧贴着浮动的box3。

    由于box1、box2和box3都是浮动元素,box1、box2和box3之间的margin属性生效。

    4、改变浮动的方向

    在这里,我们将box3浮动方式改为“float:right”,在浏览器预览效果如下:

    float属性是CSS布局中非常重要的属性,我们常常通过对div元素应用float浮动来进行布局,不但对整个版式进行规划,也可以对一些基本元素,如导航等进行排列。

    浮动,这个属性对于初学者来说,并不能立刻掌握,需要经历过大量的练习,然后细细体会这些训练中。本教程精选了大量的练习,希望读者细细体会。

    CSS定位布局简介

    在上一章,我们学习了CSS浮动布局。浮动布局比较灵活,但是不容易控制。而定位布局的出现,使得用户精准定位页面中的任意元素成为可能,使得网页布局变得更加随心所欲。当然由于定位布局缺乏灵活性,也给空间大小和位置不确定的版面布局带来困惑。因此,在网页布局实战中,读者应该灵活使用这两种布局方式,满足个性设计需求。

    CSS定位使你可以将一个元素精确地放在页面上你指定的地方。联合使用定位和浮动,能够创建多种高级而精确地布局。

    定位的方法有很多种,它们分别是固定定位(fixed)、相对定位(relative)、绝对定位(absolute)和静态定位(static)。