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