NOTE:CSS
2009-09-12 09:48
330 查看
2009-9-12
1.关于网页的几种常见布局:
固定宽度布局:Fixed Width,这种很常见,像新浪博客就是这种类型的。对于这种布局,在网页宽度上有这么个标准:
Many fixed-width designs are about 760 pixels widea good size for 800 x 600 screens (since you need to leave a little room for scrollbars and other parts of the browsers "chrome"). However, more and more sites (especially ones aimed at a more tech-savvy crowd) are about 950 pixels wide, on the assumption that visitors have at least 1024 x 768 monitors.
也就是:对于800*600的显示器,760个像素是比较不错的,对于1024*768的显示器,950个像素比较合适。
2.关于margin属性的参数问题:
3.关于absolute和relative:
relative在做位置偏移时,参考的原点坐标是自己的正常位置!注意:这个位置要受margin,padding这些元素的影响。
absolute做位移时一定要参考它的上级父容器,直至找到离他最近的带有position属性的父容器,然后以此父容器的原点为坐标原点进行位移。
如果没有找到,那参照的父容器就是<html>.
从实质上来讲,position的作用就是要把一个元素移到一个指定的位置!移动的关键是要找好参照的坐标原点。本质上讲,relative和absolute就是两种确定参照原点的方法。relative不管它的父窗口有没有被position过,它只是很“单纯”从它本来应该处的位置上进行移动。而absolute则是另外一套定位方法:它要找到一个被position过的父容器,以那个父容器为基准进行位移。这暗示:使用absolute的容器是要和被position过的父容器搭配使用的。从而联合构建一种忽略各元素间原本的位置关系而直接参照父容器进行布局的方法!
1.关于网页的几种常见布局:
固定宽度布局:Fixed Width,这种很常见,像新浪博客就是这种类型的。对于这种布局,在网页宽度上有这么个标准:
Many fixed-width designs are about 760 pixels widea good size for 800 x 600 screens (since you need to leave a little room for scrollbars and other parts of the browsers "chrome"). However, more and more sites (especially ones aimed at a more tech-savvy crowd) are about 950 pixels wide, on the assumption that visitors have at least 1024 x 768 monitors.
也就是:对于800*600的显示器,760个像素是比较不错的,对于1024*768的显示器,950个像素比较合适。
2.关于margin属性的参数问题:
3.关于absolute和relative:
relative在做位置偏移时,参考的原点坐标是自己的正常位置!注意:这个位置要受margin,padding这些元素的影响。
absolute做位移时一定要参考它的上级父容器,直至找到离他最近的带有position属性的父容器,然后以此父容器的原点为坐标原点进行位移。
如果没有找到,那参照的父容器就是<html>.
从实质上来讲,position的作用就是要把一个元素移到一个指定的位置!移动的关键是要找好参照的坐标原点。本质上讲,relative和absolute就是两种确定参照原点的方法。relative不管它的父窗口有没有被position过,它只是很“单纯”从它本来应该处的位置上进行移动。而absolute则是另外一套定位方法:它要找到一个被position过的父容器,以那个父容器为基准进行位移。这暗示:使用absolute的容器是要和被position过的父容器搭配使用的。从而联合构建一种忽略各元素间原本的位置关系而直接参照父容器进行布局的方法!
相关文章推荐
- CSS -- Note
- Poechant's CSS Learning Note (诗商的CSS学习笔记)
- CSS实战note
- CSS Note 使用笔记 by Emerald
- Css-note:修改input文本框边框焦点样式笔记
- css note
- CSS布局note
- HTML&CSS note
- css_note
- 通过设置CSS position 属性来固定层的位置
- 多屏复杂动画CSS技巧三则(转载)
- 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch
- 1120练习,CSS制作网页
- css实现文本多行省略
- 前端系列之CSS(盒子模型)
- CSS 使用事例 说明 百度
- javascript+css网址收藏
- 【三月之春】CSS笔记之三
- 【note】R.java文件的错误
- 纯css(无图片)实现带边框三角指示图标