Html+css 日常收集

01水平垂直居中

/*1父容器上定义固定宽度，margin值设成auto*/
nav {margin: 0 auto; text-align: center}
/*2display:flex */
.parent {isplay:flex;flex-direction:column;}
.Children{flex-direction:center}
/*flex方式（适用于居中元素元素宽高未知）--- 必须设置html和body的高度为100%*/
body {
            display: flex;
            align-items: center; /*垂直居中*/
            justify-content: center; /*水平居中*/
}
/*绝对定位和负边距（适用于居中元素的宽高是固定的）--*/
img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -80px; /*图片宽度的一半*/
    margin-top: -80px; /*图片高度的一半*/
}
/*CSS3的transform属性（适用于居中元素元素宽高未知）-- 即使img元素再加一些padding和border，依然可以垂直水平居中 */
img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding:100;
}
/*等边法 margin:auto */
img{
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
}


/*常用在div模拟模态框*/
.demo{
     position:absolute; 
     left:50%; top:50%;
     transform:translate(-50%,-50%);
   }


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


.demo{
     position:fixed;left:50%;
     top:50%;
     transform:translate(-50%.-50%); 
   }

02选择器

/*结构伪类选择器*/
/* 第一个子元素 */
:first-child{}


/* 最后一个子元素 */
:last-child{}


/* 前三个子元素 */
:nth-child(-n+3){}


/* 奇数子元素 */
:nth-child(odd){}


/* 偶数子元素 */
:nth-child(even){}
``
/* 目标伪类选择器 */
/* 元素之后 */
::after{}
/* 元素之前 */
::before{}
/* a标签的样式，低版本ie不兼容 */
a:link{}
/* a标签访问后 */
a:visited{}
/* a激活 */
a:active{}
/* 鼠标悬停样式 */
div:hover{}
/* 获取焦点样式 */
input:focus{


/*性选择器*/
/* 类名位nav的元素 */
[class="nav"]{}
/* 类名位nav并且id为true的元素 */
[class="nav"][id="true"]{}
/* 类名以a开头的元素 */
[class^="a"]{}
/* 类名以z结尾的元素 */
[class$="z"]{}
/* 类名包含n的元素 */
[class="n"]{}

提示气泡

<div class="poptip btn" aria-controls="弹出气泡"> 点击聊天气泡 </div>

@poptipBg:#30363d;
@color: #fff;
@triangle: 8px;
@distance: -12px;


.poptip {
  position: relative;
  z-index: 101;
  &::before,
  &::after {
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.3s ease 0.2s;
    box-sizing: border-box;
  }
  &::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: @triangle @triangle 0 @triangle;
    border-color: @poptipBg transparent transparent transparent;
    left: calc(50% - @triangle);
    top: 0px;
    transform: translateX(0%) translateY(@distance);
  }


  &::after {
    font-size: 14px;
    color: @color;
    content: attr(aria-controls);
    position: absolute;
    padding: 6px 12px;
    white-space: nowrap;
    z-index: -1;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%) translateY(@distance);
    background: @poptipBg;
    line-height: 1;
    border-radius: 2px;
  }
  &:hover::before,
  &:hover::after {
    visibility: visible;
    opacity: 1;
  }
}


.btn {
  min-width: 100px;
  line-height: 1.5;
  padding: 5px 10px;
  color: #fff;
  background: #00adb5;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}