NOTE:CSS - javahigh1 - ITeye博客

`

javahigh1

浏览: 1277062 次
性别:
来自: 北京

最近访客更多访客>>

u012363178

coolworld

烈酒清风丶

walker33

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

全部博客 (1653)

社区版块

存档分类

最新评论

Virtoway：说到ASP.NET刚读到一片美国构架师的文章关于使用asp.n ...
ASP.NET MVC概览（C#）
marks_2010：你好，我有一个excel文件，里面假设有“姓名：”这些内容，j ...
根据excel或者doc模板生成excel和doc文档
wzye2001：非常好，期待楼主的下一篇关于doubango的文档
Doubango ims 框架分析之多媒体部分
fenghuazh：在window下路径有空格会抛异常
配置Cargo
fenghuazh： [b][/b]
配置Cargo

NOTE:CSS

阅读更多

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过的父容器搭配使用的。从而联合构建一种忽略各元素间原本的位置关系而直接参照父容器进行布局的方法！

分享到：

AGF和WKB | 阿里十周年马云经典语句

2009-09-12 09:48
浏览 694
评论(0)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

simplenote-assets:CSS和JS: 标题 "simplenote-assets:CSS和JS" 暗示了这是一个关于前端开发的项目，专注于CSS（层叠样式表）和JavaScript的实现。在Web开发中，这两者是构建交互式和视觉吸引人的用户界面的关键技术。CSS用于定义网页的布局、...

:dollar_banknote:仅使用Javascript，HTML和CSS开发的收支控制网站。-JavaScript开发: :dollar_banknote:仅使用Javascript，HTML和CSS开发的收支控制网站。 :dollar_banknote:财务控制:rocket:关于项目这是一个用于记录收入和支出的财务控制网站。它还具有更改主题的功能，通过单击页面底部的“深色/...

质子交膜燃料电池(#PEMFC) 稳态 AND 动态建模及仿真分析 Note：硕士lunwen复Xian；title：质子交膜燃料电池建模仿真与特性研究内容： 1. 根据车辆结构参数和性能: Note：硕士lunwen复Xian；title：质子交膜燃料电池建模仿真与特性研究内容： 1. 根据车辆结构参数和性能参数确定燃料电池组相关参数, eg. 额定功率，最大功率等. （根据需求可省略，或改进); 2. 基于电化学经验...

HTML&CSS note: ### HTML & CSS Note #### HTML 简介 HTML（HyperText Markup Language）是一种标准标记语言，用于创建网页。HTML 元素通过一系列标签来表示，这些标签定义了页面的结构和内容。HTML 标签通常由尖括号包围，例如 `...

simplenote:Franz服务插件: 这暗示着我们可能可以找到完整的源代码，包括HTML、CSS和JavaScript文件，用于构建和定制这个Simplenote插件。 **JavaScript在插件开发中的应用** 在Franz插件开发中，JavaScript主要用于处理用户的交互，例如点击...

my-note:个人代码笔记: CSS：css3的一些骚操作，部分代码借鉴然后整理的一些常用代码。 JavaScript：js编写的日常用到的功能组件，xxx.html对应xxx.js这样的目录结构。utils.js是所有工具类型代码整合的收录文件，方便我自己复制粘贴用。 ...

MyNote:自用笔记: 【标题】"MyNote:自用笔记"是一个个人笔记管理项目，可能是一个开源或私人创建的代码库，用于整理和存储个人的学习、工作或其他主题的笔记。从标题来看，我们可以推测这可能是一个软件或者应用程序，它允许用户创建...

Note:过千帆的记事本: 【标题】：“Note:过千帆的记事本”是一个以过千帆个人名义创建的笔记平台，旨在分享关于各种主题的知识和见解。这个平台可能包含技术教程、心得感悟、项目经验等内容，用户可以通过访问://note.guoqianfan.com/来...

css详细说明文档，入门者有的利帮手．DOC文档格式，使用非常方便．．: .note1 { color: Green; } 这是开头段落这是主要内容这是结束段落 ``` 5. CSS选择器： CSS选择器用于匹配HTML元素并应用样式。常见的选择器包括标签选择器（如`p`）、类选择器（如`.myClass`）、ID选择...

音乐播放器：:musical_note:创建漂亮的UI，以使用HTML5音频API播放“音乐文件夹”中存储的音乐: 音乐播放器 :musical_note: 使用HTML5音频API创建漂亮的UI来播放“音乐文件夹”中存储的音乐工具该应用程序使用Web开发中的所有最新工具和实践！ :deciduous_tree: HTML — Web页面的标准标记语言。 :artist_palette...

ApplicationNote:极小故事的招聘任务: 标签的出现表明这份应用说明可能涉及到使用CSS进行界面设计和开发，可能包括对候选人CSS技能的要求，或者是如何评估候选人在CSS方面的技术能力。【文件内容推测】 "ApplicationNote-main" 这个压缩文件名暗示它是...

shownote:云笔记项目预览: 5. SCSS或LESS：CSS预处理器，提供更强大的CSS语法和模块化功能。 6. ESLint：代码质量工具，用于保持代码风格的一致性和避免潜在错误。 7. PWA（Progressive Web App）特性：如Service Worker和Manifest.json，可以...

XMind-Note:xmind笔记: 这些功能的实现往往依赖于HTML与其他Web技术（如JavaScript和CSS）的结合使用。总的来说，XMind-Note是HTML技术在知识管理领域的一个成功应用实例。它将HTML的强大表现力与思维导图的结构性优势结合，为用户提供了...

note:就是一个朴实无华的笔记本: 在这个压缩包中的"note-main"可能包含了关于如何使用CSS来美化或管理对数序列相关的页面展示的内容。例如，开发者可能分享了如何使用CSS来创建动态的对数图表，或者如何通过CSS实现响应式设计，使得在不同设备上查看...

lite-note:简明笔记: "lite-note:简明笔记"是一款基于TypeScript开发的轻量级笔记应用，旨在提供一个简洁、高效的笔记环境，让使用者能够快速记录和整理思绪。这个应用可能包含了前端开发的各种技术，如HTML、CSS和JavaScript的高级形式...

harmonoid.github.io：:musical_note:谐波项目网站: 【标题】：“harmonoid.github.io：:musical_note:谐波项目网站”是指一个以音乐为主题的开源项目，它的官方网站托管在GitHub上。这个项目可能是为了创建一个与音乐相关的交互式平台，用户可以通过该平台探索、学习...

myNote:这是我的笔记: 【标题】: "myNote:这是我的笔记" 涉及到的知识点主要集中在个人笔记管理和版本控制方面，因为标题中的“myNote”通常代表个人笔记系统或项目，而“master”是Git仓库的主要分支名，暗示了这个压缩包可能包含了一个...

CSS选择器-.pdf: <?xml-stylesheet type="text/css" href="note.css"?> <note> <to>George <from>John <heading>Reminder <body>Don't forget the meeting! </note> ``` CSS 文档： ```css note { font-family: Verdana, Arial;...

html-css-note.rar_html 前端: 这份"html-css-note.rar"压缩包集合了关于HTML与CSS的常见效果笔记，对于初学者来说，是一份非常实用的学习参考资料。 HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它通过各种标签来定义网页...

note++插件：visimulator: 1. **代码模拟器/预览**：此插件可能提供一个内置的代码模拟器，允许你在Note++中实时预览代码的执行效果，这对于学习和调试代码特别有用，特别是对于前端开发人员，可以在不离开编辑器的情况下查看HTML、CSS和...

Global site tag (gtag.js) - Google Analytics