css知识略写

css知识略写

1.在使用div+css布局时，尽可能避免指定元素的宽度和高度，这种砌砖头的写法这会带来许多不肯定的影响，增长调试麻烦，

2.div高度是由其内部文档流元素高度综合决定的（核心）；文档流：文档内元素的流动的方向；

3.注意理解定位相关方面的知识，尤为是position:relative,position:absolute,position:fixed,在平常布局中常用，

4.对于内联元素须要设置width,height,padding，margin时，可使用display：inline-block;block,（基础）

5.理解伪元素和伪类的区别，伪元素：直意为伪造的元素，为了达到某种效果，增长一个元素， 而后再添加样式，例:

p:first-letter {color: red}
I love Web.</p>
复制代码

I love Web

//伪元素：frist-letter添加样式到第一个字母

若是不是用伪元素的话，就得按照下面的方法作：

.first-letter {color: red}
<p><span class='first-letter'>I</span> love Web.</p>
复制代码

//给首字母添加一个span元素，而后给 span 增长样式。 伪类：本质上是一个类选择器，为了达到在特定状态下呈现样式，可使用伪类诸如：a:hover;a:visited…… 例:

p>i:first-child {color: red}
<p>
<i>first</i>
<i>second</i>
</p>
复制代码

first
second

//伪类 :first-child 添加样式到第一个子元素 若是咱们不使用伪类，而但愿达到上述效果，能够这样作：

.first-child {color: red}
<p>
<i class="first-child">first</i>
<i>second</i>
</p>
复制代码

即咱们给第一个子元素添加一个类，而后定义这个类的样式。

因此二者的区别就是：

伪类的效果能够经过添加一个实际的类来达到，而伪元素的效果则须要经过添加一个实际的元素才能达到，这也是为何他们一个称为伪类，一个称为伪元素的缘由。
复制代码

6.了解css float相关知识，布局时常用，

7.line-height能够控制元素的高度，一些状况下能够不用写height

8.vertical-align在内联元素居中对齐方面发挥重要做用，详细了解相关知识

9.字体不一样，字体的高度也不一样，内联元素的默认行高受到浏览器的影响也不尽相同，

10.两种盒模型，content-box和border-box，border-box目前在布局上愈来愈成为趋势了。

11.幽灵空白节点一词出自张鑫旭的博客，原文应为“strut”,译为“支柱”，我的认为这个解释仍是很通俗易懂的，

张鑫旭老师说，只要有“内联盒子”在，就必定会有“行框盒子”，而每一个“行框盒子”前面都有一个“幽灵空白节点”，这 个“空白节点”永远透明，不占据任何宽度，看不见也没法经过脚本获取，就好像幽灵同样， 但又确确实实地存在，表现如同文本节点同样，同时具备该元素的字体和行高属性的0 宽度的内联盒。

(注意，这里有一个前提，文档声明必须是HTML5 文档声明（HTML 代码以下），若是仍是 不少年前的老声明，则不存在“幽灵空白节点”。)

那为何下面这样span为高度为0,没有触发幽灵空白节点？空的span不算内联盒子吗？ 如下原文来自思否@xqxian，谢谢这位的解释，让我茅塞顿开/。

Line boxes are created as needed to hold inline-level content within an inline formatting context. Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.

意思就是若是一个line box里没有文字、保留的空格、非0的margin或padding或border的inline元素、或其余in-flow内容（好比图片、inline-block或inline-table元素），且不以保留的换行符结束的话，就会被视做高度为0的line box。

问题里的<div><span></span></div>就恰好符合这种特殊状况，设置成inline-block就不符合了。题主也能够试着把display改为inline-table，或者设置非0的margin、padding、border等，总之只要不知足上述任一种状况，那么就会受“幽灵空白像素”（官方说法应该叫"strut"元素）的影响从而出现行高.