知识

块级元素和行内元素

分类	英文全称	举例
块级元素	block-level	div;h1~h6;table;td tr th;ul ol li;dl dt dd;pre;form;hr;p
行内元素	inline-level	span em strong;a;br;img;button;input;label;select;textarea;code;script

特性区别

块级和行内的特性区别.png

JSBin地址

由图可知：
块级元素可以包含块级元素和行内元素，而行内元素只能包含行内元素和文本。
观察红色边框，可知块级元素可以用CSS控制宽高，行内元素不行。
观察红色边框，块级元素直接占据一整行元素，即使后面还有很大空间。而行内元素一行可以有多个，只占据自身宽度空间。
由行内元素的红色部分和黄色部分可知，行内元素的margin、padding只有左右方向有效，上下无效。

CSS 继承

CSS继承：子元素没有指定值的情况下，会继承父元素设置的一些属性值。
可继承的：
所有元素：visibility、cursor；
块状元素：text-indent、text-align；
列表元素：list-style、list-style-type、list-style-position、list-style-image；
表格元素：border-collapse；
内联元素：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction；
不可继承：
display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

块级元素和行内元素分别如何水平居中

块级元素：设置margin: _px auto;即可。
行内元素：在其所处的块级元素的CSS中，设置text-align: center;即可。

水平居中.png

用 CSS 实现一个三角形

块级元素，宽高设0，边框做特别粗，根据需要设置若干个边框透明即可。
CSS代码：

.triangle {
  height: 0;
  width: 0;
  border-top: 50px transparent solid;
  border-right: 50px transparent solid;
  border-bottom: 50px red solid;
  border-left: 50px transparent solid;   
}

triangle.png

如何实现单行文本溢出加 ...

CSS代码：

.b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

文本溢出.png

PS: 把ellipsis换成clip，是砍掉的效果，如下图

文本溢出2.png

Px, Em, Rem 的区别

px：固定单位，像素px是相对于显示器屏幕分辨率而言的
em：相对单位，相对于父元素，即相对于当前对象内文本的字体尺寸。若当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
rem：相对单位，与em类似，是相对于根元素（html）。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

解释下图代码

6.png

该代码表示：设置body内的字体大小为12px，行高为字体大小的1.5倍（即18px），字体样式首选tahoma ，其次arial，Hiragino Sans GB，\5b8b\4f53（优先级依次递减），查找电脑里对应字体的字体文件，如果都没有，则选用浏览器默认字体 sans-serif。
加引号的原因：如果不加，浏览器可能会把Hiragino Sans GB误解为若干个字体样式。
\5b8b\4f53是Unicode码编号，表示“宋体”：