CSS——读书笔记-03-盒子模型&定位
第三章 可视化格式模型
1.盒子模型
》IE早期版本,包括IE6,width=内容宽度+内边距+边框
box-sizing属性可以定义要使用哪种盒子模型:
- border-width(含内边距边框)
- content-width(只内容宽度)
》外边距叠加
- 2个并列元素外边距叠加,取2个值中最大的。
- 父子元素外边距叠加也是取最大值。
2.定位
详见博文CSS——布局模型 http://www.cnblogs.com/congyue-pepsi/p/5671506.html
》对于定位的主要问题是要记住每种定位的意义:
- 相对定位是“相对于”元素在文档流中的初始位置;
- 绝对定位是“相对于”距离它最近的已定位祖先元素,如果不存在已定位的祖先元素,那么相对于初始包含块。
》局对定位与文档流无关,所以可以覆盖页面的其它元素,使用z-index控制叠放顺序
》包含框相对定位,元素绝对定位 举例:
#branding { width: 70em; height: 10em; position: relative; } #branding .tel { position: absolute; right: 1em; bottom: 1em; text-align: right; } <div id="branding"> <p class="tel">Tel: 1234 123 1234</p> </div>
》注意,周围元素的尺寸改变不会影响绝对定位元素的位置,因为它已经脱离了文档流,所以容易产生覆盖重叠问题,需留意。
》浮动:
- 包含块太窄会向下移动,包含块高度不同,可能会被高的那个卡住。
- 浮动元素会脱离文档流,不影响周围不浮动元素。
- 影响周围浮动元素情况:文本会围绕浮动的图像,设置clear(left/right/both/none)后,可清理该围绕特性,会垂直下降到浮动元素下面。
》因为浮动元素不占据空间,所以容器元素不包围它们,添加一个进行清理的空元素可以迫使容器元素包围浮动元素。
未清理:灰色包含块没有高度在最顶层
.news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } <div class="news"> <img src="/img/img.jpg" alt="my pic"/> <p>Some text</p> </div>
清理后:灰色包含块在所有内部元素底层包含
.news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } .clear { clear: both; } <div class="news"> <img src="/img/img.jpg" alt="my pic" /> <p>Some text</p> <br class="clear" /> </div>
这种方法可以解决,但是添加了多余的代码。
另外,也可以将包含块设置为左浮动,可以解决这个问题,但是会影响下一个元素,可以选择合适元素进行clear。
另一种解决办法:
>在news后添加类名clear
添加了一个点,然后设置高度为0,同时设置不显示。
因为被清理的元素在它们的顶外边距上添加了控件,所以生成的内容需要将它的display属性改为block。这样设置之后,就可以对生成的内容进行清理。
.clear:after { content: "."; height: 0; visibility: hidden; display: block; clear: both; }
越努力,越幸运!