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>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结，本节课程学习了内边距，外边距、浮动、相对定位、绝对定位、固定定位的使用，这些内容都是前端排班经常用到的知识点，通过学习更加深刻理解了其中的含义。
