学习中常见css样式归纳和总结系列（一）

---

前言

学习中有许多重要以及常见的css样式，此文章用以记录和回顾

---

提示：以下是本篇文章正文内容，下面案例仅供参考

一、CSS是什么

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

二、常见样式

1.实现元素水平垂直居中

绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）

father{
position:relative;
}
son{
position: absolute;
			top: 50%;
			left: 50%;
			/* translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中 */
			transform: translate(-50%,-50%);
			/*在知道自身高度时*/
			margin-left: -150px;    /* 自身 width 的一半 */
            margin-top: -100px;     /* 自身 height 的一半 */
}

定位之absolute + margin: auto

.parent {
  height: 400px;
  position: relative;
}

.child {
  width: 300px;
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

flex布局

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

可以看看https://www.w3school.com.cn/tiy/t.asp?f=css3_flexbox_align-items_center中的实现

单行文本的实现

#container {
    width: 600px;
    height: 300px;
    border: 1px solid black;
}
#text{
    text-align: center;//设置水平居中
    line-height: 300px;//利用子元素行高等于父元素高度实现垂直居中
}

补充：行高

多行文本垂直居中
利用display：table布局，让块级标签实现行内效果，即浮动至同一横轴，并实现等高效果

#container{
    width: 600px;
    height: 300px;
    border: 1px solid black;
    display: table;
}
#text{
    display: table-cell; 
    vertical-align:middle;
    text-align: center;
}