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. 微信video标签全屏无法退出bug

    安卓(android)微信里面video播放视频,会被强制全屏,播放完毕后还有腾讯推荐的视频,非常讨厌..强制被全屏无法解决,但是视频播放完毕后退出播放器可以解决.方法就是视频播放完毕后,用音频aud ...

  2. MYSQL Error 2006HY000:MySQL server has gone away的解决方案

    MySQL server has gone away有几种情况. 1.应用程序(比如PHP)长时间的执行批量的MYSQL语句. 最常见的就是采集或者新旧数据转化. 解决方案: 在my.cnf文件中添加 ...

  3. m2e插件的新下载地址

    今天在按照<Maven实战>这本书给eclipse配置maven的m2eclipse插件的时候发现,书中写的老的下载地址http://m2eclipse.sonatype.org/site ...

  4. 5.MVC框架开发(强类型开发,控制器向界面传递数据的几种方法)

    界面表单中的表单元素名字和数据库表的字段名相一一映射(需要哪个表的数据就是那个表的模型(Model)) 在View页面中可以指定页面从属于哪个模型 注:以上的关系可以通过MVC的强类型视图开发来解决我 ...

  5. unity3d 使用背景贴图

    使用贴图代替天空盒作为背景,参照:http://www.narkii.com/club/thread-261840-1.html 看看我做的:

  6. Lucene基础(四)-- 结合数据库使用

    需求 很多时候我们在用数据库的需要使用模糊查询,我们一般会使用like语句来做,然而这样的做的效率不是很多(很抱歉我们亲自去测,很多都这么说的),那么使用Lucene来检索的话,效率会高很多. luc ...

  7. CODEVS 3657 括号序列

    [问题描述] 我们用以下规则定义一个合法的括号序列: (1)空序列是合法的 (2)假如S是一个合法的序列,则 (S) 和[S]都是合法的 (3)假如A 和 B 都是合法的,那么AB和BA也是合法的 例 ...

  8. hdu 1043 pku poj 1077 Eight (BFS + 康拓展开)

    http://acm.hdu.edu.cn/showproblem.php?pid=1043 http://poj.org/problem?id=1077 Eight Time Limit: 1000 ...

  9. Interface和Abstract class区别

    在面向对象中,Interface和Abstract class是实现抽象类定义的两种机制. 1.声明方法的存在而不去实现它的类被叫做抽象类(abstract class),它用于要创建一个体现某些基本 ...

  10. js点击图片显示在左边大图

    <div class="imgbox cf">    <img src="temp/pic2.jpg" alt="" cl ...