CSS基础知识
CSS布局的三种机制
普通流(标准流)
浮动
让盒子从普通流中浮起来—让多个盒子(div)水平排列成一行
定位
让盒子自由的定在其他盒子上面—CSS(js 特效)离不开定位
定位模式
语法
选择器 { position: 属性值; }
静态定位(static)
静态定位是元素的默认定位方式,无定位的意思
静态定位 按照标准流特性摆放位置,它没有边偏移
相对定位(relative)
相对定位是元素相对于它原来在标准流中的位置来说的
原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它
绝对定位(absolute)
绝对定位是元素以带有定位的父级元素来移动位置
如果父级都没有定位,则以浏览器文档为准移动位置
不保留原来的位置,完全是脱标的
居中
1.left:50%;:让盒子的左侧移动到父级元素的水平中心位置
2. margin-left:-100px;:让盒子向左移动自身宽度的一半
固定定位(fixed)
固定定位是绝对定位的一种特殊形式
完全脱标——完全不占位置,单独使用的不随滚动条滚动
只认浏览器的可视窗口,跟父元素没有任何关系
边偏移
top
顶端偏移量,定义元素相对于其父元素上边线的距离
定位案例
新浪首页案例分析
- 顶部图片固定在浏览器可视窗口顶部,不会随窗口一起滚动
- 两侧图片固定在浏览器可视窗口左右两侧,不随窗口一起滚动
顶部和底部
.top {
/* 注意:使用固定定位时,如果盒子中没有内容,需要 指定宽度 */
width: 100%;
height: 44px;
background: url(images/top.png) no-repeat top center;
position: fixed;
left: 0px;
top: 0px;
}
.box {
width: 1002px;
/* 顶部的 44px 的 margin 可以让 box 显示在顶部图片下方 */
margin: 44px auto;
}
在使用固定定位时,如果盒子中没有内容,需要指定宽度
左右两侧
.ad-left,
.ad-right {
position: fixed;
top: 100px;
}
.ad-left {
left: 0px;
}
.ad-right {
right: 0px;
}
注意
不要同时使用 left 和 right 和边偏移属性