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