“盒子的嵌套布局”的版本间的差异

来自CloudWiki
跳转至： 导航， 搜索
（→‎嵌套元素水平排列）
 
（未显示同一用户的11个中间版本）
第12行： 第12行：
  
 
=== 嵌套元素竖直排列 ===
 
=== 嵌套元素竖直排列 ===
−
 
+
*子盒子的宽度等于父盒子的宽度、
−
*子盒子宽度等于父盒子，子盒子的高度之和小于等于父盒子的高度
+
*子盒子的高度之和等于父盒子
−
*当盒子内部的元素需要竖直排列时，不需要增加额外的属性,盒子内的元素按先后顺序上下排列。
+
*当父盒子填充子盒子后，除非特殊需要，要把父盒子的高度值设为auto,以便自适应
 
*[[文件:w3-47.png]]
 
*[[文件:w3-47.png]]
 
*源代码：
 
*源代码：
第42行： 第42行：
 
  </html></nowiki>
 
  </html></nowiki>
  
−
===补充知识点：display:inline-block===
+
=== 嵌套元素水平排列 ===
−
解释一下display的几个常用的属性值，inline ， block， inline-block
+
要点：
  
−
*inline:
+
*子盒子的宽度之和小于父盒子、高度等于父盒子、
 +
*水平排列的每个盒子添加float:left属性
 +
*子盒子后面增加一个空白盒子，将其属性设置为clear:both，来清除浮动。
  
−
<nowiki>使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
+
*[[文件:w3-46.png]]
−
        不能更改元素的height，width的值，大小由内容撑开.
 
−
        可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行.</nowiki>
 
−
*block:
 
−
 
 
−
<nowiki>使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
 
−
        能够改变元素的height，width的值.
 
−
        可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.</nowiki>
 
  
−
*inline-block:
+
====知识点：盒子的浮动与消除浮动====
 +
*所有块级元素的盒子默认都是上下排列的
 +
*使用CSS提供的浮动样式float能够将这些盒子左右排列。
 +
*float:none | left | right;
 +
none 不浮动（默认）
 +
left  向左浮动，其他后续元素填补在右边
 +
right 向右浮动，其他后续元素填补在左边
 +
*问题：如何在排版中实现某个盒子浮动，但是它后面的标准流中的盒子不受影响？
 +
使用clear属性清除浮动的影响
 +
*clear:none | both | left | right;
 +
none  不清除（默认）
 +
both  清除向左向右的浮动
 +
left  清除左浮动---左侧不再围绕浮动框排列
 +
right  清除右浮动---右侧不再围绕浮动框排列
  
−
<nowiki>结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
 
−
        用通俗的话讲，就是不独占一行的块级元素</nowiki>
 
−
=== 嵌套元素水平排列 ===
 
−
*这种情况稍微复杂一点
 
−
*子盒子的宽度之和小于父盒子；子盒子的高度等于父盒子
 
−
*当盒子内部的元素需要水平排列时，要给子盒子设置display:inline-block,即可设置嵌套盒子的水平排列。
 
−
*[[文件:w3-46.png]]
 
 
*源代码：
 
*源代码：
 
    
 
    
−
  <nowiki><!doctype html>
+
  <nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
−
<html>
+
  <html xmlns="http://www.w3.org/1999/xhtml">
 
     <head>
 
     <head>
−
        <title>我的第一个 HTML 页面</title>
+
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
−
        <meta charset="utf-8">
+
      <title>无标题文档</title>
−
<style type="text/css">
+
      <style type="text/css">
−
          *{margin:0;padding:0;}
+
          *{margin:0;padding:0;}
−
          #layer1{width:100%; height:120px; background:blue; }
 
−
          #layer1-1{width:100%;height:80px;background-color:lightblue;} 
 
−
    #layer1-2{width:100%;height:40px;background-color:darkblue;}
 
−
 
 
−
          #layer2{width:100%;height:auto;background-color:lightblue; }
 
−
          #layer2-1{width:45%; height:300px; background:gray;display:inline-block;}             
 
−
          #layer2-2{width:35%; height:300px;background:blue;display:inline-block;}
 
−
       
 
−
 
 
−
          #layer3{width:100%; height:100px;  background:green;}         
 
−
      </style>
 
−
    </head>
 
−
    <body>
 
−
        <div id="layer1">
 
−
      <div id="layer1-1"></div>
 
−
          <div id="layer1-2"> </div>
 
−
        </div>
 
−
        <div id="layer2">
 
−
      <div id="layer2-1"></div>
 
−
      <div id="layer2-2"> </div>           
 
−
    </div>   
 
−
        <div id="layer3"></div>
 
−
    </body>
 
−
  </html></nowiki>
 
−
这样的效果和传统方法基本一样，唯一的区别是子盒子之间会出现缝隙，
 
  
−
这可通过给父盒子添加font-size:0属性来解决。参考文档[2]中有详细的解释。
+
          .layer2{width:100%;}
 +
 
 +
          .layer2-1{width:40%; height:200px; background:red;text-align:center;float:left;} 
 +
          .layer2-2{width:60%; height:200px; background:orange;text-align:center;float:left;}
 +
          .clear{clear:both;} 
  
−
参考文档：
+
      </style>
 +
    </head>
 +
    <body>
  
−
[1] overflow: hidden用法，不仅仅是隐藏溢出 https://www.cnblogs.com/Likebard/p/5899512.html
+
      <div class="layer2">
 +
            <div class="layer2-1"><h2>盒子2-1</h2></div>
 +
            <div class="layer2-2"><h2>盒子2-2</h2></div>
 +
            <div class="clear"></div>
 +
      </div>   
  
−
[2] css之display:inline-block布局 https://www.cnblogs.com/Ry-yuan/p/6848197.html
+
    </body>
 +
</html></nowiki>

2019年12月25日 (三) 01:11的最新版本

前情回顾

盒子的基本布局

盒子的嵌套布局

  • 以上两种布局，在进行简单网页设计的时候还可以
  • 但是在进行比较复杂的布局的时候往往力不从心:
  • W3-37.png

盒子的嵌套技术

  • 盒子嵌套：在大盒子中嵌套小盒子
  • 思想：体现的是模块化设计思想
  • 具体方法：我们可以先在网页中用大一点的盒子进行框架的布局，然后再将每个盒子划分为更小的盒子，这就是盒子的嵌套。

嵌套元素竖直排列

  • 子盒子的宽度等于父盒子的宽度、
  • 子盒子的高度之和等于父盒子
  • 当父盒子填充子盒子后，除非特殊需要，要把父盒子的高度值设为auto,以便自适应
  • W3-47.png
  • 源代码：
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
       <title>无标题文档</title>
       <style type="text/css">
          *{margin:0;padding:0;}

           .layer2{width:100%; height:200px;}
  
           .layer2-1{width:100%; height:100px; background:red;text-align:center;}  
           .layer2-2{width:100%; height:100px; background:orange;text-align:center;} 
       </style>
    </head>
    <body>

       <div class="layer2">
            <div class="layer2-1"><h2>盒子2-1</h2></div>
            <div class="layer2-2"><h2>盒子2-2</h2></div>

       </div>    

    </body>
 </html>

嵌套元素水平排列

要点：

  • 子盒子的宽度之和小于父盒子、高度等于父盒子、
  • 水平排列的每个盒子添加float:left属性
  • 子盒子后面增加一个空白盒子，将其属性设置为clear:both，来清除浮动。
  • W3-46.png

知识点：盒子的浮动与消除浮动

  • 所有块级元素的盒子默认都是上下排列的
  • 使用CSS提供的浮动样式float能够将这些盒子左右排列。
  • float:none | left | right;
none 不浮动（默认）
left  向左浮动，其他后续元素填补在右边
right 向右浮动，其他后续元素填补在左边
  • 问题：如何在排版中实现某个盒子浮动，但是它后面的标准流中的盒子不受影响？
使用clear属性清除浮动的影响
  • clear:none | both | left | right;
none  不清除（默认）
both  清除向左向右的浮动
left   清除左浮动---左侧不再围绕浮动框排列
right  清除右浮动---右侧不再围绕浮动框排列
  • 源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
       <title>无标题文档</title>
       <style type="text/css">
          *{margin:0;padding:0;}

           .layer2{width:100%;}
  
           .layer2-1{width:40%; height:200px; background:red;text-align:center;float:left;}  
           .layer2-2{width:60%; height:200px; background:orange;text-align:center;float:left;} 
           .clear{clear:both;}   

       </style>
    </head>
    <body>

       <div class="layer2">
            <div class="layer2-1"><h2>盒子2-1</h2></div>
            <div class="layer2-2"><h2>盒子2-2</h2></div>
            <div class="clear"></div>
       </div>    

    </body>
 </html>
取自“http://www.openbrains.net/mediawiki/index.php?title=盒子的嵌套布局&oldid=15601”