页面布局要学习三大核心,盒子模型,浮动和定位。学习好盒子模型能非常好的帮助我们布局页面。
1、看透网页布局的本质
2、盒子模型的组成
**
竹板这么一打呀
别的咱不夸
盒子模型实际开发用处非常大
border是边框
content内容哒
padding内边距
非常重要啦
边框与内容的距离主要就靠它
margin外边距
它是干啥的?
盒子与盒子的距离就靠它说话
盒子模型掌握了
你乐的像朵花
—pink老师
**
3、边框(border)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>盒子模型之边框</title>
<style>
div {
width: 300px;
height: 300px;
/* border-width设置边框的粗细,
如果没有设置边框的样式,此样式不生效 */
border-width: 5px;
/* boder-style:none|solid(实线)|dashed(虚线)|dotted(点线) */
border-style: dotted;
/* border-color设置边框的颜色,默认是黑色 */
border-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4、表格的细线边框(合并单元边框)
5、边框会影响盒子实际大小
6、内边距
练习padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>新浪导航</title>
<style>
.nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
line-height: 41px;
}
.nav a {
display: inline-block;
height: 41px;
padding: 0 20px;
color: #4c4c4c;
text-decoration: none;
font-size: 12px;
}
.nav a:hover {
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">三个字</a>
</div>
</body>
</html>
7、外边距margin
8、外边距合并