CSS工具箱

CSS简介

CSS 概述. CSS 指层叠样式表(Cascading Style Sheets); 样式定义如何显示HTML 元素; 样式通常存储在样式表中;

---

左右布局

方法一:子级加cssfloat:left;``float:right;，然后给父级加class:clearfix;

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}
复制代码

float:left;
复制代码

float:right;
复制代码

---

左中右布局

父级加 clearfix：

  display: inline-block;
  text-align: center;
复制代码

子元素加：

  float: left;
  margin: 0;
复制代码

子元素第一个加：

:nth-child(1) {
  margin: 0;
}
复制代码

---

水平居中

div水平居中

margin-left:auto;
margin-right:auto;
复制代码

背景图居中

background-position: center center;
background-size: cover;
复制代码

内联元素居中

text-align:center;
复制代码

不是内联元素居中

text-align:center;
复制代码

非内联元素居中，加了之后一般下面这vertical-align: top;，否则下面可能会空出一行

display:inline-block
vertical-align: top;
复制代码

---

垂直居中

display: flex;
align-items:center;
复制代码

文本居中

line-height=height；
复制代码

---

等其他小技巧

• 给你要写的css标签加上外边框，不影响布局

 outline: dashed #464646 1px; 
复制代码

• 尽量不写height和width,BUG之父
• 使用::before和::after时加下面让其显示

content: "";
display:block;
复制代码

• 脱离文档流： 父级加

position:relative
复制代码

子元素加：

position:absolute
复制代码

转载于:https://juejin.im/post/5ad5fc9c6fb9a028e25e1218