CSS笔记

CSS

一、 如何让盒子水平居中

1. flex

//父元素
{
  dispaly:flex;
  justify-content:center;
  align-item:center;
}
  1. flex + margin
//父元素
{
  display:flex
}
//子元素
{
  margin:auto
}

2. 定位

  1. margin + 定位
//父元素
{
  position:reletive;
}
//子元素
{
  positon:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto
}
  1. 定位+ transform
//父元素
{
  position:reletive;
}
//子元素
{
  position:absolute;
  top:50%;
  left:50%;
  translate:(-50%,-50%)
}

二、CSS 盒子模型

盒子模型包括的内容为：margin + border + padding + content

1. W3C（标准盒子模型）

2. IE (怪异盒子模型)