定位元素

发表于 更新于 分类于 ， Waline： 本文字数： 881 阅读时长 ≈ 1 分钟

盒模型

所谓盒模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见版式模型（visual formatting model）在页面上排布。

可见的页面版式

可见的页面版式主要由三个属性控制：position属性、display属性和float属性。其中，

  • position属性控制页面上元素间的位置关系，
  • display属性控制元素是堆叠、并排，还是根本不在页面上出现，
  • float属性提供控制的方式，以便把元素组成成多栏布局。

每一个元素都会在页面上生成一个盒子。因此，HTML页面实际上就是由一堆盒子组成的。
默认情况下，每个盒子的边框不可见，背景也是透明的，所以我们不能直接看到页面中盒子的结构

盒子的属性

我们先从每个元素盒子的属性开始吧。这些属性可以分成三组。

  • 边框（border）。可以设置边框的宽窄、样式和颜色。
  • 内边距（padding）。可以设置盒子内容区与边框的间距。
  • 外边距（margin）。可以设置盒子与相邻元素的间距。

外边距是边框向外开推其他元素的距离，而内边距是从边框向内推开其他元素的距离,如下图所示:
这里有一张图片
图中文字：Border：边框；Padding：内边距；Margin：外边距.
元素盒子还有一个背景层，可以改变颜色，也可以添加图片。
一个盒子有4条边，因此与边框、内边距和外边距相关的属性也各有4个，分别是上（top）、右（right）、下（bottom）、左（left）。

简写样式

CSS为边框、内边距和外边距分别规定了简写属性，让你通过一条声明就可以完成设定。

简写样式属性顺序

在每个简写声明中，属性值的顺序都是上、右、下、左。想象一下从上开始绕顺时针旋转就记住了。

举个例子吧，如果要设定盒子的外边距，不用简写属性就得这样写：

1
2
3
4
5
6
选择器xxx{
    margin-top:5px;
    margin-right:10px;
    margin-bottom:12px;
    margin-left:8px;
}

而使用简写属性，则可以简写为这样：

1
2
3
选择器xxx{
    margin:5px 10px 12px 8px;
}

盒子边框