问题与小技巧汇总,包括但不限于: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不占空间(是否可点击不影响)