一、外边距的三个特征:
1.同级塌陷:两个盒子之间的上下外边距会发生塌陷,两盒子外边距之和等于两盒子中设置的最大外边距的值。
示例如下:
<!DOCTYPE html> <html> <head> <title>外边距的同级塌陷</title> <style type="text/css"> .box1{ width: 100px; height: 100px; background-color:red; margin-bottom: 10px; } .box2{ width: 100px; height: 100px; background-color:green; margin-top: 20px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2.嵌套传递:子元素添加外边距会添加到父元素上。
示例如下:
<!DOCTYPE html> <html> <head> <title>外边距的嵌套传递</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color:red; } .box2{ width: 100px; height: 100px; background-color:green; margin-top:50px; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3.自动挤压:当左边距为auto时,左边距的值会尽可能的大,将盒子挤到最右端;此时,当右边距也为auto时,同样会将盒子挤到最左端,两种对抗力量互不相让,实现盒子的自动居中。
示例如下:
<!DOCTYPE html> <html> <head> <title>外边距的自动挤压</title> <style type="text/css"> .box1{ width: 100px; height: 100px; background-color:red; margin:auto; } </style> </head> <body> <div class="box1"> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
二、内边距居中的三种解决方式
1.方法一:重新设置原盒子的宽度
父元素设置padding后,盒子会被撑开,这时将被撑开的宽度与高度减掉,显示效果就会把子元素居中
计算公式:设置padding左右的值=(父元素宽度-子元素宽度)/2
计算公式:重新设置的盒子的宽度=设置padding左右的值*2
示例如下:
<!DOCTYPE html> <html> <head> <title>解决内边距居中问题的三个方法</title> <style type="text/css"> .box1{ width:300px; border:1px dashed #000; padding: 50px; } img{ width: 200px; height: 200px; } .box1{ width:200px; height:200px; } </style> </head> <body> <div class="box1"> <img src="https://img.php.cn/upload/jscode/000/000/001/5d11814409068367.jpg"> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2.方法二:宽度分离
给div再套一个父级元素,由于子元素会继承父元素的宽度,因此盒子不会被撑开
示例如下:
<!DOCTYPE html> <html> <head> <title>解决内边距居中问题的三个方法</title> <style type="text/css"> .box{ width:300px; } .box1{ border:1px dashed #000; padding: 50px; } img{ width: 200px; height: 200px; } </style> </head> <body> <div class="box"> <div class="box1"> <img src="https://img.php.cn/upload/jscode/000/000/001/5d11814409068367.jpg"> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3.方法三:box-sizing:border-box;将宽度作用于边框级,内边距不会撑开盒子。
示例如下:
<!DOCTYPE html> <html> <head> <title>解决内边距居中问题的三个方法</title> <style type="text/css"> .box1{ width: 300px; box-sizing:border-box; border:1px dashed #000; padding:50px; } img{ width: 200px; height: 200px; } </style> </head> <body> <div class="box1"> <img src="https://img.php.cn/upload/jscode/000/000/001/5d11814409068367.jpg"> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三、浮动的实现与清除
1.给元素添加浮动后,元素会脱离文档流,进入浮动流按先来后到的顺序重新排布。float:left; float:right;
2.清除浮动clear:left;(清除左浮动的影响)。clear:right;(清除右浮动的影响)。clear:both;清除浮动影响。
示例如下:
<!DOCTYPE html> <html> <head> <title>浮动的实现与清除</title> <style type="text/css"> .box1{ width: 100px; height: 200px; float: left; background-color: red; } .box2{ width: 200px; height: 100px; float: right; background-color: green; } .box3{ width: 100%; height: 100px; clear:both; background-color: yellow; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四、定位
1.相对定位:position: relative;未脱离文档流,相对于元素本身的位置做偏移。
示例如下:
<!DOCTYPE html> <html> <head> <title>相对定位</title> <style type="text/css"> .box1{ width:20px; height:20px; color:#000; background-color: #46ff00; border-radius: 50%; position:relative; margin-top:0; margin-left:280px; } .box2{ width:30px; height:30px; color:#000; background-color: #ecfe01; border-radius: 50%; position:relative; margin-top:25px; margin-left:210px; } .box3{ width:40px; height:40px; color:#000; background-color: #b21d53; border-radius: 50%; position:relative; margin-top:25px; margin-left:140px; } .box4{ width:50px; height:50px; color:#000; background-color: #1ae7e7; border-radius: 50%; position:relative; margin-top:25px; margin-left:70px; } .box5{ width:60px; height:60px; color:#000; background-color: #0e01f5; border-radius: 50%; position:relative; margin-top:25px; margin-left:0px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2.绝对定位:position: absolute;脱离文档流,以父元素的位置为参照做偏移,不论元素之前是什么类型,全部转为块元素,支持宽高。
示例如下:
<!DOCTYPE html> <html> <head> <title>绝对定位</title> <style type="text/css"> .box{ width: 300px; height: 300px; position:relative; border:1px dashed red; } .box1{ width:20px; height:20px; color:#000; background-color: #46ff00; border-radius: 50%; position:absolute; } .box2{ width:30px; height:30px; color:#000; background-color: #ecfe01; border-radius: 50%; position:absolute; margin-top:45px; margin-left:45px; } .box3{ width:40px; height:40px; color:#000; background-color: #b21d53; border-radius: 50%; position:absolute; margin-top:100px; margin-left:100px; } .box4{ width:50px; height:50px; color:#000; background-color: #1ae7e7; border-radius: 50%; position:absolute; margin-top:165px; margin-left:165px; } .box5{ width:60px; height:60px; color:#000; background-color: #0e01f5; border-radius: 50%; position:absolute; margin-top:240px; margin-left:240px; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3.绝对定位小案例
【1】用绝对定位设置遮罩,使其脱离文档流不随窗口变化而变化,背景色为黑色,宽高100%,不透明度70%。
【2】登录框用绝对定位也是相同的道理,top、left各50%,margin-top减去二分之一的高度,margin-left减去二分之一的宽度,使登录框居中显示。
示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位小案例</title> <style> body{ background-color:#00a5e0; color: #fff; } .box1{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.4; } .box2{ width: 380px; height: 380px; border-radius:10px; position: absolute; background-color: #fff; top:50%; left:50%; margin-top: -190px; margin-left: -190px; } .box3{ padding: 30px; color:#373737; } input{ width: 220px; height: 40px; border-radius: 4px; border:1px solid #ccc; font-size: 14px; padding:0 10px; } button{ width: 320px; height: 40px; background-color: #00a5e0; color:#fff; font-size: 16px; font-family:'微软雅黑'; border-radius: 4px; border:none; } button:hover{ background-color:#2d7bdd; } p{ margin-top:30px; } </style> </head> <body> <h1>php中文网</h1> <div class="box1"></div> <div class="box2"> <div class="box3"> <h2>登录</h2> <hr> <p> <label for="username">用户名:</label> <input type="username" name="username" id="username" placeholder="请输入3-8字符用户名" autofocus=""> </p> <p> <label for="password">密<span> </span>码:</label> <input type="password" name="password" id="password" placeholder="请输入6-12位数字、字母组成的密码" autofocus=""> </p> <p> <button type="submit">登录</button> </p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4.固定定位:position:fixed;始终以浏览器窗口为父元素进行定位
示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定定位</title> <style> body{ background-color:#00a5e0; width: 100%; height: 100%; } .box{ width: 200px; height: 300px; background-color:#fff; border-radius: 6px; box-shadow: 2px 2px 5px #ccc; position:fixed; padding: 15px; bottom:10px; right: 10px; } button{ position: relative; top:-286px; left:186px; } </style> </head> <body> <div class="box"> <h2>广告</h2> <p>我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告</p> <button>x</button> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例