一、前言
- 网页的格局:网页内容的主体规划
——1. ⭐盒子模型:标签和标签存在包含关系时,位置的调整
——2. ⭐浮动:多个块标签处于同一行的位置处理问题
——3. ⭐定位:块标签在页面指定位置的处理问题
- 块标签:独立占用一行的标签
- 行内标签:不会独立占用一行的标签
- 网页的布局基本都是用块标签来完成的
——一般做布局 使用 div标签 :帮助我们将网页划分成多个小方块
- div标签边线类型
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/742814998002ad310f6211dbf15466dd.png)
二、盒子模型
- 盒子模型基本用法:其实就是通过标签的内边距和外边距的特点调整两个有包含关系的标签的位置
- 内边距——padding:内部元素(标签)距离当前块元素边界的距离(向外扩张,内部书写面积不变)
- 设置上下左右四个内边距为参数px——padding: 参数px(一个参数为上下左右);
- 设置上下内边距为参数1px,左右内边距为参数2px——padding:参数1px(上下) 参数2px(左右);
- 设置 上右下左 四个内边距——padding: top(上) right(右) bottom(下) left(左);
- 单独设置内边距——padding-top(right、bottom、left):参数
- 外边距——margin:当前块标签(元素)外部的和父级块标签之间的距离
- 设置上下左右四个外边距为参数px——margin: 参数px(一个参数为上下左右);
- 设置上下外边距为参数1px,左右外边距为参数2px——margin:参数1px(上下) 参数2px(左右);
- 设置 上右下左 四个外边距——margin: top(上) right(右) bottom(下) left(左);
- 单独设置外边距——margin-top(right、bottom、left):参数
盒子模型设置左右居中—— margin:auto
——注:只有左右居中,没有上下居中(网页上下认为是无限长的)
- 块元素与行内元素的转换——display
- block:行内元素转换为块元素
- inline:块元素转换为行内元素
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/18d6db8a172d85fbf726ae02a26a1eca.png)
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style>
#divi1{
background-color: #FFFF00;
border: 1px solid red;
width: 400px;
height: 400px;
margin:0px auto;
margin-top: 30px;
}
.divc1{
background-color: chartreuse;
border: 1px solid red;
width: 200px;
height: 200px;
margin: auto;
margin-top: 100px;
}
span{
background-color: #696969;
border: 1px solid dodgerblue;
width: 160px;
height: 50px;
display: block;
margin: auto;
padding-top: 20px;
margin-top: 65px;
}
</style>
</head>
<body>
<div id="divi1">
<div class="divc1">
<span id="s1">
今天是个上分的好日子
</span>