读书笔记:CSS禅意花园-布局方法
来源:互联网 发布:win7 知乎 编辑:程序博客网 时间:2024/06/08 15:52
在介绍布局之前,我们应该先清楚布局的法则,虽然这个是在Web布局之前出现的,但是这里也是延伸了它的规则。
在任何一种以图画作为表达方式的艺术品中,布局的作用都是-有效的组织内容,但是在Web布局还有个作用就是辅助实现页面的功能。
布局基础:
对于布局我们必需精通的两种主要的布局方法,它们有利有弊,也可以相辅相成:第一种是使用CSS中四种定位选项(static、relative、absolute、fixed)中的absolute绝对定位,它可以将元素从原来的位置上移除,并重新定位在任何期望的地方。第二种是使用CSS的浮动(Float)概念,其主要是为元素分配一定的空间,然后让文档的其他部分围绕在起周围。其一般是和清除浮动(Clear)成双出现。
在大多数情况下绝对定位是布局的明智之选,但是对于那些需要考虑页脚或者是页面的其他元素需要了解周围元素的布局来说,使用浮动是不二之选。
现在主体来说分为两类布局:固定布局和流式布局。
固定布局:指页面有着固定的宽度,居左、居右(这个比较少)对齐,或者居中,但是页面的宽度不随着浏览器窗口的宽度变化而改变。其优势在于固定了大小,在布局页面时游刃有余,在图文混排模式时,一行中的文字长度易于控制。我认为其最好的一点就是一致性。其劣势主要是容易导致视觉失衡,解决办法一般是让作品水平居中,把空白留在左右两边。
使作品居中方法:
1、使用自动外边距居中;2、使用text-align的居中属性(这个我试过,在div之类的块元素上不适用);3、自动外边距和text-align一起使用;4、负外边距方案(这个是个极好的方案);
流式布局:指页面的宽度用百分比设定,不是固定的宽度值,所以页面会随着浏览器窗口的宽度变化而变化,甚至会填满窗口。其优势在于最大限度的利用空间,避免了页面空白部分,使之更均衡。我认为其最好的就是灵活性,针对不同的分辨率实现不同的展现。其劣势在于我们无法精确掌握行长、页面布局和元素的位置。这个至今没有完美的解决方案,只有靠经验来具体问题具体分析。
0 0
- 读书笔记:CSS禅意花园-布局方法
- 读书笔记:CSS禅意花园-布局法则
- 读书笔记:CSS禅意花园-布局细则
- 读书笔记:CSS禅意花园-图像
- 读书笔记:CSS禅意花园-文字排印
- css禅意花园
- CSS禅意花园
- css 禅意花园
- css - 禅意花园 - 设计
- CSS禅意花园
- 《CSS禅意花园》读后感
- CSS学习 禅意花园book
- CSS禅意花园标准HTML
- CSS禅意花园---絮语 之基础
- 看css禅意花园记的笔记
- CSS大道至简--读《CSS禅意花园》
- CSS大道至简--读《CSS禅意花园》
- CSS大道至简--读《CSS禅意花园》
- Centos安装google浏览器01
- requirejs学习(三)
- 将某个帐号加入群组
- awk工具使用
- java简介
- 读书笔记:CSS禅意花园-布局方法
- Reverse Words in a String
- Kendo UI开发教程(12): Kendo MVVM 数据绑定(一) attr
- 类苹果启动器 Cairo Dock 3.1.2 稳定版
- DG的dataguard real time apply
- C#中线程的认识
- VS调试技巧
- quick-x 2.2.1 语法摘记之framework.functions
- 夏天6种情况下再热也别洗澡