css 示例

水平居中

div {
    margin: 0 auto;
    width:200px; //必须设置
}

垂直居中

点我返回目录

div {
    margin:auto 0;
    height:200px; //必须设置
}

水平垂直居中

点我返回目录

.container {
    height: 200px;
    background-color: #ccc;
    position: relative;
}
.center-p {
    background-color: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
}

Position

点我返回目录

• static 静态定位：忽略top,bottom,left,right,z-index属性
• relative 相对定位：相对自己的原始位置
• absolute 绝对定位：参照最近定位的祖先的位置
• fixed 固定定位：相对浏览器窗口的位置
• sticky 磁性定位：最近滚动先祖或视口

1. 父relative,子absolute：子相对于父的绝对位置。

font 文字

点我返回目录

• 不换行

  .text {
      display:block; /* 一本文字 内联对象需加 */
      table-layout:fixed; /* 表格使用时 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
      
      word-break:keep-all; /* 不换行 */
      white-space:nowrap; /* 不换行 */ 
      overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
      text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
  }
  

  注：这个只对单行的文字的有效，如果你想把它用在多行上，也只有第一行有作用的。 这个写法只有IE会有“…”，其它的浏览器文本超出指定宽度时会隐藏。

overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行

//上面是一行内容的时候，当有两行的内容时候

overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:2; //显示的行

• 居中

  text-align: center;
  

• 双击不选择文字

  user-select: none;