CSS布局模型思考
2016-03-01 19:58
525 查看
flow模型:默认布局模型,元素从左向右、从上到下依次排列,块状元素独占一行。Position属性对应值static。
float模型:主要效果是让本来独占一行的块状元素变成内联-块状元素,并到一排显示。可以向四个方向浮动。浮动的元素将脱离普通流,不影响普通流的占位。
layer模型:
相对定位,即从初始位置“浮起来”,飘到left等参数确定的位置,显示在那儿,但占位仍是占在初始位置,因此可以视为普通流的加强版;
绝对定位,当父元素为默认(普通流)定位时,将元素定位到相对于整个文档内的偏移量;当父元素不是普通流定位(position!=static)时,将元素定位到相对于其父元素的偏移量。绝对定位的元素脱离了普通流,不占位。亦有内联-块状效果。
固定定位,不随滚动条滚动,不占位。
设置z-index(z轴值)属性以调整元素叠放次序,z值大者在上。所有元素默认值为auto。
float模型:主要效果是让本来独占一行的块状元素变成内联-块状元素,并到一排显示。可以向四个方向浮动。浮动的元素将脱离普通流,不影响普通流的占位。
layer模型:
相对定位,即从初始位置“浮起来”,飘到left等参数确定的位置,显示在那儿,但占位仍是占在初始位置,因此可以视为普通流的加强版;
绝对定位,当父元素为默认(普通流)定位时,将元素定位到相对于整个文档内的偏移量;当父元素不是普通流定位(position!=static)时,将元素定位到相对于其父元素的偏移量。绝对定位的元素脱离了普通流,不占位。亦有内联-块状效果。
固定定位,不随滚动条滚动,不占位。
设置z-index(z轴值)属性以调整元素叠放次序,z值大者在上。所有元素默认值为auto。
相关文章推荐
- 前端编码规范(4)—— CSS 和 Sass (SCSS) 规范
- css特效实现html表格显示部分内容,当鼠标移上去显示全部。
- css中合理的使用nth-child实现布局
- SCSS迷你书(下) - SCSS中@指令
- SCSS迷你书(下) - SCSS中@指令
- SCSS迷你书(上)
- SCSS迷你书(上)
- css背景设置,让套图中某张图片居中显示的例子
- HTML+CSS学习笔记 (7) - CSS样式基本知识
- 通过CSS让html网页中的内容不可选
- 利用css实现文本超出N行之后显示省略号等css常用小知识点
- Css 截取字符串长度
- CSS/CSS3常用Style
- CSS 外边距(margin)重叠及防止方法
- CSS样式使HTML标签占满父容器的方法
- 关于使用JS动态修改CSS样式问题
- 使用css让大图片不超过网页宽度
- IE6最小高度最小宽度最大高度最大宽度css写法
- 发送邮件网页样式乱了。
- 用CSS3做3D动画的那些事