喜欢我的话，点击上方蓝色 文字关注吧👆
不喜欢看文字的同学，点击下方👇绿色按钮 ，竖起耳朵👂听吧
。
CSS技巧 来自刘小妞的栖息地 00:00 33:18
今天，我们来介绍一些CSS技巧，掌握一些小技巧，可以提高我们的开发效率，避免很多兼容性的问题。
我们一条一条的说吧。
1、在写html页面的时候，我们前面讲了基本结构。但是，为了我们的网页兼容性更好，我们最好在页面开始的地方写上声明，因为有的样式，只有写了声明才支持。声明是这样的：<!DOCTYPE html>，不区分大小写。
2、为了防止页面乱码，我们一般会在meta里设置编码格式，通常设置为utf8。所以，我们常用的代码结构是下面这个样子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>刘小妞栖息地</title>
</head>
<body>
<p>我是刘小妞</p>
</body>
</html>
3、像我们之前文章里提到的，对于盒子宽度，能不设置就不设置，能设置百分比就不设置具体值。
4、水平居中。盒子里文字居中，我们用text-align:center;可以设置，如果，想让整个盒子相对浏览器居中怎么写呢？类似下面这么这种效果。
红框相对屏幕居中对齐。这种情况我们在写网页的时候经常遇到，我们只要给红框设置margin:0 auto;就可以了，上下有间距的话，就把第一个参数0设置成具体的数值，第二个参数设置成auto就可以了，其实就是左右外边距自动。 这里要注意一下，这种对齐方式，必须给盒子设置width才行，否则无效。
5、垂直居中。垂直居中的方法有很多种，比如，我们设定padding值，上下设置成一样的值；使用line-height，把line-height的值设置成和height的值一样。
在这多说一点，如果是绝对定位的盒子，而且盒子的宽高是不固定的，这个时候，怎样实现水平垂直居中呢?这个时候，我们可以利用CSS3里的一个属性transform，代码如下：
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
translate是相对于元素本身的位置移动。具体的我们在这里不展开说了，等介绍CSS3的时候，我们再来详细的说。
6、CSS的分组和嵌套。
当多个标签的样式是相同的时候，我们可以用分组来设置。比如：
div{color:red;}
p{color:red;}
span{color:red;}
它们的样式都是设置文本颜色为红色，如果用分组来写，是这样的：
div,p,span{color:red;}
是不是很简洁？多个选择器用逗号分隔，有同学会说，直接设置class就可以了。是可以，只是有的时候，我们会需要这样设置。比如，因为很多标签自带一些样式，我们在写正式样式之前，会初始化一些标签的样式，把他们的默认样式都取消，这时候，我们就需要用分组来写。
多个class有相同的样式，也可以用分组来写。
那什么是嵌套呢？我们知道，标签是可以嵌套的，那CSS嵌套和它类似。比如，我们的html结构如下：
<div class="test"><p>我是刘小妞</p></div>
p的样式我们可以直接用标签名来设置，我们也可以用嵌套，代码如下：
.test p{
color:red;
}
它适用于所有class="test"元素里的p标签。
也可以反过来设置，但是反过来，适用的元素对象就不同了，比如：p.test{color:red;}。它适用的元素是所有class="test"的p元素。
有人会说，这不是多此一举嘛？我直接写.test{color:red;}，给p加上class="test"，也可以啊。是没问题，但有时候，我们会遇到一些特殊情况。比如，你设置了.test{color:red}，页面里所有用红颜色的文本都引用了这个样式，但是，现在有一个修改需求，让所有的段落文本都从之前的红色改成蓝色，你怎么办？再写一个样式，然后所有的p标签都加上相应的class？这种情况，就可以用嵌套，直接写个p.test{color:blue;}就可以了。
嵌套有个细节需要注意一下，
.test p{
color:red;
}
这种嵌套，类名和标签名之间有空格。
p.test{
color:red;
}
这种嵌套，标签名和类名之间没有空格。
7、一个标签的class属性可以设置多个值，比如：
.testA{
font-size:16px;
color:red;
}
.testB{
font-weight:bold;
color:blue;
}
<div class="testA testB">我是刘小妞</div>
testA和testB都设置了文本颜色，那显示谁的呢？
当class有多个值时，多个值里面的样式，如果没有重合的，那就合并，如果有重合的，后面的覆盖前面的。所以，上面“我是刘小妞”五个字，显示的效果应该是16号字、加粗、蓝色。
在同一个class设置样式的时候，也是后面的覆盖前面的，比如：
.testC{
font-weight:bold;
color:blue;
color:red;
}
这样的结果是，上面的color:blue;失效，下面的color:red;起作用。
8、我们在拿到设计稿的时候，除了结构，我们还要注意一下里面的元素，一般情况，能用样式写的就用样式来写，样式写不了的，就用图片。
9、我们在写页面的时候，一般情况下，我们是一边写，一边用浏览器浏览。我建议用谷歌浏览器。当遇到样式有问题的时候，我们可以用浏览器的开发者工具来调试，比较方便。现在大部分的浏览器都内置了开发者工具。怎样调出来呢？我们以谷歌浏览器为例，有两种方法。
第一，在网页的空白处，点击右键，如下图
点击“检查”,就会弹出来开发者工具页面，如下图：
左边有一个导航条，elements表示的是页面元素。
右边也有一个导航条，styles表示的是对应的元素样式。
用鼠标点击左边的代码元素，右边的样式就会跟着显示。样式也可以点击修改，非常方便。
还有一种调出开发者工具的方法，如下图。
我个人，更倾向于第一种，比较方便。
ok，今天就介绍这么多，CSS技巧还有很多，我们在实际运用的时候，再慢慢学习总结吧。
CSS的课程，我们暂时告一段落，接下来，我们开始讲JAVASCRIPT了。
长按下方二维码，关注刘小妞的栖息地 👇👇👇
