一、CSS的定位
改变元素在页面上的位置
1.CSS定位机制
普通流:元素按照其在HTML中的位置顺序决定排布的过程
浮动:
绝对布局:
2.CSS定位的属性
属性 | 描述 |
---|---|
position | 把元素放在一个静态的、相对的、绝对的、或固定的位置中 |
top | 元素向上的偏移量 |
left | 元素向左的偏移量 |
right | 元素向右的偏移量 |
bottom | 元素向下的偏移量 |
overflow | 设置元素溢出其区域发生的事情 |
clip | 设置元素显示的形状 |
vertical-align | 设置元素垂直对齐方式 |
z-index | 设置元素的堆叠顺序 |
position
position的 四个属性
static:静态布局,left和right不起作用
relative:相对布局,元素之间位置可用left和right调整
absolute:绝对布局,元素在页面中不再占有位置,别的元素可重叠之上
fixed:元素在窗口中的位置固定,别的元素可以下滑走,但是这元素还在原来位置
二、CSS的浮动
1.float属性
相当于在页面中抠出来,然后浮在页面,当容器宽度无法承载一个元素时,该元素自动下一行
left向左浮动
right向右浮动
none元素不浮动
inherit继承父级浮动属性
2.clear属性
去掉浮动属性
left去掉向左浮动
right去掉向右浮动
both去掉两侧浮动
inherit继承父级来的clear值
<div id="div1">
<ul>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
</ul>
<ul>
<li><img src="4.jpg"></li>
<li><img src="5.jpg"></li>
<li><img src="6.jpg"></li>
</ul>
<ul>
<li><img src="7.jpg"></li>
<li><img src="8.jpg"></li>
<li><img src="9.jpg"></li>
</ul>
</div>
*{//*是通配符
margin: 0px;
padding: 0px;
}
li{
list-style: none;//列表没有样式
}
#div1{
width: 950px;
height: auto;
margin: 20px auto;//上下外边距是20px,左右是自适应
}
ul{
width: 250px;
float:left;//向左浮动
}
以上CSS代码形成了一个简单的瀑布流