css 心得随记

css的class中的父子关系

比如：

.content > .center   表示center是content 的直接子元素

.content  .center   表示center是content 的任意子元素

-----------------------------------------------------

display: -webkit-flex;
display: flex;
justify-content: space-between;    /*分散对齐*/
gap: 15px;     /*每个子元素之间的间距15px*/

height: 100vh;    /*跟设备一样高*/

background-color: rgb(185,180,180,0.5);    /*半透明*/

--------------------------------------------------

position: absolute;
width: 428px;
height: 79px;
left: calc(50% - 214px);   /*水平居中布局*/
top: 5px;

----------------------------------------------------------

纯css自定义鼠标悬停提示

<button data-title="这是提示信息">按钮</button>

button[data-title]:hover::after {　　

  content: attr(data-title);
  position: absolute;
  background: black;
  color: white;
  padding: 5px;
  border-radius: 3px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}