布局模型（一） - 洛水三千-html教學-PHP中文網

布局模型（一） - 洛水三千

WBOY

發布： 2016-05-21 08:35:25

原創

1059 人瀏覽過

首先来了解什么包含块，css包含块是css标准布局中的一个重要的概念，它是绝对定位的基础。包含块就是为绝对定位元素提供坐标偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考。

由于ie浏览器在解析多层包含时会存在一些问题，在ie浏览器中只有当绝对定位的元素拥有层特征时才能准确解析，层特征应该包含：width：100px；height：100px；position：

例如：

<span style="color: #000000;">div id="div1">
       </span><span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>标题<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
       <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div2"</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"><span style="color: #800000;">span</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
       <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
   <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span>

登入後複製

CSS:

<span style="color: #800000;">#div1</span>{<span style="color: #ff0000;">
            position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;">blue</span>;
            <span style="color: #008000;">/*</span><span style="color: #008000;">height:200px;
            width:200px;加上宽、高后ie6才能够正常解析</span><span style="color: #008000;">*/</span>
        }<span style="color: #800000;">
        #div2</span>{<span style="color: #ff0000;">
            position</span>:<span style="color: #0000ff;">absolute</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;">red</span>;<span style="color: #ff0000;">
            left</span>:<span style="color: #0000ff;">50%</span>;<span style="color: #ff0000;">
            top</span>:<span style="color: #0000ff;">50%</span>;
        }

登入後複製