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

  

原文地址:https://www.cnblogs.com/congyue-pepsi/p/5694445.html