层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS左右布局：css实现左右布局显示是前端进行页面设计的基础，也是全面了解并学习css一个很好的切入点，因为其中会涉及到对许多css基础点的认知。下面就介绍几种可以实现CSS左右布局的方法：
1. table---table的li实现 实现原理：table标签是能够具有实现左右布局的属性，也是我们项目中使用最多的。table布局也是页面布局中使用的最早的布局方式，随着前端技术的发展，table布局由于自身的局限性逐渐被div布局取代。
2.inline-block 实现原理：display:inline-block属性是介于行级元素(display:inline)和块级元素(display：block)之间的属性，它可以像行级元素一样水平布局，也可以像块级元素设置宽高属性，所以使用它可以进行左右布局。另：它不支持ie6、7浏览器，请注意，但是可以使用inline进行hack处理。
3.float实现左右布局 实现原理：float属性是css中关于布局的一个关键属性，其意为将该块状区域脱离父级标签的文档流，left属性值使该区域向父级标签区域的左侧边界放置，right属性值使该区域块向父级标签的右侧边界放置，如是利用该属性可以实现左右布局。 float属性属于布局属性，其中有着很多重要应用。
float属性的三个特性为：
a、包裹性：可以按照区域块中子元素的实际宽度进行包裹；
b、破坏性：float区域块不会被父级区域块包裹，造成前端常见的高度塌陷问题，解决办法是清除浮动；
c、占位性（个人称呼），浮动区域块虽然是脱离了父级区域，但是它是要占用一定的正常流区域的，即如果不清除浮动，我们会看到它会占用它后面的同级元素（如果没有会占用它父级后面的同级元素，如果还是没有则向上追溯）的区域，影响同级元素，所以常见清浮动。
4.基于css3中flexbox属性实现左右布局 实现原理：css3中出现了弹性盒子布局，即display:box;该种布局主要用于移动前端开发，因为该属性不支持ie6、7、8，支持chrome，firefox，ie9+，同时在移动端，主要是ios和Android中基于webkit内核的浏览器都是支持的，所以也是一种好的布局方式。
5.float+margin实现左右布局 实现原理：该部分以及向下主要说明两栏的左右布局的实现。 float能够使得元素向左或者向右靠边布局，如果在同级元素中设置一个正常流的区域与浮动块并列，则浮动块会在该正常流同级区域的边界处，只是浮动块会影响该区域块的布局，所以要清除浮动块的影响，所以此时将正常流区域块的盒子设置margin等于浮动块的宽度既可以清除影响。
6.block formate context(float+overflow)实现左右布局 实现原理：对于float对后面同级元素的影响，除了采用margin进行影响的清除，还可以在受影响的元素上添加overflow：hidden来清除浮动对该区域块带来的影响。具体原理是块级格式化上下文（BFC）的应用。
7.position:absolute左右布局 实现原理：除了float可以产生脱离文档流的布局现象以外，position：absolute也可以，但是二者又有不同之处。不同之处在于absolute可以覆盖任何位置的元素且不会影响正常流的布局，但是会产生遮盖，所以要求正常流要躲避绝对布局的遮挡。躲避方式可以使用margin。
CSS左中右布局：实现左中右布局，与实现左右布局类似，只是在左右布局的基础上再添加一个元素，从两个元素的布局增加到三个元素的布局，一下是实现左中右布局的几种方式：
1. float+margin
2. float+absolute
3. display:box;box-flex:1
4. display:flex;flex:1
CSS水平居中：在CSS中，不同元素解决水平居中的方案也不同，以下是常见的几种解决水平居中的CSS方案：
内联元素：只需要把行内元素包裹在一个属性display为block的父层元素中，并且把父层元素添加如下属性即可：
.parent{
text-align:center;
}
一个外联元素：将左右margin设置成自动即可。
.item {
/* 这里可以设置顶端外边距 */
margin:10px auto;
}
多个外联元素：
1.将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可。
.parent {
text-align:center;
}
2.使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可。
.parent {
display:flex;
justify-conte；nt:center;
}
CSS垂直居中：实现原理与水平居中类似，以下是常见垂直居中CSS解决方案。
1.单个内联元素：
.parent {
background:#222;height:200px;
}
/* 以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
a{
height:200px;line-height:200px;
color:#FFF;
}
2.多个内联元素：使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果。
.parent {
background:#222;width:300px;height:300px;
/* 以下属性垂直居中 */
display:table-cell;vertical-align:middle;
}
3.已知高度外联元素：
.item{
top:50%;margin-top:-50px;
/* margin-top值为自身高度的一半 */
position:absolute;padding:0;
}
当然，CSS功能非常强大，作为初学者，后面还有很长的路要走，最后就介绍一些CSS的小技巧，以备不时之需：
1.Photoshop的混合模式：目前Firefox和Safari浏览器已经开始支持，但是在Chrome和Opera浏览器中需要添加前缀。
2.渐变边框：要使用渐变边框非常简单，只需要设置一个更低z-index的伪元素即可。
3.currentColor：使用这个方法来侦测当前的颜色，以避免经常地重复定义它。
4.Object Fit：设置一幅背景图background-size属性。
5.单选框和复选框的样式：可以隐藏了原有的复选框，改为使用伪元素和伪类:checked（IE9+）来表现它。当它被选中时，一个设置在content里的Unicode编码的字符将会显示出来。
6.CSS中的计数器：定义了一个ID在counter-reset属性中作为初始值（默认为0）。也可以设置另一个值在counter-increment属性中作为每一步的递增值。
7.高级CSS计数器
8.不使用图片的菜单图标：1.Shadows；2.Gradient；3.UTF-8；
9.@Supports：检测某些设定是否被浏览器所支持，并非所有的浏览器都支持它，但是你仍然可以使用它作为基本的检测手段。
10.visibility: visible：一个设置为visibility: visible的元素放在一个设置为visibility: hidden的元素里面，则父元素都被隐藏，而子元素不会。
11.position: sticky：运行效果和fixed相同，但不会挡住任何元素。
12.新的尺寸单位：vw (viewport width) - 浏览器窗口宽度的1%；vh (viewport height) - 同上，只不过用来描述高度；vmin and vmax 设置介于vh和vw之间的最大最小值。
13.文字修饰：修改文字被选中时的效果。
14.触摸屏当中的元素滚动：如果你需要在触摸屏当中为一些元素设置内滚动，那么你不仅需要overflow: scroll / auto ，还需要-webkit-overflow-scrolling: touch。
15.Unicode Classes：用Unicode符号明名class。这其实是用来搞笑的，千万不要在大型项目中使用，因为不是所有的电脑都支持Unicode符号。
16.垂直方向的百分比边距：子元素的百分比是相对于父元素的宽度。。
17.user-select 可以禁止用户选中文本。
18.修改浏览器的滚动条样式 ：：-webkit-scrollbar-thumb，可以修改浏览器的滚动条样式。
19.ransform-style: preserve-3d 让元素支持3d。
20.perspective 透视：这个属性的存在决定你看到的元素是2d还是3d。一般设置在包裹元素的父类上。
