1 盒子模型
案例:新浪导航案例-padding影响盒子好处
padding内边距可以撑开盒子,我们可以做非常巧妙的运用
因为每个导航栏里面的字数不一样多,我们可以不用给每个盒 子宽度了,直接给padding最合适
直接给每个盒子一个宽度不合理,因为每个盒子里面字数不同,会导致字与盒子间距不同,显得不合理。如果给每个盒子左右相等内边距,就会合理一些。
相关取值:(之后学ps学测量)
- 上边框为3像素,颜色为#ff8500
- 下边框为1像素 颜色为#edeef0
- 盒子高度为41像素,背景颜色为#fcfcfc
- 文字颜色为#4c4c4c
eg : 17-padding应用-新浪导航.html
<!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>Document</title>
<style>
.nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeefe;
background-color: #fcfcfc;
line-height: 41px;
}
.nav a {
/* a 属于行内元素,要转换成行内块元素 */
display: inline-block;
height: 40px; /*给高度,宽度用内边距撑开*/
padding: 0 20px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.nav a:hover {
background-color: rgb(206, 203, 203);
color: orange;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">关注我</a>
</div>
</body>
</html>
网页显示
案例: 小米导航案例修改-padding影响盒子大小计算
padding内边距可以撑开盒子,有时候也会让我们去修改宽度
所以小米侧边栏这个案例,文字距离左侧的距离不应该用text-indent这样不精确.
实际开发的做法是给padding值,这样更加精确.
不用text-indent: 2em;(不精确),修改成padding-left: 30px;
加了内边距会撑开盒子,所以需要修改width,减掉30px
eg : 小米侧边栏修改.html
<!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>
a {
display: block; /*转换成块元素,就可以竖着,设置宽高*/
color: #fff;
width: 260px;
height: 54px;
font-size: 20px;
background-color: #a19f9f;
text-decoration: none;
padding-left: 30px;
/* 行高=盒高使文字垂直居中 */
line-height: 54px;
}
/* 鼠标经过链接变换背景颜色 */
a:hover {
background-color: orange;
}
</style>
</head>
<body>
<a href="#">手机</a>
<a href="#">电视</a>
<a href="#">笔记本 平板</a>
<a href="#">家电</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">电源 配件</a>
<a href="#">健康 儿童</a>
<a href="#">生活 箱包</a>
</body>
</html>
网页就不显示,跟之前的差不多
如何盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小
(没有指定宽度,盒子就不会撑开宽度)
eg :19-padding不会影响盒子大小情况.html
<!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>Document</title>
<style>
h1 {
height: 200px;
background-color: pink;
padding: 30px;
}
</style>
</head>
<body>
<h1></h1>
</body>
</html>
网页显示及检查
高度撑到了200+30*2=260,宽度默认