html 盒子

盒子

网页布局有三大核心：盒子模型、浮动和定位

网页布局过程：

1、先准备好相关网页元素，网页元素基本都是盒子

2、利用css设置好盒子样式，然后摆放到相应的位置。

3、往盒子里面装内容

网页布局核心本质：利用css摆盒子

盒子的组成

盒子模型：就是把html页面中的布局元素看作是一个盒子，也就是一个能装内容的容器

盒子模型由四部分组成，它包括边框、外边距、内边距、实际内容

border就是我们盒子的边框

content就是我们的内容

padding是我们的内边距

margin是外边距(是控制一个盒子和另外一个盒子之间的距离)

1. 内边距：

   padding属性可以有一到四个值

   padding：20px；代表上下左右都有20像素内边距；

   padding: 20px 30px;第一个值代表上下，第二个值代表左右

   padding: 20px 30px 40px；第一个值代表上、第二个值代表左右、第三个之代表下

   padding: 20px 30px 40px 50px;第一个值代表上、第二个值代表右、第三个值代表下、第四个值代表左 顺时针。

   padding: 20px 30px 40px 50px;

   1. 外边距

      background-color: aqua;

   外边距：控制盒子与盒子之间的距离

   一个值：上下左右

   两个值：上下 左右

   三个值：上 左右 下

   四个值：上 右 下 左

   margin: 50px;

   单独设置外边距 top上、left左、right右、bottom下

   margin-right: 30px;

   1. 标签转换

      把其他类型标签转换成块表签 （行标签）

      display: block;

      把其他类型标签转换成行内块 （块标签）

      display: inline-block;

      标签转换：转换成什么类型的标签 就具有了该类型标签的排列特点 原来的特点不再保留

2. 通配符选择器

   清楚浏览器body自带的8px外边距 取消一些标签自带的外边距

   margin: 0;

   padding: 0;