1CSS的盒子模型简介
盒子模型概述：
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
综述：CSS中盒子模型由三部分组成:
1边框（border）
2 内边距（padding）
3外边距（margin）
如下图：
2盒子模型之边框（border）
语法，如下图：
属性名称 |
介绍 |
border-width |
设置边框宽度单位 以px为主 例如:12px |
border-style |
设置边框样式 |
border-color |
设置边框颜色 |
border-top |
设置上边框样式 |
border-bottom |
设置下边框样式 |
border-left |
设置左边框样式 |
border-right |
设置右边框样式 |
案例，实现下图效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div-cls{
width: 200px;height: 50px;border-top:solid 2px pink;
border-bottom: double 5px blue;
border-left: dashed 3px yellow;
border-right: outset 4px red;
}
</style>
</head>
<body>
<div class="div-cls">border其他用法</div>
</body>
</html>
补充：outline
outline简介：
outline(轮廓)是绘制在元素周围的一条线，位于边框边缘的外围，起突出元素的作用，不会象border那样影响元素的尺寸或者位置。
outline与border的区别：
border 可应用于几乎所有有形的html元素，而 outline 是针对链接、表单控件和ImageMap等元素设计。
效果图如下：
outline 与 border 的区别代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: slategray;
float: left;
margin: 2px;
/*box-sizing: border-box;*/
}
.border{
border: 6px solid aqua;
}
.outline{
outline: 6px solid palegreen;
}
</style>
</head>
<body>
<div></div>
<div>border</div>
<div>border</div>
<div>outline</div>
<div>outline</div>
</body>
</html>
3盒子模型之内边距（padding）
内边距分类：
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
内边距举例：
padding: 10px |
上，下，左，右距离 分别是10px |
padding: 10px 40px |
上下10px 左右40px |
padding: 10px 40px 20px |
上10px 左右40px 下20px |
padding: 10px 20px 30px 40px |
上10 右20px 下30px 左40px |
padding会对盒子大小产生影响，影响后的计算公式如下：
盒子宽度=盒子宽度+左右内边距+边框宽度
效果图：
代码如下：
内边距实际案例1（中等难度例子）：
文字距离盒子内左边距离40px,边框为3px,当前盒子宽度怎么设置最后能保证盒子最终宽度是200px?
效果图：
代码如下：
内边距实际案例2（复杂难度例子）：
一个大盒子宽度500px,高度300px.一个小盒子宽度300px,高度150px.请画出让小盒子在大盒子内部居中。
效果图：
代码如下：
补充：
设置内边距padding不会影响盒子的宽度
4盒子模型之外边距（margin）
外边距margin属性介绍：
margin: 10px |
距离上下左右边距10px |
margin: 10px 20px |
距离上下10px 左右20px |
margin: 10px 20px 30px |
距离上10px 左右 20px下30px |
margin: 10px 20px 30px 40px |
距离上 10px 右20px 下 30px 左40px |
margin-left: |
距离左边 |
margin-right |
距离右边 |
margin-top |
距离上边 |
margin-bottom |
距离下边 |
margin:0 auto |
auto 设置为相对边的值 |
外边距margin合并问题
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
图形如下：
5内边距padding和外边距margin综合问题和案例（margin）
行内元素在内边距padding和外边距margin方面的问题
行内元素遇到上下margin和padding时，则会被忽略。
行内元素遇到左右margin和padding时， 才会起作用。
补充：常见行内元素包括；
行内元素(a、input 、img 、code、label、strong、textarea 等)：
盒子模型综合实例：
效果图如下：
代码如下：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="css/base.css" />
<style>
.box{ width:323px; margin:0 auto;}
.box-top{ height:31px; background:#000; line-height:30px; }
.box-top .fl .con1{ font-size:14px; color:#30cdfa; font-weight:bold; margin-left:10px; }
.box-top .fl .con2{ font-size:14px; color:#696d70; font-weight:bold;}
.box-top .fr{ color:#ffffff; margin-right:10px;}
.time1{ color:#414247;}
.time2{ color:#ccc;}
.main li{ line-height:25px;}
</style>
</head>
<body>
<div class="box">
<div class="box-top clearfix">
<h2 class="fl">
<span class="con1">新闻中心</span>
<span class="con2">News center</span>
</h2>
<p class="fr">< ></p>
</div>
<div class="main">
<ul>
<li class="clearfix">
<p class="fl time1">腾讯--4月免费公开课信息<p>
<p class="fr time2">2016-04-12</p>
</li>
<li class="clearfix">
<p class="fl time1">腾讯--5月班级开课时间表<p>
<p class="fr time2">2016-04-12</p>
</li>
<li class="clearfix">
<p class="fl time1">腾讯分享第六期活动正常进行中<p>
<p class="fr time2">2016-03-10</p>
</li>
<li class="clearfix">
<p class="fl time1">3月公开课紧急通知<p>
<p class="fr time2">2016-03-08</p>
</li>
<li class="clearfix">
<p class="fl time1">4月开课信息汇总<p>
<p class="fr time2">2016-03-08</p>
</li>
<li class="clearfix">
<p class="fl time1">免费活动在路上<p>
<p class="fr time2">2016-01-27</p>
</li>
<li class="clearfix">
<p class="fl time1">腾讯--4月免费公开课信息<p>
<p class="fr time2">2016-04-12</p>
</li>
<li class="clearfix">
<p class="fl time1">2016年后班级开始报名学习了！！！<p>
<p class="fr time2">2016-01-17</p>
</li>
</ul>
</div>
</div>
</body>
</html>
版权声明：本站内容全部来自于腾讯微信公众号，属第三方自助推荐收录。《css的盒模型详解》的版权归原作者「互联网IT信息」所有，文章言论观点不代表Lambda在线的观点， Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458
文章来源： 阅读原文
互联网IT信息微信公众号：gh_8694d206e643
手机扫描上方二维码即可关注互联网IT信息微信公众号
