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

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

php中文网

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

原创

1491人浏览过

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

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

例如：

Stable Diffusion

目前最强的开源AI绘画工具

查看详情

<span style="color: #000000;">div id="div1">
       </span><span style="color: #0000ff;"><</span><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><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><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;">span</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"><</span><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>

登录后复制

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>;
        }

登录后复制