1.导航栏实例
- 代码如下
- 注意:
- line-height=height时候文字位于垂直中间
- text-decoration:none去掉下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav{
background-color: 0xFCFFFC;
height: 41px;
border-top:3px solid red;
border-bottom: 1px solid black;
}
.nav a{
display:inline-block;
text-decoration: none;
font-size: 12px;
height: 30px;
line-height: 30px;
background: pink;
padding:0 5px;
}
.nav a:hover{
background-color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">博客</a>
<a href="#">微博</a>
<a href="#">关注我</a>
</div>
</body>
</html>
2.内盒尺寸计算(元素实际大小)
- 宽度:content width+padding+border
- 高度:content height+padding+border
- 盒子实际大小=内容的宽度和高度+内边距+边框
3.padding不影响盒子大小的情况
- 如果没有给一个盒子指定宽度,此时,如果给这个盒子padding值,就不会撑开盒子
- 举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background-color: pink;
width: 200px;
height: 200px;
}
div p{
background-color: red;
height: 20px;
padding:0 20px;
}
</style>
</head>
<body>
<div><p>大大大</p></div>
</body>
</html>
4.外边距(margin)
- 用于设置外边距,margin就是控制盒子和盒子之间的距离
- 如下图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ce14afaca7c8fbc63dbefe4b6b76bd62.png)
5.块级盒子水平居中
- 可以让一个块级盒子实现水平居中
- 盒子必须制定了宽度width
- 然后给左右外边距margin:auto
- 实际工作中,以下三种方法都可以
- margin-left: auto;margin-right: auto;
- margin: auto;
- margin:0 auto;
6.文字居中和盒子居中区别
- 文字水平居中是text-align:center 而且还可以让行内元素和行内块元素居中对齐
- 块级盒子水平居中 左右margin改为auto
- 举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 600px;
background-color: pink;
height: 200px;
margin: 0 auto;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div>
稳住<strong>我们能赢</strong><input type="text">
</div>
</body>
</html>
7.插入图片和背景图片的区别
- 插入图片 我们用的最多:比如产品的展示类 移动位置只能靠盒模型padding和margin
- 背景图片我们一般用于小图标背景或者超大背景图片背景图片只能通过background-position来设置
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/fa31092de5ebc8c5769c9aa772d64d8a.png)
8.清除元素的默认内外边距(重要)
- 为了更灵活方面的控制网页中的元素,制作网页时,我们要将元素的默认内外边距清除
- 注意
- 行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距
- 代码:
*{
padding: 0px;
margin: 0px;
}
9.外边距合并
- 相邻块元素垂直外边距的合并
- 当上下相邻的两个块元素相遇时,如果上面的元素有下边距margin-bottom
- 下面的元素有上边距margin-top,则他们之间的垂直间距不是margin-bottom之和
- 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e0df29595f5e1ccaba8d44a3a6bd02fd.png)