6道简单的CSS问题

前言

有些知识，就得用写作业的方法才能记的住。

CSS选择器和继承

CSS选择符：id选择器、类选择器、标签选择器、相邻选择器(h1 + p)、子选择器、后代选择器、通配符选择器、属性选择器、伪类选择器。

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

优先级（就近原则）：!important > [ id > class > tag ]

水平居中

最熟悉的flex布局，父组件使用flex布局，使用

justify-content: center;            

对于行内元素，要使得它的子元素居中：

 text-align: center;

对于float布局，使得父元素：

width: fit-content;
margin: 0 auto;

对于块级元素，需要子元素有宽度：

margin: 0 auto;

对于使用绝对定位的方式有很多，如下面的transform，以及类似于前面的固定宽度，使用margin: auto的方式。

`parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0)
}

垂直居中

单行文本的话，设置文本高度为父元素高度：

.w2 {
  background-color: #3e9;
  height: 49px;
  width: 100px;
  text-align: center;
}

.ww2 {
  background-color: #fff;
  line-height: 49px;
}

对于块级元素，可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;

接着类似于上文的absolute定位，然后使用transform的方法，当然也适用于这个:

.parent {
  ...
  position: relative;
}

.h2 {
  background-color: #adc;
  width: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

关于高度固定，使用计算的方式，这里没有提及。

display

inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block

Position

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

CSS绘制三角形

.triangle {
  width: 0px;
  height: 0px;
  border: 20px solid;
  border-color: transparent transparent transparent #adc;
}

为什么这样就可以做到呢?

首先我们要知道transparent是透明的意思,那么三个透明,一个有颜色是什么意思呢?

原来我们的border并不是一个有颜色的长方体,我们把边框调粗发现,它其实是一个等腰梯形,那么当我们把元素的长宽下掉之后,可以说元素就只剩下边框了.

那么我们看一下这样的代码出来的元素是什么样的呢:

真正的是中间的四个三角形组成的正方体,这才是border在元素没有长宽时的真实体现.

所以,我们把三个边设为透明,留下的一个就是名副其实的三角形了.