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 {
     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;
}