css疑惑点梳理(一）

1、伪元素选择器和伪类选择器区别

伪元素选择器(::first-letter,::first-line,::after,::before,::selection)：dom中不存在的元素，仅仅是css中用来渲染，添加一些特殊效果的，比如p::before，选择p标签（真元素）前面的假元素（伪元素，p标签前面没有元素，只是假设有）。伪元素的本质是在不增加dom结构的基础上添加的一个元素.

::after :在元素后面添加一个元素

::before :在元素前面添加一个元素

::first-letter： 选择第一个字符

::first-line：选择第一行

::selection :给选中的内容加样式。鼠标选中时添加颜色和背景颜色

类选择器：dom中真实存在的类，如p.test1，选择p标签具有类test1的所有元素，这个类是具体的、可以看见的。

伪类选择器：分为状态伪类和结构性伪类

状态伪类：基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。常见的状态伪类主要包括： :link 应用于未被访问过的链接； :hover 应用于鼠标悬停到的元素； :active 应用于被激活的元素； :visited 应用于被访问过的链接，与:link互斥。 :focus 应用于拥有键盘输入焦点的元素。

结构性伪类：是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。常见的包括：

:first-child 选择属于其父元素的首个子元素；container中的第一个p元素和son-div中的第一个p元素的字体颜色都会变成红色

:last-child 选择属于其父元素的最后一个子元素；container 最后一个p元素和son-div的最后p 元素颜色变红

:nth-child() 选择某个 元素(p)匹配的父元素(container, son-div)中第 几 个子(p)元素；container中第二个p元素会变红。son-div中第二个p元素会变红

:nth-last-child() 选择某个 元素(p)匹配同类型中的倒数第 2 个同级兄弟元素

:nth-of-type() 与:nth-child()一样 :nth-last-of-type() 与:nth-last-child()一样； :first-of-type 选择一个父元素下的第一个同类子元素；

:last-of-type 选择一个父元素的最后一个同类子元素；

:only-child 选择的元素是它的父元素的唯一一个子元素；

:only-of-type 选择一个元素是它的父元素的唯一一个相同类型的子元素；

:empty 选择的元素里面没有任何内容。

2、关系选择器 （1）相邻后代选择器(>)：选择合乎规则儿子元素。

（2）兄弟选择器(~):选择当前元素的合乎规则所有兄弟元素

(3)相邻选择器(+)： 选择当前元素相邻的那个合乎规则的兄弟元素

（4）后代选择器： 空格。选择合乎规则的后代元素

3、深藏不露width:auto

width 的默认值是auto。至少包含以下4种不同的宽度表现。 （1）充分利用可用空间。如div、p元素的宽度默认100%于父级容器的。

（2） 包裹性 实际案例：页面某个模块的文字内容是动态的，可能是几个字，也可能是一句话。然后希望文字少的时候居中显示，文字超过 一行的时候居左显示。

（3）收缩到最小:当空间不够的时候，文字能断就断，但是中文能随便断的。英文单词不能断。在 CSS 世界中，图片和文字的权重要远大于布局，因此，CSS 的设计者显然是不会让图文在 width:auto 时宽度变成 0 的，此时所表现的宽度就是“首选最小宽度”。 汉字最小宽度是每个字的宽度 英文最小宽度是由连续的英文字符单元决定，终止于空格，短横线及其他非字母符号 想让英文字符和中文一样一个字符为最小宽度，可以使用css中的 word-break:break-all 属性 类似图片这样的替换元素的最小宽度就是该元素内容本身的宽度 实际案例：显示凹凸形状。

（4）超出容器限制 除非有明确的width相关设置。否则上面3种情况尺寸都不会主动超过父级容器的宽度。若设置了white-space:nowrap 文字超出容器也不会换行。这种情况下就会超出父级容器的宽度。

4、IE盒模型和标准盒模型的区别 IE盒模型和标准盒模型的总宽度都是由四个部分组成的：margin，border，padding，content 不同点： 标准盒模型的宽度只有content部分，是独立的。 IE盒模型宽度 = content + padding + border

问题： width:100px 是如何作用到div元素上的？ 是作用到content-box上的。如果padding、border和margin都是0。该div所呈现的宽度就是100px。若加上padding、border div的实际宽度就会超过100px.这种宽度设定和表现并不合理。总结为以下两点。 （1）流动性丢失 （2）与现实世界表现不一致的困扰 解决方案： （1）宽度分离

嵌套一层标签，父元素定宽。子元素因为width使用的是默认值auto,所以会如水流般自动充满父级容器。修改子元素的padding或者border都不会影响其实际宽度。 （2）box-sizing：改变width的作用细节。 width默认作用到content-box上。而box-sizing可以让width作用到content-box,border-box上。 作用到content-box上(box-sizing: content-box)：div实际宽度是142 = width(100) + 2padding(20) + 2border(1)

作用到border-box(box-sizing: border-box)上

如何评价* {box-sizing: border-box} (1)易产生没有必要的消耗，因为号会选择所有的标签元素。对于普通的内联元素来说，box-sizing无论为什么值都没有影响。 因此对这些元素而言是没有必要的消耗。同时有些元素，如search类型的搜索框input，其默认的box-sizing就是border-box。因此 也是没有必要的消耗。 （2）这种做法并不能解决所有问题 box-sizing不支持margin-box。只有当元素没有水平margin时候。box-sizing才能真正无计算。而上面提到的'宽度分离'可以彻底解决所 有的宽度计算的问题。 5、为什么父级没有具体高度的时候，height:100%会无效？而父元素没有具体宽度的时候，width: 100%会生效？

原因：父元素没有设置高度，那么默认为auto。auto * 100% = NaN。 具体地讲，所有基于百分比的尺寸必须从父块元素继承，并且如果任一父项未能指定尺寸，则它们的尺寸假定为0 x 0像素。 当子元素设置宽度为width: 100%，而父元素没有设置宽度时。这个元素的宽度为什么会立刻扩展到窗口的整个横向宽度。为什么高度就不行。

为了理解为什么不会，你需要理解浏览器是如何计算高度和宽度的。Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。 但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。 因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。 如果想让一个元素的百分比高度height: 100%;起作用，有两种方法 （1）设定显示的高度值

（2）使用绝对定位

此时的height: 100%就会有计算值。即使祖先元素的height计算为auto也是如此。需要注意的是绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的。绝对定位的宽高百分比是相对于padding-box。非绝对定位的元素则是相对于ocntent-box计算的。对比一下 非绝对定位元素

绝对定位元素 设置了absolute那么子元素高度就默认参照position:relative元素(box)高度。