FrankKai

### Summary - **行内元素和块级元素有什么异同？** Content Model和Formatting上的区别， - 块级元素的后代元素既可以是行内元素也可以是块级元素，行内元素的后代只能是行内元素。 - 块级元素会格式化成3行，before，current，after，行内元素仅在当前行显示，不会破坏格式。 - **css属性display如何影响元素？** 大多数情况是通过修改``，``这两个属性值去改变元素外部的**流式布局**和元素内部的**formatting context**，其中formatting context会根据model类型进行渲染。 因此文章开头的问题就迎刃而解了。 - **display值从inline更改为block的原理？** 本质上是改变了``，改变了元素的流式布局，也就是从生成1个inline盒子，变为生成一个block盒子。反之同理。 - **display值从block更改为inline-block的原理？** 本质上是改变了``，``。修改前为block null，修改后为inline flow-root，从生成一个block盒子，变为生成一个inline盒子，同时这个盒子按照flow-root的方式渲染(创建一个新的block formatting context)。

### Q&A 上文提到了model，display值为flexbox时为flexbox model，display值为grid时为grid model。由此引申出2个问题： - 什么是flexbox model和grid model？ CSS3的flexbox model，和grid model。 - display值为inline，block以及inline-block时根据什么model进行渲染？ inline box model，block box model，inline block(flow-root BFC) model。 - 总计有多少种model，有何异同？ 粗略理解为inline，block，flexbox，girdbox等等。实际上是由``，``共同决定。

 **1.ex是什么？** 这是一个相对长度单位，相对谁呢？相对的是"x"，x指的是英文小写字母的"爱克斯"，而不是拼音里的"西"。就是说1ex就等于一个英文字母"x"的长度，那么一个"x"的长度，也就是1ex等于多少呢？是个确切的数字吗？是因字体而异的，在许多字体中1ex ≈ 0.5em。 > chrome64: 8.64px firefox57: 8.6333px ie11: 7.13px edge41: 7.13px 下面是默认字体的1ex的高度，如果把浏览器字体都改为“Microsoft YaHei”，那么1ex就约等于8.6px。 思考： 暂时没有想到好的使用场景，如果是需要做一些相对当前使用字体的属性值的计算，可以去使用ex。 代码： ``` ex是什么？ html{font-family:"Microsoft YaHei"} h1{margin:10px 0;font-size:16px;} .x{overflow:hidden;height:1ex;background:#aaa;} 定义一条与字母x高度相同的线： xxxx ```

**2.ch是什么?** 现在已经有了垂直方向的相对长度单位ex了，那么水平方向有没有呢？当然是有的，ch就是这样一个水平方向的相对长度单位，它的大小等于当前字体的"0"（Unicode：U+0030）的宽度，微软雅黑字体的“0”的宽度为9.375px，也就是1ch ≈9.375px。 思考： 暂时没有想到好的使用场景，如果是需要做一些水平方向的相对当前使用字体的属性值的计算，可以去使用ch。 代码： ``` ch是什么？ html{ /* font-size: 12px; */ font-family: "Microsoft YaHei" } .traffic-light{ height: 1rem; width: 1ch; background: rgba(255,0,0,1); } 0 ```

**3.resolution是什么？** 这是css中的数据类型，在媒体查询时用来描述一个分辨率。在屏幕上，与CSS中的英尺，厘米，或者像素有关，而与物理单位无关。 常见单位：dpi（dots per inch） dpcm（dots per cm） dppx（dots per px）。 转换关系： 1英尺等于2.53厘米，所以1dpcm ≈ 2.54dpi。 css中1in:1px = 1:96，所以1dppx = 96dpi。 例子：各种分辨率下的1像素的直线。 ``` text .hairline-border { box-shadow: 0 0 0 1px;...

**4.不要用!important** demo地址：http://jsbin.com/wakequje/1/edit?html,css,output ``` !important Lorem ipsum dolor sit amet… ``` ``` html { font: 2em/1.5 sans-serif; } .foo .bar { color: red; } .bar.bar.bar.bar.bar.bar.bar.bar{ color: green; } ``` 不提倡的写法： ```...

**5.子元素浮动导致父元素塌陷怎么处理？** ``` overflow:hidden; ``` or ``` display:inline-block; ``` 为父元素添加`overflow:hidden`(常用)或者是`display:inline-block`（常用）。 除此之外，也可以是auto、scroll; table-cell、table-caption、inline-block。 或者position的值不为relative或static，或者float的值不为none，或者是根元素。 本质上，这是激活了元素的BFC，所谓BFC，其实就是Block Format Context，如果一个元素具有BFC，那么内部子元素无论有什么骚操作，无论是float,absolute,fixed,z-index等等等等，都不会对外部的元素有任何影响。 本质上大家最常用的clear:both，也是为当前元素激活了BFC。 除此之外，BFC还可以去除margin重叠。 题外话：随着浏览器厂商对flex，grid兼容性的进一步支持，BFC依旧很重要，哈哈。

**6.::placeholder是什么意思？** 这是一个实验性的css技术，这个css伪元素代表这form元素的placeholder的文字内容。 只有适用于:: first-line伪元素的CSS属性的子集可以在其选择器中使用:: placeholder的规则中使用。 ``` ``` ``` input::placeholder { color: red; font-size: 1.2em; font-style: italic; } ``` 

**7.:fullscreen是什么意思？** 这是一个实验性的技术。这个:fullscreen伪元素会使得元素在浏览器的全屏模式下去显示。 那么如何触发浏览器的全屏模式呢？ 我们来看一个标签的例子： ``` ``` 我们可以使得视频通过如下方式进入全屏模式： ``` var elem = document.getElementById("myvideo"); if (elem.requestFullscreen) { elem.requestFullscreen(); } ``` 再来看个普通标签的例子： ``` :fullscreen Demo This text will become big and red when...

### 8.说一下position的区别 值集合：**static relative absolute fixed sticky** 关键词：**正常文档流 占用页面空间 参照元素偏移 副作用 z-index堆叠上下文 margin边缘重叠** - **static** 1. 在正常文档流中 2. 占用页面layout空间 3. top right bottom left不生效 4. 无副作用 5. z-index属性不生效 - **relative**...