CSS精灵图
作用：CSS精灵图是一种图像合成技术，可以减少请求的次数，以及降低服务器处理压力。
使用：需要配合背景图片和背景图片定位来操作使用。
利用fireworks查看图片像素及位置时，需要打开图层界面进行锁定后再进行查询。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>demo</title>
<style>
.container{
width: 300px;
height: 150px;
background-color: #e8e2d4;
}
.box1{
width: 162px;
height: 126px;
display: inline-block;
background: url(../images/a-z.jpg) -425px -535px no-repeat;
}
.box2{
width: 127px;
height: 139px;
display: inline-block;
background: url(../images/a-z.jpg) -167px -376px no-repeat;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
边框属性
边框就是环绕在标签宽度和高度周围的线条；
格式：
- 连写（同时设置4条边的边框）：
border：边框的宽度 边框的样式 边框的颜色；
注意点：
1. 连写中颜色可以省略，省略后默认的颜色是黑色；
2.连写中的样式不能省略，省略后无法看到边框；
3.连写中的宽度可以省略，省略后还是可以看到边框。
2.1 连写（分别设置4条边的边框）：
border-top：边框的宽度 边框的样式 边框的颜色；
border-right：边框的宽度 边框的样式 边框的颜色；
border-bottom：边框的宽度 边框的样式 边框的颜色；
border-left：边框的宽度 边框的样式 边框的颜色；
2.2 连写（分别设置4条边的边框）：
border-width：上 右 下 左
border -style：上 右 下 左
border-color：上 右 下 左
注意点：
1. 属性赋值的顺序都是按照顺时针赋值，即： 上 右 下 左。
2. 这三个属性的取值省略时的规律：
上 右 下 左 >上 右 下 >左边的取值与右边一致；
上 右 下 左>上 右 >左边与右边取值相同，下边和上边的取值相同；
上 右 下 左>上 >其它方向的属性均与上边一致。
3.非连写(方向+要素):
border-left-width: 20px;
border-left-style: double;
border-left-color: pink;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>边框属性</title>
<style>
.box{
width: 100px;
height: 100px;
background-color:palevioletred ;
/*border: 5px solid cornflowerblue; */
/*border-top:5px solid cornflowerblue;*/
/*border-right:5px solid red;*/
/*border-bottom:5px solid deepskyblue;*/
/*border-left:5px solid yellow;*/
/*border-width: 5px;*/
/*border-style:solid;*/
/*border-color: cornflowerblue red deepskyblue yellow ;*/
border-left-width: 20px;
border-left-style: double;
border-left-color:deepskyblue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
内边距
定义：边框和内容之间的距离就是内边距
格式：
- 非连写:
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ; - 连写:
padding: 上 右 下 左;
这三个属性的取值省略时的规律 - 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样;
- 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样;
3.上 右 下 左 > 上 > 右下左边取值和上边一样;
注意点:
- 给标签设置内边距之后, 标签占有的宽度和高度会发生变化;
- 给标签设置内边距之后, 内边距也会有背景颜色。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>内边距</title>
<style>
.box1{
width: 150px;
height: 80px;
border: 5px solid palevioletred;
padding-top:5px;
background-color: deepskyblue;
}
.box2{
width: 150px;
height: 80px;
padding: 5px 10px 20px 40px;
border: 5px solid palevioletred;
background-color: deepskyblue;
}
</style>
</head>
<body>
<div class="box1">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr/>
<div class="box2">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
</body>
</html>
外边距
定义：标签和标签之间的距离就是外边距
格式：
- 非连写
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ; - 连写
margin: 上 右 下 左;
3.这三个属性的取值省略时的规律： - 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样；
- 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样；
- 上 右 下 左 > 上 > 右下左边取值和上边一样；
注意点:外边距的那一部分是没有背景颜色的。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>内边距</title>
<style>
.box1{
width: 150px;
height: 80px;
border: 5px solid palevioletred;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 40px;
margin-left: 80px;
background-color: deepskyblue;
}
.box2{
width: 150px;
height: 80px;
border: 5px solid palevioletred;
margin: 10px 20px;
background-color: deepskyblue;
}
</style>
</head>
<body>
<div class="box1">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr/>
<div class="box2">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr/>
</body>
</html>
外边距合并现象：
外边距在水平方向会出现叠加，但是在垂直方向不会，外边距的大小以较大的那个来显示。
外边距合并
CSS盒模型
定义：CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子。
结论：
- 在HTML中所有的标签都可以设置(以装有手机的机盒为例):
宽度/高度 == 指定可以存放内容的区域;
内边距 == 填充物;
边框 == 盒子自己本身;
外边距 == 盒子和盒子之间的间隙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒模型</title>
<style>
span,a,b,strong{
display: inline-block;
width: 100px;
height: 100px;
border: 6px solid #000;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<span>我是span</span>
<a href="#">我是超链接</a>
<b>我是加粗</b>
<strong>我是强调</strong>
</body>
</html>
- 盒模型的宽带和高度：
- 内容的宽度和高度：
就是通过width/height属性设置的宽度和高度- 元素的宽度和高度
宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
高度 同理可证- 元素空间的宽度和高度
宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
高度 同理可证
- box-sizing:
- CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变。
- box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变。和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度。
- box-sizing取值：
- content-box
元素的宽高 = 边框 + 内边距 + 内容宽高
- content-box
- border-box
元素的宽高 = width/height的宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-sizing属性</title>
<style>
.content{
width: 300px;
height: 300px;
background-color: red;
}
.aside{
width: 100px;
height: 200px;
background-color: green;
float: left;
}
.article{
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: blue;
float: right;
border: 20px solid #000;
padding: 20px;
}
</style>
</head>
<body>
<div class="content">
<div class="aside"></div>
<div class="article"></div>
</div>
</body>
</html>
注意点1:
- 如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来；
- 如果外面的盒子不想被一起顶下来,那么可以给外面的盒子添加一个边框属性；
- 在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin，margin本质上是用于控制兄弟关系之间的间隙的。
注意点2:
1.在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中；
2.margin: 0 auto; 只对水平方向有效, 对垂直方向无效。
盒子居中和内容居中
1.text-align:center;和margin:0 auto;区别:
text-align:center:用于设置盒子中存储文字和图片水平居中；
margin:0 auto：用于设置盒子水平居中。
清空默认边距
在企业开发中为了更好的控制盒子的宽高，一般会清除系统默认的边距*{margin:0;padding:0;}
注意点：通配符选择器一般会遍历所有的标签，性能不好。
网友评论