前端学习之初识CSS
一、CSS背景
1、背景的基本属性
背景的基本属性有：
background-color：背景颜色；
background-image：背景图片；
background-repeat：背景图片的展示方式；
background-attachment：设置背景图片是滚动的还是固定的；
background-position：背景图片位置。
background-color
设置背景颜色值，默认是transparent（透明色）。
颜色的设置方式也是可以通过三种方法：颜色名称、rgb、#十六进制表示法。
背景颜色的作用范围是border-box（即内容区域+填充区域+边框区域）。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
div{
background-color: #00FFFF;
border: 20px dotted #FF4400;
width: 200px;
height: 100px;
}
</style>
<body>
<div>
这是背景颜色的演示
</div>
</body>
</html>
结果：
可以明显看出，background-color的作用区域包括到了border-box。
这个作用区域也可以通过background-clip进行修改，例如：
div{
background-color: #00FFFF;
border: 20px dotted #FF4400;
width: 200px;
height: 100px;
background-clip: content-box;
}
这样作用区域就变成了content-box（内容区域）：
但是使用background-clip是有兼容性的要求，在IE8及IE8以下的浏览器，是没有办法生效的。
background-image
在一个页面中，一般有两种的方法来添加图片：
1.添加图片元素；
2.设置background-image属性。
当图片属于网页内容时，就使用img。当图片为了美化页面时，就使用background-image。
background-image的使用：
/*默认值为none*/
background-image: url(图片路径);
注：背景颜色和背景图片是可以同时进行设置的，这里涉及到了层级的问题，边框样式是在最顶部的，背景图片次之，而背景颜色是在最底部的。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
div{
background-color: #00FFFF;
width: 200px;
height: 100px;
background-image: url(../img/csdn.png);
}
</style>
<body>
<div>
这是背景图片的演示
</div>
</body>
</html>
默认是铺满：
这里图片会将整个容器铺满，这里就涉及到了铺放格式的问题。
background-repeat
铺放格式可以通过设置background-repeat属性来改变，background-repeat的值有：
repeat：水平和垂直方向上的重复（默认值）。
repeat-x：水平方向上重复。
repeat-y：垂直方向上重复。
no-repeat：不进行重复。
演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.repeat1{
background-color: #00FFFF;
width: 400px;
height: 100px;
border: 2px solid black;
background-image: url(../img/csdn.png);
background-repeat: repeat-x;
}
.repeat2{
background-color: #00FFFF;
width: 400px;
height: 100px;
border: 2px solid red;
background-image: url(../img/csdn.png);
background-repeat: repeat-y;
}
.repeat3{
background-color: #00FFFF;
width: 400px;
height: 100px;
border: 2px solid green;
background-image: url(../img/csdn.png);
background-repeat: no-repeat;
}
</style>
<body>
<div class="repeat1">
这是背景图片的演示
</div>
<div class="repeat2">
这是背景图片的演示
</div>
<div class="repeat3">
这是背景图片的演示
</div>
</body>
</html>
结果：
背景图片还可以设置显示方式background-attachment，设置背景图片是否滚动，值有：
scroll：随着浏览器滚动条一起滚动（默认值）。
fixed：背景图片固定不动。
这里就不作演示了。
background-position
语法：
background-position: X Y;
/*X：水平方向上的距离*/
/*Y：垂直方向上的距离*/
XY可以是具体的数值、或者是百分比
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.position1{
background-color: #00FFFF;
width: 400px;
height: 100px;
border: 2px solid black;
background-image: url(../img/csdn.png);
background-position: 50px 10px;
background-repeat: no-repeat;
}
</style>
<body>
<div class="position1">
这是背景图片的演示
</div>
</body>
</html>
结果：
background-position还可以通过设置关键词来改变位置，水平方向上的值有：left、center、right，竖直方向上的值有：top、center、bottom。语法：
background-position:left top;/*或top left等等*/
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.position1{
background-color: #00FFFF;
width: 400px;
height: 100px;
border: 2px solid black;
background-image: url(../img/csdn.png);
background-position: left bottom;
background-repeat: no-repeat;
}
</style>
<body>
<div class="position1">
这是背景图片的演示
</div>
</body>
</html>
如果只设置了一个参数，如：
background-position:top;
则剩下那个参数默认是center，结果：
同时background-position还可以设置百分比的形式：
background-position:50% 30%;
百分比的图示：
background（简写）
background可以对上述属性进行简写：
background:[color][image][repeat][attachment][position];
说明：
1.几种属性用空格进行分隔；
2.几种属性不分先后顺序；
3.可以只写需要的值。
二、CSS雪碧图
1.概念
CSS雪碧，即CSS Sprite，也有人叫CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。
如：
实际上它是由一张张的小图片合成的一张图片：
2.为什么需要雪碧图
浏览器加载单张图片的速度取决于图片的大小，图片的大小和加载的速度成正比，在图片大小一致的情况下，图片张数越少载入速度越快，因此我们常对背景图片进行优化，常见的优化方法有：
1.减小文件体积大小。
2.减少图片资源请求数（合并HTTP请求）。
而使用雪碧图的目的就是减少页面图片资源请求数，从而来提高页面的加载速度。
3.雪碧图使用场景（组成）
雪碧图一般是由小尺寸的、静态的、不需要二次修改的图标组成的。
4.雪碧图相关的CSS属性
与雪碧图相关的CSS有：
background-image、background-position。
5.雪碧图生成的方法
雪碧图主要的获取方法有三种：
1.使用PS进行图片合成。
2.在线雪碧图生成工具：CSS Sprites Generator。
3.推荐的制作工具：CSS Sprites。
第三个工具生成雪碧图之后会自动生成CSS代码，可以直接复制到代码中使用，这里就不作演示了。
三、CSS布局
1.网页布局
网页布局就是网页元素的排列组合。简单来说，我们需要采用CSS中的各种特性，来进行网页元素的排列。
2.常用的布局
（1）经典行布局
图示：
行布局实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div{
background-color: #00FFFF;
height: 400px;
text-align: center;
/*自适应宽度，最小宽度为1000像素*/
/* width: 100%; */
/* min-width: 1000px; */
/* 固定宽度 */
width: 1000px;
margin: 0 auto;
/* 让整个div居中 */
position: absolute;
left: 50%;
top: 50%;
margin-top: -200px;/*设置为内容高度的一半*/
margin-left: -500px;/*设置为内容宽度的一半*/
}
</style>
<body>
<div>
行布局的演示
</div>
</body>
</html>
结果（容器在整个屏幕中间）：
（2）两列布局
图示：
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content{
background-color: #00FFFF;
height: 400px;
text-align: center;
width: 1000px;
margin: 0 auto;
}
.left{
height: 100%;
float: left;
width: 300px;
background-color: #FF4400;
}
.right{
height: 100%;
width: 700px;
float: left;
background-color: #FFC0CB;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
左侧
</div>
<div class="right">
右侧
</div>
</div>
</body>
</html>
结果：
上述方法是通过浮动实现的，我们也可以通过定位来实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content{
background-color: #00FFFF;
width: 100%;
height: 500px;
min-width: 1000px;
text-align: center;
position: relative;
}
.left{
height: 100%;
position: absolute;
top: 0;
right: 0;
width: 700px;
background-color: #FF4400;
}
.right{
height: 100%;
margin-right: 700px;
background-color: #FFC0CB;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
左侧
</div>
<div class="right">
右侧
</div>
</div>
</body>
</html>
结果：
三列及多列布局也是类似的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content{
background-color: #00FFFF;
width: 100%;
height: 500px;
min-width: 1000px;
text-align: center;
position: relative;
}
.left{
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 500px;
background-color: #FF4400;
}
.middle{
height: 100%;
background-color: #556677;
margin: 0 500px 0 500px;
}
.right{
height: 100%;
width: 500px;
background-color: #FFC0CB;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
左侧
</div>
<div class="right">
右侧
</div>
<div class="middle">
中间
</div>
</div>
</body>
</html>
结果：
四、兼容性
1.定义
浏览器兼容性是指不同的浏览器对同一段代码有不同的解析，造成页面显示效果不一致的情况。
2.常见的浏览器
五大主流浏览器：
IE，内核：Trident；
Chrome，内核：以前是Webkit内核，现在是Blink内核；
FireFox，内核：Gecko；
Safari，内核：Webkit；
Opera，内核：最早是Presto，后来是Blink。
之所以成为主流，其实是因为他们都有属于自己的内核。造成浏览器兼容问题的根本原因，就是浏览器的内核不同导致的。
3.解决兼容性问题的方法
1.浏览器CSS样式初始化
初始化：
*{
margin: 0;
padding: 0;
}
2.使用CSS Hack解决兼容性问题
CSS Hack就是针对不同的浏览器或者不同版本的浏览器书写特定的CSS。
原理：
1.不同的浏览器对CSS的支持和解析的效果不一致；
2.不同的浏览器或者版本具有特殊的识别符；
3.CSS中有优先级关系。
IE中不同版本的特殊识别符：
IE6及以下：_;
IE7及以下：*；
演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
color: green;
*color: #00FFFF;
_color: #f40;
}
</style>
</head>
<body>
<p>IE6及以下是红色</p>
<p>IE7及以下是青色</p>
<p>其他是绿色</p>
</body>
</html>
IE11是绿色：
IE7是青色：
IE6是红色：
其他版本都可以识别不带识别符的CSS样式。
4.IE常见问题
IE6中浮动产生双边距问题：
解决方式：设置_display:inline;
_display:inline;
IE6中不支持png24的透明图片：
解决方式：设置过滤器：
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="绝对地址")
IE6-IE8不支持RGBA颜色设置：
解决方式：设置过滤器：
background: rgba(0,0,0,0.2);/*最后一个是透明度*/
_filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#33000000',EndColorStr='#33000000');
/*单引号内的是色值，色值查询地址：https://www.html.cn/demo/hex_color*/
5.关于兼容性的建议
1.编写符合规范的代码；
2.提前确认需求；
3.尽可能少地适用CSS Hack；
4.编码后做好兼容性的自测。
这一部分到这里就结束啦，有不足的地方还望大家指正啦，蟹蟹！
