1.Layout with CSS is easy. You just take a chunk of your page and shove it wherever you choose

2.position property

3.static value

renders a box in the normal order of things

4.relative

much like static but the box can be offset from its original position

top/right/bottom/left properties

5.absolute

pulls a box out of normal flow of HTML  & delivers it to a world all of its own

t/r/b/l

6.fixed

like absolute but reference to the browser window as opposed to the web page

Fixed boxes should stay exactly where they are on the screen even when the page is scrolled

How stupidly easy!

7.float

Shift the box to the right or left of a line,with surrounding content flowing around it

l/r value

8.clear

do not want the next box to wrap around the floating objects

l/r/both value

Footer!Hoorah!

【CSS】Intermediate8:Page Layout的更多相关文章

  1. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  2. 【BZOJ1731】[Usaco2005 dec]Layout 排队布局 差分约束

    [BZOJ1731][Usaco2005 dec]Layout 排队布局 Description Like everyone else, cows like to stand close to the ...

  3. 【CSS】隐藏多行文本框Textarea在IE中的垂直滚动栏

    在<[CSS]禁止Google浏览器同意定义调整多行文本框>(点击打开链接)中已经提及过怎样使多行文本框Textarea在一些DOM2的浏览器中固定下来. 这不,多行文本框Textarea ...

  4. 【css】用css巧妙实现移动端横向滑动展示功能

    前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...

  5. 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

      一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...

  6. 【CSS】css动画及过渡和变换属性

    1.css动画 创建一个动画: @keyframes name{ //动画名字 0% { //动画开始 transform: translateY(0); } 100% { //动画结束 transf ...

  7. 【CSS】元素样式

    1.使用CSS的三种方式: 方式一.通过元素的style属性来设置元素的样式 方式二.在HTML头部标签<head>中通过<link>标签引入一个外部的CSS资源,通常是一个C ...

  8. 【CSS】iconfont的使用

    说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体,前面也简单带到了有 ...

  9. 【CSS】318- CSS实现宽高等比自适应容器

    点击上方"前端自习课"关注,学习起来~ 在最近开发移动端页面,遇到这么一个情况:当页面宽度 100% 时,高度为宽度一半,并随手机宽度变化依然是一半. 于是我们就需要实现一个宽度自 ...

随机推荐

  1. PHP上传文件大小限制问题 post_max_size对大小的影响及解决方法

    今天在操作php上传的时候发现了一个问题,就是当php脚步上传的文件大小超过php.ini中post_max_size的限制的时候页面不会给出提醒,文件也上传失败,这个问题感觉应该算是一个另类,今天跟 ...

  2. Sql语句批量更新数据(多表关联)

    最近在项目中遇到一个问题,原来设计的功能是不需要一个特定的字段值depid的,但是新的功能需要根据depid来展现,于是出现了这样一个问题,新增加的数据都有正确的depid,而原来的大量的数据就没有d ...

  3. CSS中Padding的用法

    Padding的英文意思是填充,在CSS中则是设置内边距属性. padding不允许使用负值 1. 四个参数时: padding: 10px,20px,30px,40px; 上边距:10px 右边距: ...

  4. 4个好用的JS联动选择插件

    jQuery City Select 一个简单的jQuery省市联动插件,可以自定义JSON字典实现其他内容的联动选择菜单. PCAS省.市.地区联动选择JS封装类 PCAS可能是国内使用人数最多的J ...

  5. 【pyhton】【转】修改递归次数

    import sys sys.setrecursionlimit(1500) # set the maximum depth as 1500 def recursion(n): if(n <= ...

  6. qt 5 小练习 纯代码制作自定义按钮

    大家都知道QT设计师中直接拖动的按钮是长方形带有圆角的图案,那我们如何来设置自定义按钮呢 要设计一个按钮,我们必须要知道按钮有什么属性,首先,按钮必须有一个位置 第二,按钮必须有一个名称.还有当我们点 ...

  7. 如何学习C++[转]

    关于学C++, 我向你推荐一些书(当然能够结合课内项目实践更好) 1.The C++ Programming Language(Bjarne Stroustrup)2. Inside The C++ ...

  8. H5动画优化之路

    H5动画60fps之路 在移动端,和Native相比,H5一直都被人吐槽性能差,尤其是在动画方面. 谈到整个Web app的生命周期,一般分为四个部分: 加载 等待用户 响应用户 动画 一般情况下,首 ...

  9. Firefly是什么?有什么特点?

    原地址:http://bbs.gameres.com/forum.php?mod=viewthread&tid=219285 Firefly是免费.开源.稳定.快速扩展.能 “热更新”的分布式 ...

  10. linux awk命令详解(转)

    http://www.cnblogs.com/ggjucheng/archive/2013/01/13/2858470.html 简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编 ...