知识
块级元素和行内元素
| 分类 | 英文全称 | 举例 |
|---|---|---|
| 块级元素 | 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码编号，表示“宋体”：
字体.png
代码
四个div.png
2. 五个button
9.png
10.png
七个三角形.png
两个Card.png
