盒子

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

网页布局过程：

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

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

3、往盒子里面装内容

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

盒子的组成

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

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

border就是我们盒子的边框

content就是我们的内容

padding是我们的内边距

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

内边距：

padding属性可以有一到四个值

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

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

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

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

padding: 20px 30px 40px 50px;

外边距

background-color: aqua;

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

一个值：上下左右

两个值：上下 左右

三个值：上 左右 下

四个值：上 右 下 左

margin: 50px;

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

margin-right: 30px;

标签转换

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

display: block;

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

display: inline-block;

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

通配符选择器

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

margin: 0;

padding: 0;

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。