容易忽略的点

[foxlele2014]

很简单、很基础，但是平时没怎么关注，最重要的是让你踩了这个坑。

[foxlele2014]

关键词：table、display。

display的值除了常用的none、block、inline-block，还有一些专门为table而生的。如table-cell、table-row等。

坑： 一开始页面默认加载时有两个tr元素为none（display为none的元素，浏览器应该会过滤掉不去渲染），然后由于有授权，所有使用js将这两个tr的display变为block（jq的show()方法），导致整个table的布局发生了错乱。

查到的其他点： 1、当表格为多列的情况下，属性为"display:block"行的内容宽度仅与第一列宽度相同，也就是说无论你使colspan的属性值为多少，剩余列的空间都不进行解析。 2、同一行反复的在"display:none;"与"display:block;"两个状态间切换时，表格的底部会持续的产生多余的空白空间以至于造成页面布局的扭曲。

修改：设置这两个tr的display为table-row，告诉浏览器将他们渲染成table的行，而不是块元素。

其他： 1、在渲染好的table里，设置tr的display为none是不起作用的（里边的td依然存在） 2、需要设置表格里的th、td宽度时，需设置table为table-layout：fixed

补一篇关于浏览器的重绘与渲染： 浏览器的重绘与重排

[foxlele2014]

关键词：display、visibility

display的none和visibility的hidden。

坑：在给页面新加一个按钮的时候，是使用react来写的，但是组件写的不够灵活。渲染出来的都是button。但是我们不想要button的样式（之前css给他们的样式层级太深了），

解决： 设置该button为hidden，子元素为visible。 （一开始说是用 !import来覆盖样式，但是发现button是有焦点样式的。就是outline（这是另外一个点。也有个容易忽略的，a标签点击过后。点击时的样式。 :active,:visited，我居然忘了= =。）所以就打算换一种方式。刚好前两天在解决上边那个问题的看到了和这个有关的。这是学以致用吗？

区别： 1、是否会被浏览器渲染在页面。 2、被包裹的子元素的表现。

结构： ![Uploading image.png…]()

如：给div设置了display:none, 里边的子元素span设置display:block,，结果也是不显示。 给div设置visibility:hidden,span设置visibility:visible;,子元素显示。

[foxlele2014]

关键词：position、z-index、ie8

评论：太恶心了。。。

有空再补下。

[foxlele2014]

《当display:inline-block遇上overflow:hidden》

关键字词：inline-block，overflow

背景：在td里给某个span设置inline-block，然后这个span有个min-width，以及max-width，长度超出max-width时需要出现省略号。则设置： white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

这时，span所在位置的高度变高了。

解决：vertical-align:bottom

原因：稍后补上。

参考：

设置inline-block元素的overflow：hidden意外增加元素总体高度的问题`

[foxlele2014]

处理favicon.ico问题。

背景：定义了一个配置，当id='xxx'的时候不读当前本来定义的目录，而去读另外一个目录（另外一个目录和当前使用的目录结构一样 ，但只需要修改需要修改的内容即可，没有修改的还是会去读原来的。

这个时候，favicon需要修改（但是可能favicon未进行配置。所以当开启id=‘xxx'的时候也还是显示原来的。

解决：

使用base64来编码图片， 这样既可以不用加图片在文件里边， 也不需要动原来的图片。

（其实需求是需要不显示ico图标，但是暂时想不到办法让它找不到，试了网上的其他方法依旧没效果。 所以只能加了张空白的ico进行base64编码。

[foxlele2014]

图片：截图自校友= =。

之前做有个系统的时候，用了一个ui库，然后里边有弹窗的样式的。 弹窗的确定和取消按钮，不管怎么设置height、line-height总是不垂直居中（虽然一眼就能看出来，但是怎么弄都改不过来，就没弄了，就当做我眼瞎看错了吧。。。

真的太懒惰了。。。不愿意探究思考。。。

[foxlele2014]

img 图片下部多出来的空隙

---

解决办法可以对修改img的display，设置为block或者修改vertical-align

应该是图片默认的vertical-align导致的

img元素下部有空隙

---

右边的大块覆盖掉了部分logo

导致logo部分（被覆盖部分鼠标移动过去没有效果，不会高亮也没有手势）

它的父亲h1设置了z-index，但是似乎没有效果。显示上是由效果的，去掉的这个的时候，是多了一层灰。 刚测试了下，修改z-index的确是有效果的，那么就是说这个z-index设置为3还是有点小，右边还是有层在它上边或者平级了。（平级的时候估计是按照最后的优先

[foxlele2014]

自己写弹窗的时候，就会写一个遮罩层。 然后遮罩层设置的是100%的宽度和高度。 但是这个100%其实是和body等宽等高。 经常遇到的情况就是body里的内容很长，比body的高度长很多。这种是什么原因都导致的呢。 按道理body应该是根据内容的高度变化的，但是实际没有。

---

这个时候就有个很尬的情况的，这个mask（遮罩层，只遮住了一部分）

原因是没有给body定义高度，然后body现有的高度是被内容撑开的。。那么神奇的问题是，内容明明有更多，但是并没有被撑开更多，而只是其中的一部分高度。 然后给body定义height:auto，这时高度就和内容一致了。

其实想做成的mask是只有一个屏幕那么多就行了，（就是不让它可以滚动屏幕了= =。

[foxlele2014]

上下垂直居中

这个问题。每次都是写了之后又忘。。所以备忘一下。

[foxlele2014]

antd的使用

主要是写很多种不同的实现方式。 因为主要这些是有时才能想起来，所以想起来的时候就记录一下。

• 自定义筛选。 筛选图标的高亮与否。有几种情况（解决办法，感觉就是加上onBlur事件，就不会有这种尴尬的事了） 1.给input元素绑定了onChange事件的，这个时候每次修改都会触发更新对应的state的值，这个时候假如用这个state值来判断是否要高亮就有点问题。就会发生，当你输入了，但是没有点击对应的搜索，但是这个时候图标高亮了。 2.用一个特殊的值，即filtered来标识，这个值的判断是需要根据是否触发了搜索事件以及是否有值才修改状态。（这个方法也不错。 3.这种方法就是不给input绑定onChange事件，只是当他进行了搜索操作才去修改对应的state的值。这个方法也不会有1的那种尴尬状态。

不过这三种都会有一种其他状态，如它对input进行的输入操作，但是他不搜索，这个时候1就会高亮。2，3是不会高亮，然后搜索，搜索完毕之后，再次对input进行操作。但是不搜索。。。这个时候，2，3，就会有一种很尴尬的状态，高亮是在的，但是值不见了，就会很茫然搜了什么。所以加上onBlur事件就会好很多了。

• 表格展示与删除数据的问题。 当一个表格有N页，当点击到第N页时 ，只有一条数据，然后对这条数据做了删除操作，删除之后就又重新请求了表格，但是这时需要判断当前填充到表格里的data的length是否是0，假如是0，就需要将请求的page参数减1。所以在删除的时候不只是发送删除请求，还需要对原始数据state里填充到表格的data进行删除操作。 所以想知道还有什么方法可以判断呢？

[foxlele2014]

背景：在写一些小图标的样式，然后因为是同一个，只是方向不一样，就想着用transform:rotate(xxdeg)来旋转方向，然后有一个地方是作为了flex的子元素存在的。一个地方的是普通的行内元素。 然后神奇的事发生了，flex的子元素是生效的，但是普通的行内元素不生效。

所以查了下资料。得到如下信息：

transform的使用注意点：transform适用于：所有块级元素及某些内联元素

css手册 A transformable element is an element in one of these categories: an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21] an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform[SVG11].

[foxlele2014]

css中哪些属性会导致元素的状态改变（这里的状态指display）

待补充。。。

[foxlele2014]

背景：面试的时候问我一个react的props的问题，是不是props更新了一定会导致重新渲染。 我说是啊。

其实我只回答了其中一种。 还有好几种情况。

这里的组件分为：受控型，非受控型，混杂型

受控型：表示这个组件是一个傻瓜组件，只会根据props传递过来的数据进行各种操作。 非受控型：表示这个组件不受props 的影响，只受自身状态state的影响。 混杂型：表示这个组件既受props影响，也可以自己控制一些自身的状态。

假如传递过来的props，这个组件未被使用，那么是不会render。

[foxlele2014]

还是得多横向纵向了解各种知识。才能更好的引导别人去更多的了解自身知道的知识。

[foxlele2014]

1、JSX做表达式判断时候，需要强转为boolean类型，如： render() { const test = 0; return

{ !!test &&

test

}

} 复制代码如果不使用 !!test 进行强转数据类型，会在页面里面输出 0。 特别的0 = =。

为什么只有0会有0输出呢？ 因为false，null，undefined在jsx里都会被忽略。 0 应该是被当作数字渲染了，而不是Boolean。

短路运算&&

a && b，当a为true时，进行b的检查。当a为false时，不进行b的检查，直接得出a的值。 只有在比较时用的是强制转换的值，但是输出时还是用回自身。

[foxlele2014]

js的除法和其他的有点不一样，如1/4得到的结果是0.25而不是0.

所以得用上自带的一些方法如：parseInt 取整（抛弃小数部分） 向上取整， Math.floor 向下取整 Math.ceil 四舍五入 Math.round

[foxlele2014]

opacity:0.5这个属性使用在element上时，会让这个element的所有子元素包括自己的透明度都修改掉。

[foxlele2014]

疑问：对element设置了position:relative 会导致给该元素设置的overflow不生效？？？

[foxlele2014]

知识点：transform适用于：所有块级元素及某些内联元素 css-transforms A transformable element is an element in one of these categories: an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21] an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform[SVG11].

论给某个icon设置时不生效。 然后在另外一个地方的生效。 区别在于，另外一个地方的icon是flex的子元素。 默认flex的子元素都会是block状态。

[foxlele2014]

论问如何实现一个弹窗组件：

该怎么描述才能让别人觉得你是会的。 其实是会的，但是就是描述的时候不够专业和具体。

[foxlele2014]

定义数据结构：

[foxlele2014]

不同的方法实现一个类：

[foxlele2014]

如何创建相同的两个对象

[foxlele2014]

原型链：

How Does React Tell a Class from a Function?

搭配JavaScript精粹看会更有意思窝~