10月27日 css学习笔记

css三种布局模型：

Flow:流动型

Float：浮动型

Layer：层模型

流动模型特点：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

浮动模型：可以使两个块元素在一行

float:left

层模型

绝对定位：position:absolute

将元素从文档流中拖出来，相对于浏览器设置定位

相对定位：position:relative

固定定位：position:fixed

视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化

固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。

<div id=“box1”><!－－参照定位的元素－－>

<div id=“box2”><－－相对参照元素进行定位－－>

</div><－－相对定位元素－－>

</div>

＃box1{

width:200px;

height:200px;

position:relation;

}

#box2{

position:absolute;

top:20px;

left:30px;

}