20210129 104道常见经典CSS面试题笔记(11-20)

11 position的值relative和absolute定位原点？

absolute== 生成绝对定位的元素，相对于值不为static的第一个元素的padding box进行定位，也可以理解为离自己这一级元素最近的一级position设置为absolute或者relative的父元素的padding box的左上角为原点的。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位
relative 生成相对定位的元素 相对于其元素本身所在正常位置进行定位
static 默认值 没有定位，元素出现在正常的流中
inherit 从父元素继承position属性的值

12 CSS3有哪些新特性？

新增各种CSS选择器 :note(.input) 所有class不是input的节点
圆角 border-radius
多列布局 multi-column layout
阴影和反射 shadow/reflect
文字特效 text-shadow
文字渲染 text-decoration
线性渐变 gradient
旋转 transform
缩放，定位，倾斜，动画，多背景
transform:scale(0.5,0.9),translate(0px,-30px),skew(-9deg,0deg),animation

13 CSS3的flex box(弹性盒布局模型)及适用场景？

flex是flexibleBox的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为flex布局。行内元素也可以适用flex布局。设为flex布局以后，子元素的float，clear和vertical-align属性将失效。
采用flex布局的元素，称为flex容器，简称容器。它的所有子元素自动成为容器成员，成为flex项目，简称项目。
容器默认存在两根轴，水平的主轴和垂直的交叉轴，项目默认沿主轴排列。
以下六个属性设置在容器上:
flex-direction 属性决定主轴的方向
flex-wrap 属性决定如何换行
flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content 属性定义来项目在主轴上的对齐方式
align-items 属性定义项目在交叉轴上如何对齐
align-content 属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
以下两个属性设置在项目上:
order 属性定义项目的排序顺序，数值越小，排列越靠前，默认为0
flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink 属性定义了项目的缩小笔记，默认为1，即如果空间不足，该项目缩小
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间，它的值为auto，即项目的本来大小。
flex 属性是flex-grow，flex-shrink和flex-basis的简写，默认值0 1 auto。
align-self 属性允许单个项目有与其它项目不一样的对齐方式。可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

14 纯CSS创建一个三角形的原理？

/*
采用相邻边框连接处的均分原理。将元素的宽度设为0，只设置border
把任意三条边隐藏掉 颜色均为 transparent
剩下的就是三角形
*/
.demo{
	width:0;
	height:0;
	border-width:20px;
	border-style:solid;
	border-color:transparent transparent red transparent;
}

15 一个满屏 品 字布局如何设计？

简单的方式:
上面的 div 宽 100%
下面的两个 div 分别宽 50%
然后用 float 或者 inline 使其不换行即可

16 CSS多列等高如何实现？

1. 利用padding-bottom | margin-bottom正负值相抵，不会影响页面布局的特点。设置父容器超出隐藏，这样父容器的高度还是它里面的列没有设定padding-bottom时的高度，当它里面的任一高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。
2. 利用table-cell所有单元格高度都相等的特性，来实现多列等高
3. 利用flex布局中项目align-items属性默认为stretch，如果项目未设置高度或设为auto，将占满整个容器的高度的特性，来实现多列等高。

17 常见的浏览器兼容性？原因？解决方法？常用hack技巧

1. png24位的图片在IE6浏览器上出现背景
   解决方案: 做成png，也可以引用一段脚本处理。
2. 浏览器默认的margin和padding不同
   解决方案: 加一个全局 *{margin:0;padding:0;}来统一
3. IE6双边距bug，在IE6下，如果对元素设置来浮动，同时又设置来margin-left或margin-right，margin值会加倍

.demo{float:left;width:10px;margin:0 0 0 10px;}

这种情况下ie会产生20px的距离
解决方案: 在float的标签样式控制中加入_display:inline；将其转化为行内属性，这个_符号只有ie6会识别.
4. 渐进式识别的方式，从总体中逐渐排除局部
首先，巧妙的使用"\9"这一标记，将ie浏览器从所有情况中分离出来
接着，再次使用"+"将ie8和ie7，ie6分离开来，这样ie8已经独立识别

.demo{
	background-color:#fff; /* 所有识别*/
	.background-color:#fff; /* ie6,7,8 识别*/
	+background-color:#fff; /* ie6,7 识别*/
	_background-color:#fff; /* ie6 识别*/
}

5. ie下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute获取自定义属性，firefox下，只能使用getAttribute获取自定义属性。
   解决方法: 统一通过getAttribute获取自定义属性
6. ie下，event对象有x，y属性，但是没有pageX，pageY属性，firebox下，event对象有pageX，pageY属性，但是没有x，y属性。
   解决方法: 条件注释，缺点是在ie浏览器下可能会增加额外的http请求数。
7. chrome中文界面下默认会将小于12px的文本强制按照12px显示。
   解决方法: 可通过加入css属性-webkit-text-size-adjust:none解决。但是chrome更新到27版本之后就不可以用了。
   还可以使用-webkit-transfor:scale(0.5)，注意-webkit-transform:scale(0.75)收缩的是整个span大小，这时候必须要将span转换成块元素，可以使用display:block/inline-block。
8. 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active
   解决方法: 改变css属性的排列顺序LVHA
9. 怪异模式问题，漏写DTD声明，firefox仍然会按照标准模式来解析网页，但在ie中会触发怪异模式，为避免怪异模式带来不必要的麻烦，最好养成书写DTD声明的好习惯。

18 li与li之间有看不见的空白隔是什么原因造成的？怎么解决？

浏览器会把inline元素间的空白字符(空格，换行，tab等)渲染成一个空格，而为了美观。通过li放在一行，这导致li换行后产生换行字符，它变成一个空格，占用来一个字符的宽度。
解决方案:

1. 给li设置float:left。不足:有些容器是不能设置浮动，如左右切换焦点图等。
2. 将所有li写在同一行。不足:代码不美观。
3. 将ul内的字符尺寸直接设为0，即font-size:0。不足:ul中的其他字符尺寸也被设为0，需要额外重新设定其他尺寸，且在safari浏览器依然会出现空白间隔。
4. 消除ul的字符间隔letter-spacing-8px。不足:这也设置来li内的字符间隔，因此需要将li内的字符间隔设为默认letter-spacing:normal。

19 为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化往往会出现浏览器之间的页面显示差异。
当然初始化会对seo有一定影响，但鱼与熊掌不可兼得，但力求影响最小但情况下初始化。
最简单的初始化

*{margin:0;paddingh:0;} /* 不建议 */

淘宝的样式初始化代码:

// 淘宝样式初始化代码：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

20 什么是包含块，对于包含块的理解

包含块 containing block 就是元素用来计算和定位的一个框

1. 根元素 很多场景下可以看成是<html>被称为初始包含块其尺寸等同于浏览器可视窗口大小。
2. 对于其他元素，如果该元素的position是relative或者static，则包含块由其最近的块容器祖先盒的content box边界形成。
3. 如果元素position:fixed 则包含块是初始包含块。
4. 如果元素position:absolute 则包含块由最近的position不为static的祖先元素建立，具体如下:
   如果祖先元素是纯inline元素，则规则略复杂:

• 假设给内联元素的前后各生成一个宽度为0的内联盒子 inline box，则这两个内联盒子的padding box外面的包围盒就是内联元素的包含块；
• 如果该内联元素被跨行分割来，那么包含块是未定义的，也就是css2规范并没有声明定义，浏览器自行发挥。否则，包含块由该祖先的padding box边界形成。
  如果没有符合条件的祖先元素，则包含块是初始包含块。