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. gentoo装X服务器时显卡选择

    前面装X服务器一直装不成功,每个步骤都按hand book上的进行,编译完成后,重启就是启动不了X服务器,最终才知道由于我是用的是 开源显卡nvidia,换成集成显卡inter后X启动成功,顺便说句, ...

  2. dataTable 禁止排序

    $("#id").DataTable({ "ordering": false, // 禁止排序 });

  3. 《Junit实战》读书笔记

    核心原则:任何没有经过自动测试的程序功能都可以当做不存在 单元测试框架的大三规则: 1.每个单元测试都必须独立于其他所有单元测试而运行 2.框架应该以单个测试为单元来检测和报告错误 3.应该易于定义要 ...

  4. WPF自定义控件之仿Win8滚动条--ScrollViewer

    1.说明 自己学习WPF不是很久,现将自己做的一些小项目中用到的自定义控件整理出来,方便以后使用,不尽人意之处,还请多多批评与指导,现在就来实现自定义ScrollViewer仿Win8滚动条 2.效果 ...

  5. 2014年度辛星css教程夏季版第七节

    本小节我们研究浮动的问题,浮动使得布局更加灵活,虽然我们前面也有关于布局的讲解,但是它们提供的内容还是太有限了,要想获得更强大的布局,还必须使用浮动才能完成更灵活的布局. ***********浮动* ...

  6. C#微信登录-电脑版扫描二维码登录

    像京东,一号店等网站都实现了用微信来登录的功能,就是用手机上的微信扫一扫网站上的二维码,微信上确认后,即可自动用微信的帐号登录网站. 一.创建网站应用 在微信开放平台创建一个网站应用 https:// ...

  7. ms flexbox 布局 (ko list)

    <!DOCTYPE html> <html> <head> <title></title> <script src="js/ ...

  8. objective-c常用数学方法

    1. 三角函数  double sin (double);正弦  double cos (double);余弦  double tan (double);正切  2 .反三角函数  double as ...

  9. Firefly官方教程之DBentrust使用文档

    原地址: http://bbs.gameres.com/thread_224185.html 1.dbentrust说明该模块主要是对数据库与memcached存储的处理.里面封装了从memcache ...

  10. Linux用户行为日志审计

    http://my.oschina.net/xiangpang/blog/532999 http://my.oschina.net/chaichuan/blog/508494 http://my.os ...