原文地址：https://geekplux.com/2014/04/25/several_core_concepts_of_css

本文将讲述 CSS 中最核心的几个概念，包括：盒模型、position、float等。这些是 CSS 的基础，也是最常用的几个属性，它们之间看似独立却又相辅相成。为了掌握它们，有必要写出来探讨一下，如有错误欢迎指正。

元素类型

HTML 的元素可以分为两种：

  • 块级元素（block level element）
  • 内联元素（inline element 有的人也叫它行内元素）

两者的区别在于以下三点：

  1. 块级元素会独占一行（即无法与其他元素显示在同一行内，除非你显式修改元素的 display 属性），而内联元素则都会在一行内显示。
  2. 块级元素可以设置 width、height 属性，而内联元素设置无效。
  3. 块级元素的 width 默认为撑满父元素，而内联元素则是根据其自身的内容或子元素来决定其宽度。

最常见块级元素应该是 <div> 吧，内联元素有 <span> <a> <img> 等等，完整的元素列表可以谷歌一下。

具体来说一下吧,

.example { width: 100px; height: 100px; }

我们为 <div> 设置上面的样式，是有效果的，因为其是块级元素，而对 <span> 设置上面的样式是没用的。要想让 <span> 也可以改变宽高，可以通过设置 display: block; 来达到效果。当 display 的值设为 block 时，元素将以块级形式呈现；当 display 值设为 inline 时，元素将以内联形式呈现。

若既想让元素在行内显示，又能设置宽高，可以设置：

display: inline-...
Continue to read