CSS布局-1

最新推荐文章于 2024-08-13 10:54:52 发布

South-Fly

最新推荐文章于 2024-08-13 10:54:52 发布

阅读量811

点赞数

分类专栏： HTML5+CSS3 文章标签： css 布局

HTML5+CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

转载：http://zh.learnlayout.com/frameworks.html

如果你只想把所有内容都塞进一栏里，那么不用设置任何布局也是OK的。然而，如果用户把浏览器窗口调整的很大，这时阅读网页会非常不适：读完每一行之后，你的视觉焦点要从右到左移动一大段距离。调整下浏览器窗口大小你就明白我的意思了！

在解决这个问题之前，我们需要了解一个很重要的属性： display

"display"属性

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

block

<div>

div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。

</div>

inline

span 是一个标准的行内元素。一个行内元素可以在段落中 <span> 像这样 </span> 包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素，它可以被用作链接。

none

另一个常用的display值是 none 。一些特殊元素的默认 display 值是它，例如 script 。display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。

它和 visibility 属性不一样。把 display 设置成 none 不会保留元素本该显示的空间，但是 visibility: hidden; 还会保留。

其他 display 值

还有很多的更有意思的 display 值，例如 list-item 和 table 。这里有一份详细的列表。之后我们会讨论下 inline-block 和 flex 。

margin: auto;

#main {
  width: 600px;
  margin: 0 auto; 
}

设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案...

</div>

max-width

在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！

顺便提下，所有的主流浏览器包括IE7+在内都支持 max-width ，所以放心大胆的用吧。

</div>

盒模型

在我们讨论宽度的时候，我们应该讲下与它相关的一个重点知识：盒模型。当你设置了元素的宽度，实际展现的元素却能够超出你的设置：因为元素的边框和内边距会撑开元素。看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。


    
    
     
     .simple
     
      
     
     {
    
    
    
    
     
       
     
     width
     
     :
     
      
     
     500px
     
     ;
    
    
    
    
     
       
     
     margin
     
     :
     
      
     
     20px
     
      
     
     auto
     
     ;
    
    

    
    
     
     }
    
    

    
    
     
     .fancy
     
      
     
     {
    
    
    
    
     
       
     
     width
     
     :
     
      
     
     500px
     
     ;
    
    
    
    
     
       
     
     margin
     
     :
     
      
     
     20px
     
      
     
     auto
     
     ;
    
    
    
    
     
       
     
     padding
     
     :
     
      
     
     50px
     
     ;
    
    
    
    
     
       
     
     border-width
     
     :
     
      
     
     10px
     
     ;
    
    

    
    
     
     }

我小一些...

</div>

我比它大！

</div>

以前有一个代代相传的解决方案是数学。CSS开发者需要用比他们实际想要的宽度小一点的宽度，需要减去内边距和边框的宽度。值得庆幸地是你不需要再这么做了...

box-sizing

经过了一代又一代人们意识到数学不好玩，所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box; ：

我们现在一样大小了！

</div>

万岁！

</div>

既然没有比这更好的方法，一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上：

这样可以确保所有的元素都会用这种更直观的方式排版。

既然 box-sizing 是个很新的属性，目前你还应该像我之前在例子中那样使用 -webkit-和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+。

position

为了制作更多复杂的布局，我们需要讨论下 position 属性。它有一大堆的值，名字还都特抽象，别提有多难记了。让我们先一个个的过一遍，不过你最好还是把这页放到书签里。

static

static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。

</div>

relative


    
    
     
     .relative1
     
      
     
     {
    
    
    
    
     
       
     
     position
     
     :
     
      
     
     relative
     
     ;
    
    

    
    
     
     }
    
    

    
    
     
     .relative2
     
      
     
     {
    
    
    
    
     
       
     
     position
     
     :
     
      
     
     relative
     
     ;
    
    
    
    
     
       
     
     top
     
     :
     
      
     
     -20px
     
     ;
    
    
    
    
     
       
     
     left
     
     :
     
      
     
     20px
     
     ;
    
    
    
    
     
       
     
     background-color
     
     :
     
      
     
     white
     
     ;
    
    
    
    
     
       
     
     width
     
     :
     
      
     
     500px
     
     ;
    
    

    
    
     
     }

relative 表现的和 static 一样，除非你添加了一些额外的属性。

</div>

在一个相对定位（position属性的值为relative）的元素上设置 top、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。

</div>

fixed

Hello！暂时不要太关注我哦。

</div>

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和left 属性都可用。

我相信你已经注意到页面右下角的固定定位元素。你现在可以仔细看看它，这里有它所使用的CSS：


    
    
     
     .fixed
     
      
     
     {
    
    
    
    
     
       
     
     position
     
     :
     
      
     
     fixed
     
     ;
    
    
    
    
     
       
     
     bottom
     
     :
     
      
     
     0
     
     ;
    
    
    
    
     
       
     
     right
     
     :
     
      
     
     0
     
     ;
    
    
    
    
     
       
     
     width
     
     :
     
      
     
     200px
     
     ;
    
    
    
    
     
       
     
     background-color
     
     :
     
      
     
     white
     
     ;
    
    

    
    
     
     }

一个固定定位元素不会保留它原本在页面应有的空隙。

令人惊讶地是移动浏览器对 fixed 的支持很差。这里有相应的解决方案.

absolute

absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，除了它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指p osition 值不是 static 的元素。

这里有一个简单的例子：

这个元素是相对定位的。如果它是 position: static; ，那么它的绝对定位子元素会跳过它直接相对于body元素定位。

这个元素是绝对定位的。它相对于它的父元素定位。

</div>

这部分比较难理解，但它是创造优秀布局所必需的知识。下一页我们会使用 position做更具体的例子。

position例子

通过具体的例子可以帮助我们更好地理解“position”。下面是一个真正的页面布局。


    
    
     
     .container
     
      
     
     {
    
    
    
    
     
       
     
     position
     
     :
     
      
     
     relative
     
     ;
    
    

    
    
     
     }
    
    

    
    
     
     nav
     
      
     
     {
    
    
    
    
     
       
     
     position
     
     :
     
      
     
     absolute
     
     ;
    
    
    
    
     
       
     
     left
     
     :
     
      
     
     0px
     
     ;
    
    
    
    
     
       
     
     width
     
     :
     
      
     
     200px
     
     ;
    
    

    
    
     
     }
    
    

    
    
     
     section
     
      
     
     {
    
    
    
    
     
       
     
     /* position is static by default */
    
    
    
    
     
       
     
     margin-left
     
     :
     
      
     
     200px
     
     ;
    
    

    
    
     
     }
    
    

    
    
     
     footer
     
      
     
     {
    
    
    
    
     
       
     
     position
     
     :
     
      
     
     fixed
     
     ;
    
    
    
    
     
       
     
     bottom
     
     :
     
      
     
     0
     
     ;
    
    
    
    
     
       
     
     left
     
     :
     
      
     
     0
     
     ;
    
    
    
    
     
       
     
     height
     
     :
     
      
     
     70px
     
     ;
    
    
    
    
     
       
     
     background-color
     
     :
     
      
     
     white
     
     ;
    
    
    
    
     
       
     
     width
     
     :
     
      
     
     100
     
     %
     
     ;
    
    

    
    
     
     }
    
    

    
    
     
     body
     
      
     
     {
    
    
    
    
     
       
     
     margin-bottom
     
     :
     
      
     
     120px
     
     ;
    
    

    
    
     
     }

</nav> <section>

section s的 margin-left 样式确保了有足够的空间容纳 nav 元素。

</section> <section>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

</section> <section>

注意当你调整浏览器窗口时发生了什么。效果很赞！

</section> <footer>

如果你使用了一个固定定位的页眉或页脚，确保有足够的空间来显示它们！我在 body 上面加了 margin-bottom 。

</footer>

这个例子在容器比nav元素高的时候可以正常工作。如果容器比nav元素低，那么nav会溢出到容器的外面。之后我们会讨论下其他布局技术，它们都各有优劣。

float

另一个布局中常用的CSS属性是 float 。Float 可用于实现文字环绕图片，如下：

South-Fly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS布局-1

如果你只想把所有内容都塞进一栏里，那么不用设置任何布局也是OK的。然而，如果用户把浏览器窗口调整的很大，这时阅读网页会非常不适：读完每一行之后，你的视觉焦点要从右到左移动一大段距离。调整下浏览器窗口大小你就明白我的意思了！在解决这个问题之前，我们需要了解一个很重要的属性： display"display"属性display 是CSS中最重要的用于控制布局的属性。
复制链接

扫一扫

专栏目录