盒子模型:
概念:在写一个html页面的时候,其实就相当于在这个页面中叠盒子。
思想:万物皆盒子
具体内容:
盒子的挡板:border
盒子的泡沫:padding
盒子里的物品:content
盒子与盒子之间的距离:margin
boder:盒子的挡板
div{
width: 200px;
height: 200px;
background-color: plum;
/*边框颜色,边框宽度,边框样式*/
border-color: paleturquoise;
border-width: 5px;
border-style: solid;
}
边框的连写方法:
border:border-width border-style border-color
border-left:13px solid peachpuff;/*连写形式*/
取值:
solid实线
dashed虚线
dotted点线
div{
width: 200px;
height: 200px;
background-color: plum;
/*边框颜色,边框宽度,边框样式*/
border-width: 10px;
border-style: solid;
border-top-color: papayawhip;
border-right-color:palegreen;
border-left:13px solid peachpuff;/*连写形式*/
border-bottom-color: mediumpurple;
}
border-collapse: collapse;去掉单元格之间的间隙
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color: plum;
/*边框颜色,边框宽度,边框样式*/
border-width: 10px;
border-style: solid;
border-top-color: papayawhip;
border-right-color:palegreen;
border-left:13px solid peachpuff;/*连写形式*/
border-bottom-color: mediumpurple;
}
table
{
border: 4px solid paleturquoise;
border-collapse: collapse;
text-align: center;
}
th,td{
border: 4px solid paleturquoise;
}
</style>
</head>
<body>
<div>
</div>
<table border=1 cellpadding="0" height="300px" width="700px">
<caption><h3>这是一条标题</h3></caption>
<thead>
<tr>
<th>编号</th>
<th>性别</th>
<th>姓名</th>
<th>成绩4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>男</td>
<td>job</td>
<td>99</td>
</tr>
<tr>
<td>1</td>
<td>男</td>
<td>job</td>
<td>99</td>
</tr>
<tr>
<td>1</td>
<td>男</td>
<td>job</td>
<td>99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
总成绩
</td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
盒子的填充:
padding(内边距):
作用:设置盒子的内容与边框之间的距离
padding:40px 给上下左右所有的内边距都设置了40px的距离
padding:40px 80px 上下40px,左右80px
padding:40px 60px 80px 上40px 左右60px 下80px
padding:40px 60px 80px 100px 上右下左
padding-top:
padding-right:
padding-bottom:
padding-left:
注意:padding会改变盒子大小
计算盒子大小公式:
案列:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*第一种*/
.big {
width: 200px;
height: 150px;
background-color: burlywood;
/*border: 10px solid red;*/
padding: 75px 100px;
}
/*第二种*/
.big {
width: 300px;
height: 225px;
background-color: burlywood;
/*border: 10px solid red;*/
padding: 75px 0px 0px 100px;
}
.small {
width: 200px;
height: 150px;
background-color: green;
}
</style>
</head>
<body>
<div class="big">
<div class="small">
</div>
</div>
</body>
</html>
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>itcast7</title>
<style>
div{
border-top:4px solid royalblue;
border-bottom: 1px solid #101010;
height: 41px;
text-align: center;
}
a{
color: #C71585;
font-size: 12px;
text-decoration: none;
font-family: "微软雅黑";
display: inline-block;
background-color:orange;
height: 41px;
line-height: 41px;
padding: 0px 12px;
}
</style>
</head>
<body>
<div>
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
</div>
</body>
</html>
特殊情况下padding不会改变盒子的大小:
当一个大盒子宝盒一个小盒子,并且大小盒子都是块级元素,而且小盒子的宽度继承大盒子的话,那么设置小盒子的padding-left不会改变盒子大小
margin:盒子与盒子之间的距离
margin:10px,给上右下左所有的外边距都设置了10像素的距离
margin10px 20px 上下20,左右20
margin:10px 20px 40px 上10 左右20 下40
margin:10px 20px 40px 80px 上右下左
例如:
body标签默认带有margin:8px的属性
p标签默认带有margin:font-size 0
h标签也默认带有margin-top和margin-bottom
清除的方法:
*{
margin:0;
padding:
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*div
{
width: 200px;
height: 200px;
display: inline-block;
}
.one
{
background-color: crimson;
margin: 10px;
}
.two
{
background-color: #00BFFF;
}*/
*{
margin: 0;
padding: 0;
}
h3
{
border-top: 2px solid orange;
display: inline-block;
padding:0 10px;
line-height: 40px;
}
ul
{
width: 360px;
font-size: 14px;
border: 1px solid orchid;
}
li
{
line-height: 24px;
background: url(bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.svg) no-repeat left;
padding-left: 10px;
}
</style>
</head>
<body>
<h3>新闻</h3>
<ul >
<li>这是一条信息</li>
<li>这是一条信息</li>
<li>这是一条信息</li>
<li>这是一条信息</li>
<li>这是一条信息</li>
</ul>
</body>
</html>