问题与小技巧汇总，包括但不限于：HTML5、CSS、React、TypeScript、vue

text-align:center;失效

text-align属性是针对 内联元素居中得属性设置，如果使用在块元素（display:block）上是无效的。

对于块状元素使用margin:0 auto;来控制居中。

解决办法：

将元素设置为内联元素。

display:inline-block;

设置某个子元素样式

CSS3 :nth-child() 选择器

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

规定属于p的父元素的第二个子元素的背景色：

p:nth-child(2)
{
background:#ff0000;
}

隐藏元素

Q：要让某个元素“看不见”，可以设置哪些CSS属性？他们又有什么不同？什么情况下应该选用什么属性？

1.占据空间，可以点击：opacity: 0; filter:Alpha(opacity=0);

2.占据空间，无法点击：visibility:hidden;

3.不占空间，无法点击：display:none;

4.不占空间： position: absolute;

其中，让4与1或者2（即：占据空间的）组合，可以使1，2不占空间（是否可点击不影响）

table里<a></a>标签自动换行

a标签包含在table标签里，无法自动换行，会把其他单元格挤得很窄。

为了让a标签所在的单元格也能按照指定的宽度显示，需要给table标签添加样式，来强制文本换行。

添加如下样式：

table{table-layout: fixed;}
td{word-break: break-all; word-wrap:break-word;}

居中显示

1、margin: auto 撑满居中

布局宽高自适应，但是想基于父布局居中显示。用margin: auto;

      position: absolute;
      top: 0;
      margin: auto;
      bottom: 0;
      left: 0;
      right: 0;

或

position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;

2、偏移居中

可以使用偏移让布局居中

 top: 50%;
 left: 50%;
 transform: translate3d(-50%, -50%, 0);

隐藏scrollbar

.father是你设置的overflow:auto的class

.father::-webkit-scrollbar{
  display: none;
}