zoukankan      html  css  js  c++  java

  • Css+Div布局学习

     Css+Div布局学习（一）—Div布局基础

    上一个系列（Css基础学习—索引）我们介绍了Css的基础属性和使用，我们从现在开始讲解Css+Div布局的一些内容。大家准备好，我们要开始布局之旅了。如果你对Css还不是很熟悉的话，可以去看看我前面的几篇文章。

    如果我们要进行Css的布局，那float（浮动）就是最为关键的一个属性了。浮动可以使你的块元素不遵守元素流的布局特性，如果不采用浮动，元素将一个接一个地往下排列。float属性有三个值：left、right和none，后面我们就会使用这些值的。我们将使用事例来说明布局的特性。

    我们做一个html文件，为后面的讲解准备一下：

    1. <body>
    2. <div id="Masthead">Masthead</div>
    3. <div id="Sidebar_a">Sidebar_a</div>
    4. <div id="Sidebar_b">Sidebar_b</div>
    5. <div id="Content">Content</div>
    6. <div id="Footer">Footer</div>
    7. </body>

    这样的html使用浏览器打开一定是就几个字符把，我们先加一些简单的Css来标记，这样可以更加清楚地看到页面的布局。

    1. body
    2. {
    3.   padding:10px;
    4.   margin:10px;
    5. }
    6. div
    7. {
    8. border:1px solid #000;
    9. background-color:#CCC;
    10. height:20px;
    11. padding:10px;
    12. text-align:Center;
    13. }
    14. #Masthead
    15. {
    16. margin-bottom:10px;
    17. background-color:#CCCCCC;
    18. }
    19. #Sidebar_a
    20. {
    21. margin-bottom:10px;
    22. background-color:#3399CC;
    23. }
    24. #Sidebar_b
    25. {
    26. margin-bottom:10px;
    27. background-color:#33ff33;
    28. }
    29. #Content
    30. {
    31. margin-bottom:10px;
    32. background-color:#ff3366;
    33. }
    34. #Footer
    35. {
    36. background-color:#ffff00;
    37. }

    我们给每一个Div加上了一个边框，并给每一个Div使用上背景颜色，方便标志。

    Masthead
    Content

    上面5个Div，分别代表了网页模板里面最常见的表头、表尾、两个边栏和中间的内容。现在还没有添加更多的Css，所以还只是5个从上到下的Div而已。我们先分析一下，首先表头Masthead和表尾Footer两部分已经基本符合要求了，不会需要做更多的改变，那就是中间的两个边栏Sidebar和内容Content需要从左往右排列，我们先看看完成的Css和布局的样子：

    Masthead
    Content
    1. #Masthead
    2. {
    3. background-color:#CCCCCC;
    4. margin-bottom:10px;
    5. }
    6. #Sidebar_a
    7. {
    8. float:left;
    9. width:25%;
    10. margin-bottom:10px;
    11. background-color:#3399CC;
    12. }
    13. #Sidebar_b
    14. {
    15. float:right;
    16. width:25%;
    17. margin-bottom:10px;
    18. background-color:#33ff33;
    20. }
    21. #Content
    22. {
    23. margin-bottom:10px;
    24. height:150px;
    25. background-color:#ff3366;
    26. }
    27. #Footer
    28. {
    29. clear:both;
    30. background-color:#ffff00;
    31. }

    首先说明一下，所有的html没有作任何修改，只是添加了一些Css。
    比较前面和后面的Css，Masthead和Content里面的内容没有什么改变，Content里面的height:150px;只是为了说明内容较多情况下会是怎么样的情况。关键就是Sidebar_a内的float:left;和Sidebar_b内的float:right;。正是这两个属性使我们的布局顺利完成了。大家还可以自己尝试一下，把Sidebar_a和Sidebar_b内的属性换一下，两个边栏的位置就对换了，这个正体现了Div+Css布局的灵活性。

    Masthead
    Content

    我们别忘记了在表尾Footer内有clear:both;属性，这个属性又是做什么的呢？浮动使用了以后会对后面的元素造成影响，所以要清理掉。
    注意：上面的Html里面的五个Div不能顺便的变换位置，不然就不能正常地显示。特别是Content要在两个边栏的后面。
    上面只是简单地说明了Div的布局，大家要熟练使用还是自己多多练习了。

    **************************************

    Css+Div布局学习（二）—清理Clear

    我们在Css+Div布局学习（一）—Div布局基础这篇文章里面讲解了基本的布局方法，Footer内有clear:both;属性就一句带过了，事后想了一下对于清理还是有些话要讲清楚的。那我就开辟一篇专门讲一下。

    还是使用上一篇的布局事例来说明问题更加的简单：

    Masthead
    Content

    这个布局的Css复习一下：

    1. #Masthead 
    2. { 
    3. background-color:#CCCCCC; 
    4. margin-bottom:10px; 
    5. } 
    6. #Sidebar_a 
    7. { 
    8. float:left; 
    9. width:25%; 
    10. margin-bottom:10px; 
    11. background-color:#3399CC; 
    12. } 
    13. #Sidebar_b 
    14. { 
    15. float:right; 
    16. width:25%; 
    17. margin-bottom:10px; 
    18. background-color:#33ff33; 
    20. } 
    21. #Content 
    22. { 
    23. margin-bottom:10px; 
    24. height:150px; 
    25. background-color:#ff3366; 
    26. } 
    27. #Footer 
    28. { 
    29. clear:both; 
    30. background-color:#ffff00; 
    31. } 

    如果我们去掉#Footer 里面的clear:both; 属性，好像也没有太大的区别。那我们再来看看改变一下布局内Div的高度后会怎么样呢？

    Masthead
    Content

    这个布局不好看啊，因为foot这个块跟在Content块的流后面，因此两边的浮动块也会被它包围。（我现在的话也应该是“围绕”在Sidebar_b左面的，因为没有被清理！）

    Clear属性有4个值：left、right、both和none；none这个值没有什么好说的，我们一开始清理了Footer的两边，那清理一边会有怎么样的效果呢？

    Masthead
    Content

    有了这几张的效果图，应该很好理解这个属性了。在有两个边栏的情况下，Footer使用Clear:both;是比较稳妥的。

    ******************************************

    Css+Div布局学习（三）—定位Position

    所有的框模型一开始都是按文档中正常的元素流定位，而定位position属性允许我们改变这些自然的位置。通过利用一些简单的Css规则，position使得设计者可以将HTML元素精确放置，position属性确定了每个元素框（box）定位的参考点。

    在详细介绍之前，我们先简要的说明一下定位的4种方法：

    1、静止定位（static）：这种方法使得所有的元素最终位置都是一个静止位置。所以没有什么需要特殊说的。

    2、绝对定位（absolute）：这种方法允许用户指定元素的左上角、右下角或者其他的参考点和最近的父元素之间的关系将该元素从正常的文档流中拖出来。当页面滚动时，元素将保持它们各自的位置不变，随着页面一起滚动，就像粘在一起一样。

    3、固定定位（fixed）：这种方法允许元素相对于实际的浏览器窗口放置。

    4、相对定位（relative）：这方法定义相对于在默认情况下浏览器把它放置的位置。这个很难解释，可喜的是这个方法使用的很少。

    静止定位static

    定位的默认值static，不使用定位属性和使用这个值对页面没有什么效果的。

    绝对定位absolute

    当一个元素被绝对定位了，浏览器做的第一件事是把它从流中完全移走，接着放置在定位属性指定的位置上。看看下面的例子：

    1. #sidebar{
    2. position:absolute;
    3. top:100px;
    4. right:200px;
    5. width:280px;
    6. }

    上面说了被绝对定位的元素从流中间移走了，所以在流中间的任何元素将不会受到影响，看见过网站上的小广告吧，后面的文字不会受其任何的影响，就是这样的效果！还有这里介绍的定位是指元素，对！是元素，也就是说你可以使用在任何的元素上（包括内联元素哦），当然更多的是使用在div上。

    那如果我放置两个绝对定位的元素，谁会被遮挡住呢？这里需要介绍一个叫做z-index的属性，将这个属性设置的值越大，那个元素就会出现的上面。我们来看看边上的效果。我们将前面的元素设置z-index:99;

    在绝对定位元素内嵌套的元素进行绝对定位会怎么样呢？这件事情是要说清楚的，不要说我们没有告诉你啊，它使用的绝对定位是相对于它的父级位置的，而不是整个页面的。

    注意：个人认为不要使用绝对定位的方式去布局你的网站，因为网站的内容往往会根据你数据库内容的多少来显示，也就是说你不能完全确定网站的高度（还有一个原因不是确定高度是因为宽屏的电脑越来越多了）。而绝对定位以后你将不能应对这样的变化，比如你不能确定你的页脚放置在什么位置上合适。

    固定定位fixed

    固定定位指定元素的位置和你使用绝对定位基本相同，不过作用不同。它的位置是相对于浏览器窗口的，下面的那个div就是的，你滚动一下鼠标的滚轮看看就清楚了。

    1. #sidebar{
    2. position:fixed;
    3. top:300px;
    4. left:-90px;
    5. width:280px;
    6. }

    注意：position:fixed;这个属性在IE6里面居然不兼容！现在使用IE6的可不少啊，那总不能就这样放任不管了吧，我提供了一个简单事例，大家可以看看通过Css hack是如何解决这个问题的。

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>position:fixed in IE6 修正</title>
    6. <style type="text/css">
    7. <!--
    8. body{padding:0 10px;height:100%;
    9. font-size:12px;overflow-y:auto;}
    10. #leftMenu { background: #CCCCCC; height: 300px;  150px;
    11.   position: fixed; left: 40px; top: 30px; border: 1px solid #666666; padding: 10px;
    12.   letter-spacing: 0.2em; color:#990033;}
    13. #main{ background:#36F; margin-top:450px; margin-bottom:300px;
    14.   float:right; padding:10px; color:#FFF;}
    15. * html{overflow-x:auto;overflow-y:hidden;}
    16. * html #leftMenu{position:absolute;}
    17. -->
    18. </style>
    19. </head>
    20. <body>
    21. <div id="leftMenu">
    22.   <p>这是左侧的菜单，在标准的浏览器中采用固定定位，而非标准的浏览器（IE6）中，使用了一些HACK，和IE6本身的BUG！</p>
    23.   <p>enjoy it!（这句英语帅不？）</p>
    24. </div>
    26. <div id="main">
    27.   <p>这个是一个测试，IE6下position:fixed是不能使用的，但是我们使用一些技巧就能完美修复这个BUG！</p>
    28.   <p>拖动页面右边滚动条，你可以看到，灰色的左菜单始终固定，这种现象不止于IE7、FireFox，在IE6下也有较为完美的表现~这个是一个测试，IE6下position:fixed是不能使用的，但是我们使用一些技巧就能完美修复这个BUG！</p>
    29. </div>
    30. </body>
    31. </html>

    相对定位relative

    这个方法使用的很少，可能大家都没有用过，或者别人使用了也看不出来。先来看看它的工作原理，相对定位的元素仍然是页面流的一部分，不同于绝对定位和固定定位。但是它在显现自身的最后一刻叛变了，它离开了自己的岗位，偏移到Css指定的位置上，原来的岗位呢？还给他留着呢！

    谁逼迫它叛变的？我们使用的position:relative;和浏览器就是元凶！大家可以试试看，你指定的家伙是怎么叛变的，我就不做这个恶人了。

    *******************************************

    Css+Div布局学习（四）—关于hack

    并不是每一个浏览器都可以正确显示设定的CSS，那有什么办法可以让一些CSS使每一个流行的浏览器都可以一致的显示出网页。哈哈，世界上真的有这么好的事情，可以将一些不兼容的情况统一，这一类都叫做CSS hack。我下面就简单得介绍一个CSS hack。

    在任何标准兼容的浏览器中，针对包含其它元素的元素，其总宽度的计算需要结合这些容器的宽度以及它们的padding和border来考虑。这也就是说300像素宽的容器的实际总宽度为：300像素加上padding和border。这就是计算元素的总宽度的方法。

    但是，IE5和IE5.5并不是这么计算的。它们将从width中减掉border和padding的宽度得到容器的真正宽度。也就是说，300像素宽的容器最终并没有300像素。如果padding设定为10像素、border设定为10像素，那么容器的真正宽度只有300-10-10-10-10，即260像素。举例说明如下：

    1. #Sidebar{
    2. width:300px;
    3. padding:10px;
    4. border:15px solid #000;
    5. }

    对于这个框模型，其总宽度为border-left + padding-left + width + padding-right + border-right，其等于15+10+300+10+15，即总共350像素。但是对于IE5和IE5.5来说，其总宽度为300像素。幸运的是有一些天才解决了这个问题，我们来看看是怎么样解决这个问题的。

    1. #Sidebar{
    2. padding:10px;
    3. border:15px solid #000;
    4. width:350px;
    5. voice-family:"/"}/"";
    6. voice-family:inherit;
    7. width:300px;
    8. }
    9. html>body #Sidebar{
    10. width:300px;
    11. }

    这个就是框模型hack，首先IE5和IE5.5会对宽度进行相应的调整，接着使用voice-family，由于它不是一个可视化的Css属性，它将不会影响最终显示。但是该规则加上了一些调整的语法，从而使得IE5和IE5.5错误的认为这个声明将改写这个选择器的声明。
    后面的html>body #Sidebar{300px;}这条语句是为了一些Css2兼容的浏览器（比如Opera浏览器）将不执行这些上面“迷惑”性的语句，所以要加上最后面的一句。

    ********************************************

    Css+Div布局学习（五）—overflow属性

    overflow属性定义了当子元素超越了包含它的元素时，子元素的显示方式。如果内容太多，overflow属性说明内容是否显示以及如何显示。

    overflow属性有4个可能值：

    • visible：内容未被剪切，显示在元素外；
    • hidden：内容被剪切，但是浏览器不显示滚动条，无法看到剩余的内容；
    • scroll：即使有足够空间显示全部内容，浏览器也显示滚动条；
    • auto：如果内容太多，浏览器将显示滚动条以查看剩余内容；

    下面我们就看看每个值会产生的效果：

    overflow:auto; overflow:hidden; overflow:visible; overflow:scroll;
    所有的框模型一开始都是按文档中正常的元素流定位，而定位position属性允许我们改变这些自然的位置。
    所有的框模型一开始都是按文档中正常的元素流定位，而定位position属性允许我们改变这些自然的位置。
    所有的框模型一开始都是按文档中正常的元素流定位，而定位position属性允许我们改变这些自然的位置。
    所有的框模型按文档中正常的元素流定位。

    关于布局的内容基本上就这些了吧，还有一些高级的特性就需要大家自己学习积累、使用才是王道！
  • 相关阅读:
    BadUSB 利用
    java 将函数作为参数传递
    odoo12 修行提升篇之 常用的高阶函数 （二）
    odoo12 修行提升篇之 异步定时任务 （一）
    odoo12 修行基础篇之 利用kanban做分析 点击跳转分析模型列表 （九）
    odoo12 修行基础篇之 kanban （八）
    odoo12 修行基础篇之 记录批处理 （七）
    odoo12 修行基础篇之 列表的筛选和分组 （六）
    odoo12 修行基础篇之 添加记录编码 （五）
    odoo12 修行基础篇之 添加工作流和操作记录 （四）
  • 原文地址：https://www.cnblogs.com/yefengmeander/p/2887915.html
Copyright © 2011-2022 走看看