CSS层叠样式表(Cascading Style Sheets)
background-position:top;
图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。
文本缩进
text-indent:15px;
text-indent 属性可以继承，请考虑如下标记：
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div> |
以上标记中的段落也会缩进 50 像素，这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。
CSS 框模型
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
<div style="padding:20px;margin:20px;height:40px;border:2px solid black;"> 增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 </div> |
CSS定位
.pink{
background-color: pink;
color:white;
margin:1px;
}
.blue{
margin:1px;
background-color: blue;
color:white;
}
<table class="pink">
<tr>
<td>
块级元素table
</td>
</tr>
</table>
<form class="pink">
块级元素form
</form>
<blockquote class="pink">
块级元素blockquote
</blockquote>
<address class="pink">
块级元素address
</address>
<h1 class="pink">
块级元素h1
</h1>
<div class="pink">
块级元素div
</div>
<p class="pink">
块级元素p
</p>
<span class="blue">
行内元素span
</span>
<strong class="blue">
行内元素strong
</strong> |
块级元素和行内元素效果如下：
行内元素块级元素的转换
<div style="display:inline;background-color:blue;"> display:inline将块级元素div设为行级元素 </div> <div style="display:inline;background-color:pink;"> display:inline将块级元素div设为行级元素 </div> <span style="display:block;background-color:pink;"> display:block将行内元素span设为块级元素 </span> |
不占一行的块级元素display:inline-block
<div style="display:inline-block;height:50px;background-color:pink;margin:3px;"> 不占一行的块级元素 </div> <span style="display: inline-block;height:50px;background-color:blue;margin:3px;"> 不占一行的块级元素 </span> |
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
<div style="float:right;width:250px;height:250px;background-color: #000;color:white;"> 浮动div①浮动div①浮动div①浮动div①浮动div①浮动div① 注意： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 </div> <div style="width:250px;height:250px;background-color: pink;color:white;"> 原始div②原始div②原始div②原始div②原始div②原始div② </div> |
