盒子模型组成部分：4部分
1、内容：content
2、边框：border
3、内边距：padding
4、外边距：margin
border的连写：
border：width style color
border: 10px solid blue;
注意点：
1、书写顺序：推荐写法去写
2、省略问题：不要省略！！！
3、层叠问题：
单独写的样式写在连写的下面
给单独方向设置边框：
border-方位名词（top、right、bottom、left）
取值：和连写形式一样的取值
border-bottom: 10px solid red;
细线表格、边框合并：border-collapse：collapse
<style>
table {
border: 1px solid #000;
width: 400px;
height: 300px;
border-collapse: collapse;
}
td,
th {
border: 1px solid #000;
}
</style>
盒子大小初级计算：
盒子的宽度= 左边框 + 内容的宽度 + 右边框
= 10 + 400 + 10
= 420
要求盒子的宽度400，此时是420，多出了20，在内容中减去就可以（border会撑大盒子）
<style>
div {
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: 10px solid #e70303;
}
a {
width: 80px;
height: 40px;
/*background-color: red;*/
/*让a标签一行显示多个，并且可以设置宽高，就是行内块元素的显示特点，所以转换成行内块元素*/
display: inline-block;
text-decoration: none;
font-size: 12px;
text-align: center;
line-height: 40px;
color: #4c4c4c;
}
a:hover {
background-color: #edeef0;
color: #ff8400;
}
</style>
padding:内边距，盒子边框与内容之间的距离
取值：
/*1、一个值：上右下左*/
/*padding: 10px;*/
/*2、两个值：上下、左右*/
/*padding: 10px 20px;*/
/*3、三个值：上、左右、下*/
/*padding: 10px 20px 30px;*/
记忆的方法：
先从上开始赋值，然后顺时针赋值，如果没有赋值的，看对面的！！！
/*4、四个值：上、右、下、左*/
/*padding: 10px 20px 30px 40px;*/
padding的单方向设置：padding-方位名词（top、right、bottom、left）
padding-left: 30px;
盒子大小终极计算公式：
盒子的宽度 = 左border + 左padding + 内容的宽度 + 右padding + 右border
= 10 + 20 + 300 + 20 +10
=360
不会撑大盒子的特殊情况：
互相嵌套的块级元素，如果子盒子没有设置宽度，此时子盒子的宽度默认就是父盒子的宽度，此时如果给子盒子设置左右的padding或者左右的border 子盒子的宽度是不会撑大的！
div {
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
a {
/*此时让a标签的宽度默认由内容撑开，就不用设置宽度（默认的效果）*/
height: 40px;
background-color: red;
display: inline-block；
text-decoration: none;
font-size: 12px;
text-align: center;
line-height: 40px;
color: #4c4c4c;
padding: 100px 50px;
}
a:hover {
background-color: #edeef0;
color: #ff8400;
}
</style>
<div>
<a href="#">新浪导航</a><a href="#">新浪</a><a href="#">新浪导航新浪导航新浪导航新浪导航新浪导航新浪导航</a><a href="#">新浪导航</a>
</div>
1、手动内减
2、自动内减
box-sizing:border-box;
div {
/*此时盒子的大小就是设置的大小*/
width: 400px;
height: 400px;
background-color: green;
/*border会撑大盒子*/
border: 10px solid #000;
/*padding也会撑大盒子*/
padding: 20px;
box-sizing:border-box;
} /*写项目之前，需要清除标签默认的margin和padding*/
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 400px;
/*background-color: pink;*/
margin: 0 auto;
border: 1px solid #cccccc;
padding: 33px 30px 0px;
/*自动内减*/
box-sizing:border-box;
}
h2 {
/*background-color: pink;*/
/*width: */
height: 47px;
font-size: 30px;
line-height: 47px;
border-bottom: 1px solid #cccccc;
}
ul {
list-style: none;
}
ul li {
height: 50px;
border-bottom: 1px dashed #cccccc;
line-height: 50px;
padding-left: 30px;
}
ul li a {
text-decoration: none;
font-size: 18px;
color: #666666;
}
</style>
</head>
<body>
<div>
<h2>最新文章/New Articles</h2>
<ul>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">体验javascript的魅力</a></li>
<li><a href="#">jquery世界来临</a></li>
<li><a href="#">网页设计师的梦想</a></li>
<li><a href="#">jquery中的链式编程是什么</a></li>
</ul>
</div>
margin:盒子与盒子之间的距离！
取值：
/*1、一个值：上右下左*/
/*margin: 10px;*/
/*2、两个值：上下、左右*/
/*margin: 10px 20px;*/
/*3、三个值：上、左右、下*/
/*margin: 10px 20px 30px;*/
记忆方法：
先从上开始赋值，顺时针赋值，如果没有赋值的？？看对面的！！！
/*4、四个值:上、右、下、左*/
margin: 10px 20px 30px 40px;
给单方向设置margin：
margin—方位名词（top、right、bottom、left）
margin单方向的应用：
1、上下应用
margin-top：可以让盒子往下移动！！
margin-bottom：可以让下面的盒子往下移动！！
2、左右应用
margin-left：可以让盒子往右移动
margin-right：可以让右边的盒子往右移动！！
去除所有标签默认的marign和padding
* {
margin: 0;
padding: 0;
}
<style>
/*清除默认的margin和padding*/
* {
margin: 0;
padding: 0;
}
div {
width: 262px;
height: 342px;
background-color: pink;
margin: 0 auto;
margin-top: 100px;
border: 1px solid #009900;
/*自动内减*/
box-sizing:border-box;
padding: 10px 10px 0px;
background: url(images/bg.gif);
}
h2 {
/*background-color: pink;*/
height: 25px;
color: #fff;
font-size: 18px;
line-height: 25px;
border-left: 5px solid #c9e143;
padding-left: 10px;
margin-bottom: 5px;
}
ul {
list-style: none;
background-color: #fff;
padding:0px 10px;
}
ul li {
/*width: */
height: 30px;
border-bottom: 1px dashed #666666;
line-height: 30px;
background: url(images/tb.gif) no-repeat left center;
padding-left: 15px;
}
ul li a {
text-decoration: none;
font-size: 12px;
color: #551a8b;
}
</style>
</head>
<body>
<div>
<h2>爱宠知识</h2>
<ul>
<li><a href="#">养狗比养猫对健康更有利</a></li>
<li><a href="#">日本正宗柴犬亮相，你怎么看柴犬</a></li>
<li><a href="#">狗狗歌曲《新年旺旺》</a></li>
<li><a href="#">带宠兜风，开车带宠需要注意什么？</a></li>
<li><a href="#">【爆笑】这狗狗太不给力了</a></li>
<li><a href="#">狗狗与男童相同着装拍有爱造型照</a></li>
<li><a href="#">狗狗各个阶段健康大事件</a></li>
<li><a href="#">调皮宠物狗陷在沙发里的搞笑瞬间</a></li>
<li><a href="#">为什么每次大小便后，会用脚踢土？</a></li>
</ul>
</div>
</body>