块级元素

“块级元素”对应的英文是 block-level element，常见的块级元素有<div>、<li>和<table> 等。需要注意是，“块级元素”和“display 为 block 的元素”不是一个概念。例如，<li>元 素默认的 display 值是 list-item，<table>元素默认的 display 值是 table，但是它们 均是“块级元素”，因为它们都符合块级元素的基本特征，也就是一个水平流上只能单独显示一 个元素，多个块级元素则换行显示。

文字少的时候居中显示，文字超过一行的时候居左显示

<div class="box">
  <p id="conMore" class="content">
    文字内容-新增文字-新增文字-新增文字
  </p>
</div>

.box {
  text-align: center;
}
.content {
  display: inline-block;
  text-align: left;
}

三无准则，即“无宽度，无图片，无浮动”

CSS 盒子模型

浏览器是按照从上而下、自外而内的顺序渲染 DOM

块级元素负责结构，内联元素负责内容

利用content属性实现图片变化效果实例页面

<img src="laugh.png" />

img:hover {
  content: url(laugh-tear.png);
}

线上演示 (opens new window)

待续。。。

css世界在实际代码编写中应用较少，等买了css新世界再继续