重看css权威指南 part4
来源:互联网 发布:绵阳广电网络宽带 编辑:程序博客网 时间:2024/05/25 05:36
这一部分的名字叫基本视觉格式化,主要讲了下元素框,边距之类的东西,也对前边的baseline,inline box等知识做了很多补充。
这里提到一个词,元素框。先说水平方向上。(以下讨论的都是块级元素和行内块元素,对于行内元素以后再说)
元素框水平宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距 = 包含块的width。
这里,包含块指的是该元素的 "布局上下文" ,通常是最近的父级块元素,表单元格,或者行内块元素。 其中,width,margin-left,margin-right三个的值可以设为auto。对于从左到右的正常流
1.当width为固定值,左右margin都不设置时,它的margin-right会自动设置大小,以保证元素框的宽度 = 包含块的width。例如,如果包含块的width为800,子元素的width为600,那么子元素的margin-right会设置为200(这里假设padding,border都为0)。如果子元素width为1000,那么子元素的margin-right会设置为-200。(浏览器的开发工具中显示的盒子模型中不会显示被自动设置的margin值)
2.当margin-left/margin-right为固定值,width和margin-right/margin-left都不设置时,width会自动设置自己的值,以保证元素框的宽度 = 包含块的width。
3.当margin-left和margin-right都设置为固定值,嗯,一个道理。
4.当margin-left,margin-right,width都设置为固定值,但元素框的宽度 != 包含块的width该怎么办。这时,margin-right会改变自己的值,即使你给他设置了固定的宽度。
auto可以应用在margin,height,width上。height后面再说。
5.前面说到四种情况,那么说说第五种情况。当width固定,margin-right为固定值,margin-left不设置时,会怎样。
按照前面的说法,margin-left应该会自动改变自己的值,但实际上并非如此。除非我们给margin-left设置auto。
6. 当我们为margin-left和margin-right都设置auto时,整个元素就会居中,这也是常用的给块级或者行内块级元素居中的方法。
7.对于图片,当设置他为block或inline-block,给他设置了width或height后,它的height或width会自动等比例放大或缩小。
使用auto时要注意一点,在有些浏览器下,如果包含块的width没有设置,那么auto可能会无效。
- 重看css权威指南 part4
- 重看css权威指南 part1
- 重看css权威指南 part2
- 重看css权威指南 part3
- 重看css权威指南 part5
- 重看css权威指南 part6
- 重看css权威指南 part7
- 重看css权威指南 part8
- CSS权威指南
- 再读《CSS权威指南》
- 再读《CSS权威指南》
- 《CSS权威指南》--附录
- 《CSS权威指南》
- CSS权威指南 笔记
- 《CSS权威指南》读书笔记
- CSS权威指南-@import
- CSS权威指南-特殊性
- CSS权威指南-继承
- 1050. 螺旋矩阵(25)
- pca/princomp路径冲突问题解决
- 2017年1月6日读书
- hdoop 文本数据按列去重
- php 二分查找
- 重看css权威指南 part4
- git reset soft hard mixed 详解
- DataAdapter和SqlBulkCopy的插入性能测试
- mybatis之通过单例模式来管理SqlSessionFactory
- linux socket编程之TCP与UDP
- windows下如何在一台机器上安装两个MYSQL数据库
- Celery 学习笔记(2)- 定时任务
- sk_buff详细介绍
- 开发者最常用的 8 款 Sublime text 3 插件