css有哪些布局模型

html-css016

css有哪些布局模型,第1张

default，就是块级元素都自上而下的分布，宽度都为100%。内联元素都从左到右水平分布。div、p、table、img 等元素都可以设置为浮动。两个 div 显示在一行的代码如下：

div{

width:200px

height:400px

border:2px red solid

float:left

}层模型有三种形式：

(1)绝对定位(position: absolute)

div{

width:200px

height:400px

border:2px red solid

position:absolute

left:100px

top:50px

}

(2)相对定位(position: relative)

(3)固定定位(position: fixed)

层模型中，各元素可能出现堆叠。堆叠顺序可以用z-index控制，z-index大者在上。z-index相同时，根据CSS声明顺序，靠后者在上。

用百分比来做，比如html如下

<div class="demo">

    <div class="box">1</div>

    <div class="box">2</div>

    <div class="box">3</div>

</div>

css如下

.demo{width: 1000pxheight: 300px}

.box{width: 100%height: 33.3%}

效果就是demo被box均分为3个宽1000高100的三个块，当然，3个33.3%是不能完全达到百分百，但在显示界面基本看不出什么了