目录
清除浮动 clear（重要难点）
内联块状
1.内联元素、块级元素、内联块级元素的主要区别
| 块级元素 | 行内元索（内联） | 内联块级（行内块） |
| 独占一行,默认情况下，其宽度自动填满其父元素 | 相邻的行内元索会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化 | 和其他inline同行显示,但其宽度不会自动填满其父元素 |
| 可以设置width, height属性 | 行内元索设置width，height属性无效 | 和块级元素一样可设置width，height，margin，padding |
| 可以设置margin和padding属性 | 行内元索起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起 | |
| display:block(属性默认值) | display:inline | display:inline-block |
| <address> <caption> 表格标题 <dd> <div> <dl> <dt> <fieldset> <form> <h1>~<h6> <hr> 水平线 <legend> fieldset元素标题 <li> <noframes> <noscript> <ol> <ul> <p> <pre> 定义预格式化文本 <table> <tbody> <td> <tr> <tfoot> <th> <thead> | <a> <s> 表示不准确不相关，却不应当给予删除的内容 <samp> 定义样本文本 <select> | <img>，<input> |
| 替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。 例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看html代码，则看不到图片的实际内容；又例如根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。 html中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素，例如： <img src=”cat.jpg” /> <input type="submit" name="submit" value="提交" /> 浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。 不可替换元素 html 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。 例如： <p>段落的内容</p> 段落<p>是一个不可替换元素，文字“段落的内容”全被显示。 | ||
盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
最终元素的总宽度、总高度计算公式：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
浮动float
什么是 CSS Float（浮动）？
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
脱离文档流，不占空间
元素怎样浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
CSS 浮动属性
| 值 | 描述 |
|---|---|
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
CSS 浮动演示
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
清除浮动 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像：
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。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="news-pic.jpg" />
<p>some text</p>
</div>这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。
如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear：
不幸的是出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。不过我们还有另一种办法，那就是对容器 div 进行浮动：
.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理，这有助于减少或消除不必要的标记。
定位postion
定位可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置,并且可以压住其他盒子
定位的组成=定位模式+边移量
定位模式
定位模式决定元素的定位方式,它通过css的position属性来设置,其值可以分为四个:
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
静态定位 static(了解)
静态定位是元素的默认定位方式,无定位的意思。
静态定位按照标准流特性摆放位置,它没有边偏移。静态定位在布局时很少用到
相对定位 relative(重要)
相对定位是元素在移动位置的时候,相对于它原来位置来说的(自恋型)
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}如下图所示：
注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
示例：relative
相对定位的特点：
1.它是相对于自己原来的位置来移动的(移动位置的时候参照自己原来的位置)
2.原来在标准流的空间位置仍然保留,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来位置)
因此,相对定位并没有脱标,它是典型的应用是给绝对定位当爹的。
绝对定位absolute（重要）
绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}如下图所示：
示例：absolute
绝对定位的特点
1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档)
2.如果祖先元素有定位(相对、绝对、固定定位)则以最近一级的有定位祖先元素为参考点移动位置的。
3.绝对定位不占用原来的位置(脱标)定位在浏览器窗口外，显示滚动条
绝对定位和相对定位关系（重要）
1.绝对定位和相对定位到底有什么使用场景呢？
子绝父相：子级使用绝对定位,父级则需要使用相对定位
2.为什么说相对定位给绝对定位当爹呢？
①子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响到其他兄弟盒子。
②父盒子需要加定位限制子盒子在父盒子内显示
③父盒子布局时,需要占有位置,因此父亲只能是相对定位。
这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级
总结：因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位
当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到
注意：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
固定定位fixed
固定定位是元素固定于浏览器可视区的位置，即使窗口是滚动的它也不会移动。
示例：fixed
https://www.runoob.com/try/try.php?filename=trycss_position_fixed
固定定位的特点：
1.以浏览器的可视窗口为参照点移动元素跟父元素没有任何关系2.不随着滚动条滚动
3.固定定位不保留原来的位置
边偏移
边偏移就是定位的盒子移动最终位置。有top、bottom、left和right4个属性
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top:80px | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
| bottom | bottom:80px | 底部偏移量,定义元素相对于其父元素下边线的距离 |
| left | left:80px | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
| right | right:80px | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
