HTML+CSS第十二章——CSS布局模型

    xiaoxiao2022-07-03  117

    层次模型

    块状元素以恰好包含块内元素的高度,宽度默认为100%的形式。从上向下排列的模型形式。.

    流动模型

    行级元素自左向右排列的模型

    浮动模型

    当我们想让块级元素左右排列的时候,可以给这个元素设置float:left或者right 例.div1{float:left} <div class="div1">模型1</div> <div class="div1">模型2</div> 上面的代码两个模型就是同行左右排列的

    层叠模型——绝对定位

    首先设置positin:absolute,接下来再写的位置的设定就是距离目前模型最近的另一个绝对模型的绝对位置,没有模型默认的就是浏览器 例:div{position:absolute;right:20px;top:20px}/*距离上一个绝对定位的标签偏移top。。。*/

    层叠模型——相对定位

    相对自己原来的位置偏移,但是原来的位置占据的空间还在

    层模型的固定定位

    这个模型就比较有意思了,使用position:fixed设定的标签,不会随着文本流的移动而变化,而是一直固定在浏览器的固定位置,就是即使向下浏览网页,标签就是固定在那,浏览器的广告有很多这样的。

    最新回复(0)