1.内边距:padding
案例演示将图片在容器中居中显示 ：
方法1: 重新设置原盒子的宽度
方法2: 宽度分离
方法3: box-sizing
看演示代码
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距padding,案例演示将图片在容器中居中显示</title>
<style>
/*方法1: 重新设置原盒子的宽度*/
/*默认情况下,width是直接使用到盒子中的内容级content*/
.box1{
width: 300px;
background-color: aqua;
border: 1px solid black;
}
/*使用padding让图片居中显示*/
/* 容器300*300,图片200*200,最直观的想法是添加50px的内边距 */
.box1{
padding: 50px;
}
/*如果想保持原来盒子大小,只能手工修改box1的宽高*/
.box1{
width: 200px;
}
/*方法2: 宽度分离*/
/* 给box2认一个干爹,添加一个父级盒子wrap, 这时box2就是儿子了, width就有效了*/
/*这是利用于嵌套盒子之间,只有宽度可以继承的特征*/
.wrap{
width: 300px;
}
.box2{
padding: 50px;
background-color: bisque;
border: 1px solid black;
}
/*方法3: box-sizing*/
.box3{
width: 300px;
/*让宽度width作用到边框级,作用到内容级仍会撑开盒子的*/
/*box-sizing: content-box;*/
/*将父元素宽度继承到边框上*/
box-sizing: border-box;
/*内边距不会撑开盒子, 因为宽度作用到了边框级, 与内容无关*/
padding: 50px;
border: 1px solid black;
position: static;
}
</style>
</head>
<body>
<!-- 方法1: 重新设置原盒子的宽度-->
<div class="box1">
<img src="https://img.php.cn/upload/image/749/850/793/1563773906405119.jpg" width="200">
</div>
<!-- 方法2: 宽度分离-->
<div class="wrap">
<div class="box2">
<img src="https://img.php.cn/upload/image/749/850/793/1563773906405119.jpg" width="200">
</div>
</div>
<!-- 方法3: box-sizing-->
<div class="box3">
<img src="https://img.php.cn/upload/image/749/850/793/1563773906405119.jpg" alt="小姐姐" width="200">
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结
第一种方案DOM结构简单,但是要修改原盒子大小
第二种方案不需要修改原盒子大小,但需要增加一个容器盒子
第三种无疑是首选, 但是不同级别的盒元素,理解起来有困难
所以, 各有利弊, 在开发中,根据实际情况进行斟酌
2.外边距margin：同级塌陷、嵌套传递、自动挤压
案例代码演示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距margin：同级塌陷、嵌套传递、自动挤压</title>
<style>
/*1.同级塌陷css*/
.box1{
width: 100px;
height: 100px;
background-color: bisque;
}
.box2{
width: 100px;
height: 100px;
background-color:olivedrab;
}
/*设置box1下边距50px*/
.box1{
margin-bottom: 50px;
}
/*设置box2上边距20px*/
.box2{
margin-top: 20px;
}
/***
总结，同级塌陷，上下塌陷，左右叠加,谁高度大往哪塌陷
此案例是塌陷到box1里
**/
/*2.嵌套传递css*/
.box3{
width: 200px;
height: 200px;
background-color: olivedrab;
}
.box4{
width: 100px;
height: 100px;
background-color:bisque;
}
/*box4添加上边距margin 50px，会自动传递给了父盒子box3*/
.box4{
margin-top: 50px;
}
/*使box4离box3顶部之间有50px的间距,通过margin-top来实现*/
/*正确的做法是,给父级盒子添加内边距来实现*/
/* 先复位 */
.box4{
margin-top:0px;
}
.box3{
padding-top: 50px;
/* 修改盒子高度,将撑开的50px的高度去掉 */
height: 150px;
}
/*3.自动挤压*/
/*margin的自动挤压,这是布局中使用非常广泛*/
/* 这个"自动挤压"使盒子居中对齐的特征,在页面布局中应用非常多,非常重要,好好理解 */
.box5{
width: 100px;
height: 100px;
box-sizing: border-box;
background-color: bisque;
}
/*设置box5居中显示*/
.box5{
/*margin默认值为: auto*/
/*margin-left: auto;*/
/*margin-right: auto;*/
/*左右写到第二个参数上，简写*/
/*margin:0 auto;*/
/*或者干脆全部交给浏览器去处理吧, 咱们不管了*/
margin: auto;
}
</style>
</head>
<body>
<!--
1.同级塌陷
2.嵌套传递
3.自动挤压
-->
<p>1.同级塌陷演示,上下塌陷，左右叠加,谁高度大往哪塌陷，此案例是塌陷到box1里</p>
<div class="box1">
</div>
<div class="box2">
</div>
<p>2.嵌套传递,使box4离box3顶部之间有50px的间距,给父级盒子添加内边距来实现,子盒子box4外边距复位为0</p>
<div class="box3">
<div class="box4">
</div>
</div>
<p>3.自动挤压，设置box5居中显示</p>
<div class="box5">
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3.浮动:float，学习浮动，就要说到文档流规则，从左到右，从上到下排列，布局前提就是，现将元素从文档流脱离，才能随意操作，具体脱离文档流的手段为：浮动和绝对定位
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动float</title>
<style>
.box1{
width: 100px;
height: 200px;
background-color: bisque;
}
.box2{
width: 200px;
height:200px;
background-color: olivedrab;
}
.box1{
float: left;
}
.box2{
float: right;
}
.box3{
width: 100%;
height: 60px;
background-color:lightsteelblue;
/*!**清除左浮动*!*/
/*clear: left;*/
/*!**清除右浮动*!*/
/*clear: right;*/
/*清除左右浮动*/
clear: both;
}
</style>
</head>
<body>
<!--
1.文档流: html元素默认按照书写的顺序在浏览器中,遵循先从左到右,再从上到下进行排列
2.布局前提: 通常先将元素从文档流中脱离,这样才能随心所欲的操作
3.元素脱离文档流的手段: 浮动和绝对定位
-->
<!-- 浮动的基本原理 -->
<div class="box1"></div>
<div class="box2"></div>
<!-- 第三个区块不需要浮动 -->
<div class="box3"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4.相对定位、绝对定位、固定定位:position
（1）相对定位制作十字架案例代码
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位制作十字架案例</title>
<style>
.box1{
width: 150px;
height: 150px;
background-color: #ffb3ac;
position: relative;
left: 150px;
}
.box2{
width: 150px;
height: 150px;
background-color:burlywood;
}
.box3{
width: 150px;
height: 150px;
background-color: #00FF00;
position: relative;
left: 300px;
top: -150px;
}
.box4{
width: 150px;
height: 150px;
background-color:blueviolet;
position: relative;
left: 150px;
top: -300px;
}
.box5{
width: 150px;
height: 150px;
background-color:salmon;
position: relative;
left:150px;
top: -300px;
}
</style>
</head>
<body>
<!--
定位:将元素在页面中重新排列,分为四类
1.静态定位: 浏览器默认方式, 即文档流中的位置
2.相对定位: 元素并未脱离文档流,只是相对于它原来的位置,做相对移动
3.绝对定位: 元素脱离文档流重新排列,不论元素之前是什么类型,全部转为块元素,支持宽高
4.固定定位: 始终相对于浏览器的窗口做为定位父级,进行定位
-->
<!--相对定位小案例: 在页面中创建一个彩色十字架-->
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
（2）绝对定位制作十字架案例代码
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
.parent{
border: 1px dashed black;
width: 450px;
height: 450px;
/*给定位父级盒子添加一个定位属性*/
position: relative;
}
.box1{
width: 150px;
height: 150px;
background-color: #ffb3ac;
/*绝对定位元素脱离文档流*/
position: absolute;
left: 150px;
}
.box2{
width: 150px;
height: 150px;
background-color:burlywood;
position: absolute;
left: 300px;
top: 150px;
}
.box3{
width: 150px;
height: 150px;
background-color: #00FF00;
position: absolute;
left: 150px;
top: 150px;
}
.box4{
width: 150px;
height: 150px;
background-color:blueviolet;
position: absolute;
left: 150px;
top: 300px;
}
.box5{
width: 150px;
height: 150px;
background-color:salmon;
position: absolute;
top: 150px;
}
</style>
</head>
<body>
<!--绝对定位小案例: 在页面中创建一个彩色十字架-->
<div class="parent">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
（3）使用固定定位制作PHP中文网登录广告展示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位小案例</title>
<style>
body{
height: 2000px;
}
.ads{
width: 350px;
height: 250px;
background-color:lightblue;
/*设置固定定位*/
position: fixed;
right: 0;
bottom: 0;
}
button{
position: absolute;
right: 3px;
bottom: 230px;
}
</style>
</head>
<body>
<h1>固定定位小案例</h1>
<div class="ads">
<button onclick="this.parentNode.style.display='none'">X</button>
<h2>PHP中文网第七期先上班</h2>
<h1>招生进行中...</h1>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结，本节课程学习了内边距，外边距、浮动、相对定位、绝对定位、固定定位的使用，这些内容都是前端排班经常用到的知识点，通过学习更加深刻理解了其中的含义。
Correction status：unqualified
Teacher's comments：写完再交
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
