【CSS】Intermediate8:Page Layout
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的更多相关文章
- 【css】清除浮动的几种方式
[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...
- 【BZOJ1731】[Usaco2005 dec]Layout 排队布局 差分约束
[BZOJ1731][Usaco2005 dec]Layout 排队布局 Description Like everyone else, cows like to stand close to the ...
- 【CSS】隐藏多行文本框Textarea在IE中的垂直滚动栏
在<[CSS]禁止Google浏览器同意定义调整多行文本框>(点击打开链接)中已经提及过怎样使多行文本框Textarea在一些DOM2的浏览器中固定下来. 这不,多行文本框Textarea ...
- 【css】用css巧妙实现移动端横向滑动展示功能
前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...
- 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...
- 【CSS】css动画及过渡和变换属性
1.css动画 创建一个动画: @keyframes name{ //动画名字 0% { //动画开始 transform: translateY(0); } 100% { //动画结束 transf ...
- 【CSS】元素样式
1.使用CSS的三种方式: 方式一.通过元素的style属性来设置元素的样式 方式二.在HTML头部标签<head>中通过<link>标签引入一个外部的CSS资源,通常是一个C ...
- 【CSS】iconfont的使用
说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体,前面也简单带到了有 ...
- 【CSS】318- CSS实现宽高等比自适应容器
点击上方"前端自习课"关注,学习起来~ 在最近开发移动端页面,遇到这么一个情况:当页面宽度 100% 时,高度为宽度一半,并随手机宽度变化依然是一半. 于是我们就需要实现一个宽度自 ...
随机推荐
- 电脑升级完Xcode8后 注释快捷键无效的问题
1.部分电脑升级完Xcode8 后直接重启电脑就可以使用Command +/ 快捷键注释代码, 2.如果上述方法没有效果,可以在终端输入sudo /usr/libexec/xpccachectl 然 ...
- 三个PHP常用代码样例
作为一个正常的程序员,会好几种语言是十分正常的,相信大部分程序员也都会编写几句PHP程序,如果是WEB程序员,PHP一定是必备的.尽管PHP经常被人诟病,被人贬低,被人当玩笑开,事实证明,PHP是全世 ...
- php curl request
/** * @desc curl request请求 * @date 2016-12-07 16:26:55 * * @param $arguments * * @return bool|mixed ...
- 【分享】 高级Visual Basic 编程 清晰pdf+随书源代码光盘
搞vb6的可能不多,博客园也大多是.net java,近日在网上找到这本好书,想要成为vb高手,这本书不要错过,学完你会发现win32下,vb6还真是无所不能.可贵的是本书的作者是当时vb6 IDE的 ...
- 解决lucene 重复索引的问题
在使用Lucene过程中,会发现当我们为添加新的Document时,会产生重复现象(两次添加同一个Document),毕竟Lucene中没有像数据库中一样,有键可以区分.不过我们可以通过为Docume ...
- PL/SQL — BULK COLLECT用法
BULK COLLECT 子句会批量检索结果,即一次性将结果集绑定到一个集合变量中,并从SQL引擎发送到PL/SQL引擎.通常可以在SELECT INTO.FETCH INTO以及RETURNING ...
- ZOJ 3471 压缩状态DP
这个问题要看状态怎么想,第一种直接的想法是1代表未合并,状态就从1111111 转移到 带有1个0,然后带有两个0, 但是这样子编程非常不直观.换一种思路,0代表未合并,但是我可以先合并前几个,就是说 ...
- 成为Java GC专家(4)—Apache的MaxClients参数详解及其在Tomcat执行FullGC时的影响
下面我们看一下Apache的 MaxClients 参数在Full GC 发生时是如何影响系统的. 大部分开发人员都知道在由于GC发生而导致的”停止世界现象(STW) “(详细请参见Understan ...
- JQ实现3D拖拽效果
<!DOCTYPE HTML> <html onselectstart='return false'> <head> <meta http-equiv=&qu ...
- chrome浏览器扩展--QQ群查看器(1)
QQ群查看器--chrome浏览器扩展 源码及程序下载地址:http://pan.baidu.com/share/link?shareid=3636190804&uk=1678089569 关 ...