css盒子模型:内边距,外边距
时间：7年前 阅读：5425
直接上代码看效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
/*清除浏览器默认加上去的内外边距*/
padding: 0px;
margin: 0px;
}
#hez{
width: 400px;
/*边框*/
border: 3px solid blue;
/*内边距*/
/*padding: 20px;*/
}
/* padding-top: 20px;
padding-right: 50px;
padding-left: 30px;
padding-bottom: 20px;*/
/*一个参数的时候，代表上下左右四个方向*/
/*两个参数的时候，第一个代表上下，第二个代表左右*/
/*三个参数的时候，第一个参数代表上方向，第二个参数代表左右方向，第三个参数代表下方向，*/
/*四个参数的时候，第一个到第四个顺序是：上右下左*/
/*padding:30px 60px 160px 10px; */
img{
width: 300px;
height: 300px;
}
#yt01{
/*外边距*/
margin-right: 100px;
}
#yt02{
margin-left: 100px;
}
div{
width: 300px;
height: 300px;
}
#box1{
background: blue;
margin-bottom: 100px;
}
/*外边距的特点，上下外边距关系的会合并取最大值的那个，左右外边距关系的值叠加*/
#box2{
background: orange;
margin-top: 100px;
}
/*如果不给块级元素加固定的宽度，那么默认的宽度就是100%*/
h1{
border:5px solid orange;
width: 800px;
/*上下外边距是0，左右外边距居中*/
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="hez">
“孩子只有6岁，父亲有病在身，家里还有一个80多岁的婆婆。”罗先生说，照顾家庭的重担全落在妻子身上。记者了解到，他从19岁开始进入佛山邮政工作，15年来有12年的春节是在佛山与同事一起度过的。
罗先生告诉记者，春节期间各种快递都集中在邮政发送，工作量很大，“我们一班有40个人，春节坚守在岗位上的就有三十几人，大伙都在一起值班”。另外，春节派送快件时，热心的户主还会派红包、请喝茶，所以觉得很暖心。
罗先生表示，班组里还有一个不成文的规定——那就是大伙要主动让新婚燕尔的同事以及老家比较远的同事回家过团圆年，“真的，那时候能回家心里非常暖和”。罗先生称，公司内部也会在大年三十那天组织大家聚餐，十分开心。
罗先生表示，年三十和大年初一、初二会最忙，年初三后事情少一些。“每年大年三十都有很多货件从外省过来。”罗先生告诉记者，每天至少要跑两趟，一天下来跑了40多公里，“忙的时候就要跑三趟，算起来有60公里路”。他称，春节期间工作量虽然大，但并不感觉累，因为当收件户主拿到快递时的惊讶和欣喜，对快递员而言是一种至高的肯定和鞭策。
</div>
<img src="yt01.jpg" alt="" id="yt01" /><img src="yt02.jpg" alt="" id="yt02" />
<!-- 内边距不能设置为负值 -->
<!-- 外边距能设置为负值 -->
<h1>把属于自己负责片区的包裹拎出来放到三轮车上</h1>
</body>
</html>
上面代码效果图片：
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论