CSS中的盒子模型和定位

目录

一、盒子模型（Box Model）

1、盒子的组成

2、 浅析盒子模型的CSS属性

 二、定位（Positioning）

1、了解浮动

2、块级格式化上下文BFC（Block Formating Context）

3、了解定位

 

 

---

一、盒子模型（Box Model）

盒子模型

如果我们用CSS进行网页布局时，不可避免地会碰到盒子模型。如果把网页比作一个容器，那么HTML元素（element）就是一个个的盒子，盒子里装的就是HTML元素的内容。盒子模型规定了元素框处理元素内容、内边距、边框和外边距的的方式，简单来说，就是描述一个盒子（HTML元素）和外界容器以及内部的内容之间的关系。它是一个局部布局。

1、盒子的组成

1）margin（外边距）——CSS属性，表示的是边框到外界容器之间的距离

2）border（边框）——CSS属性

3）padding（内边距）——CSS属性，表示的是边框到内部内容之间的距离

4）content（内容）——它是HTML元素中的内容，但它不是CSS属性

2、 浅析盒子模型的CSS属性

1）margin（这个属性接受任何长度单位、百分数值甚至负值）

盒子的外边框，完全透明的，开发者只能设置它的边距

• margin-top：设置元素的上外边距
• margin-bottom：设置元素的下外边距
• margin-left：设置元素的左外边距
• margin-right：设置元素的右外边距

 举个例子：

p{
  margin-top: 100px;/*如果margin-top的值是负数，边框会向上移动*/
  margin-right: 200px;
  margin-bottom: 300px;
  margin-left: 400px;
  }

 如果将其简化为一条，可以按照从上外边距（top）开始围着元素顺时针旋转的顺序进行简写，那样上例就会变成：

p{margin:100px 200px 300px 400px;}

2）padding

盒子的内边距（填充）。它可以设置背景颜色和图片，不是完全透明的。与margin类似的是，padding可以设置每一条边的边距，所以有padding-top、padding-bottom、padding-left、padding-right，设置方法与margin相同，不再赘述

3）border

盒子的边界，可以将它设置成各种样式、样式、宽度

• border-style：用于设置元素所有边框的样式，或者单独地为各边设置边框样式
• border-width：简写属性，用于为元素的所有边框设置宽度，或者单独地为各边框设置宽度
• border-color：简写属性，设置元素的所有边框中可见部分的颜色，或为4个边分别设置颜色
• border-radius：边界的四个角的半径，可以用百分值和像素值将它们设置为带弧度的

我们用链接来举个例子： 

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

 下面的样式，我们设置链接访问前和访问后的样式为5px实线的不可见边框，鼠标悬停时样式为灰色边框