《精通CSS》第八章——总结和补充
来源:互联网 发布:淘宝达人什么意思 编辑:程序博客网 时间:2024/05/29 19:27
1. 让设计水平居中
- 固定宽度的元素,对其设置margin: 0 auto;
- 兼容性问题:IE 5.x 和 IE 6 不支持以上的方法,可以使用text-align:center;(但是对于其他文本需要重新设置text-align)
2. 基于浮动的布局
- 在html中,将主要的内容放在次要的内容前,尽管次要内容位于页面的左边
- IE浏览器中,会考虑内容的尺寸,而不是元素本身的尺寸。因此元素可能会随着内容的扩展而扩展。
- 为了防止本该在同一行的浮动元素变为两行,我们将左右两个元素分别向左向右浮动,并且在两个元素之间的间隙留出来。
3. 关于命名的问题
把主要内容区类名命名为primary,次要内容区类名命名为secondary。可以嵌套实现多次使用类名,并且名字的含义也很清晰。
4. 三列的浮动布局
运用两次两列的浮动布局方式即可。
5. 流式布局
尺寸用百分数设置。
- 设置min-width防止因为屏幕变小导致元素太窄,同理可设置max-width,以em为单位设置,保证可读性。
- 并且注意百分数是相对于父元素的百分数。
6. 弹性布局
相对于字号来设置元素宽度。
- 由于字号增大宽度会变宽,因此需要设置max-width防止出现水平滑动条
- 设置基字号
body{ font-size: 62.5%;}- 技巧:只用em设置容器宽度,内部任然使用百分数,便于维护。
7. 流式和弹性的图片
-防止图片失真:设置max-width
8. faux列
??? 依旧没看懂
9. 高度相等的列
- 利用裁剪将三列裁剪到同样的地方,以内容最长的为基准
通过设置margin-bottom为负值,因此父元素裁剪溢出内容时,以最低的一个margin为准。
阅读全文
0 0
- 《精通CSS》第八章——总结和补充
- 《精通CSS高级WEB标准解决方案》第八章:招数和过滤器
- 精通DIV+CSS总结
- 【阅读】《Head First HTML 与 CSS》第八章——增加字体和颜色样式
- 【UML入门教程】——总结和自我补充
- 第八章 CSS选择器
- CSS自学笔记(一)总结补充
- 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素
- React入门到精通(三)——定义组件和css样式
- 第八章:JavaScript事件驱动编程和访问CSS技术
- 使用HTML语言和CSS开发商业站点第八章
- 精通CSS.DIV样式布局总结
- 精通CSS+DIV基础总结(一)
- 精通CSS+DIV基础总结(二)
- 精通CSS+DIV基础总结(三)
- Servlet第八章知识点总结——过滤器 过滤器链
- JAVA编程思想学习总结:第八章——多态
- IO库总结——C++Primer第八章
- 圣诞不眠夜,京东智能打造智能硬件圈子
- 写一个简单的makefile
- js中的"."可换成"[]"
- 计算机网络核心
- Unity-UI&EasyTouch
- 《精通CSS》第八章——总结和补充
- java两链表求和
- python迭代工具
- 走一路买一路,高铁管家催生“剁手族”升级版?
- [并查集]Baltic OI 2016 Park
- Java学习笔记之接口
- python matplotlib中文显示问题
- 「2016年桔 · 裂变创新大会」:盘点2015年让资本疯狂的商业模式
- 腾讯手机管家联手微信打造立体支付保护