CSS层叠样式表
css用来表现HTML一个应用或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，拥有对网页对象和模型样式编辑的能力,美化网页。
层叠：就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。后来定义的
样式将对前面的样式设置进行重写。
语法：1选择器：选中要修改的标签 2 把要修改的属性写在花括号内
3 冒号分割，分号结尾
选择器名字{属性名：属性值；属性名：属性值；}， p{color:red;}
选择器命名：不能以 数字，字母，下划线，字符，连字符（-）开头
标签选择器：直接用元素的名称命名。使用这种选择器(称为标签选择器)
简单属性选择器 id（#）：ID属性的值在整篇文档中必须是唯一
class(.):body内的所有元素都有CLASS属性
style:style属性可以替代整个选择器机制,使用style属性能够绕过样式
表将声明直接放置到文档的开始标记中。
组合类型选择器：将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器，更加精确地处理元素。
外部信息，伪类和伪元素：
伪类用于定义元素的特殊状态。
伪元素用于设置元素指定部分的样式。
属性：属性CSS语法中的关键字，规定了格式修饰。
1属性值要合规，避免出现驴唇上画马嘴，张冠李戴的事；一个段落缩进表示长度的属性，强加给表示背景图案的
2默认值；当在样式表单中没有规定该属性，而且该属性不能从它的父级元素那儿继承的时候，则浏览器将认为该属性取它的默认值。
3有的属性只适用于某些个别的元素
4属性的值是否被下一级继承
5百分值所相对的标准：元素所存在父元素的容器的宽度
6该属性所属的媒介类型组
属性值：
1整数和实数
这和普通意义上的整数和实数没有多大区别。在CSS中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，即1.2E3在CSS中将是不合法的。下面是几个正确的例子，整数：128、-313，实数：12.20、1415、-12.03。
2长度量
一个长度量由整数或实数加上相应的长度单位组成。长度量常用来对元素定位。而定位分为绝对定位和相对定位，因而长度单位也分为相对长度单位和绝对长度单位。
绝对长度单位：它就是一个固定的值，一个真实的物理值，它不随设备或者受别的因素影响的长度单位。cm，厘米，cm，厘米，in，英寸等，在web开发中，运用比较少，更多的是被用在印刷、打印等方向。
相对长度单位：em——当前字体的高度，也就是font.size属性的值；ex——当前字体中小写字母x的高度，和小写x的高度一样；Dx——一个像素的长度，其实际的长度由显示器的设置决定。
另一一点值得注意的是，子级元素不继承父级元素的相对长度值，只继承它们的实际计算值。
我们都见得比较多，例如，px，em，ex，rem；这些都是相对长度单位。
1）px，像素：px是相对于显示器屏幕分辨率而言。用px设置字体大小时，可能比较稳定和精确。但是这种方法存在一些问题，例如：IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；Firefox能够调整px和em，rem，但是96%以上的中国网民还是喜欢使用IE浏览器。为了保证用户体验和web页面效果，所以在web开发中还引入了“em”这个长度单位。
2）em，元素的字体高度：em是相对于父元素的属性值而计算的，所以em是非具体的数值。它需要一个参考点，一般都是以<body>的“font-size”为基准。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合：1em= 16px。有时为简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%,此时1em=16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说换算时只需将原有px数值除以10，然后换上em作为单位即可。 em 的值并不是固定的；em的值会继承父级元素的字体大小。
3）ex，所有字体元素中小写x的高度：这个主要与字体有关，不同的字体，即使设置了相同的字体大小，但是ex的值也有可能不同，主要是因为字体的x高度可能不同。不过这个在我们实际开发中运用比较少，一般设置em后，ex就会默认为em的一半，也有为计算方便，将1ex假设等于0.5em,原因在于，大多数的字体的小写字母都是相应大写字母高度的一半。
4）rem，元素字体高度：与em相比较多了一个"r"，是CSS3新增的一个相对单位，是root em，简写rem，这个单位与em的区别在于，使用rem为元素设定字体大小时，rem相对的只是HTML根元素。通过rem，既可以做到只修改根元素就可以成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。 目前，除IE9以下的版本外，所有浏览器均已支持rem。
另外，我们在开发中还需要注意两点：
第一，若rem没有在根元素（html字体）指定参照值，那浏览器默认1 rem就是16px,若rem有指定值，则1rem就是等于指定值 。
第二，html设置为62.5%或者10px时会失效，是因为小于12px或者75%的字体大小不支持换算。这可能与有些浏览器不支持12px以下的大小有关。所以，使用rem单位，html的字体默认字体大小必须设置为12px或以上。若小于12px则浏览器换算时自动默认字体为12px。
跟大家分享一个在线px,em,rem单位转换工具，地址：http://pxtoem.com/；
3百分数量（percentages）
百分数量就是数字加上百分号。显然，百分数量总是相对的，所以和相对长度量一样，百分数量不被子级元素继承。
权重值优先级：1.权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。
2.当很多的样式被应用到某一个元素上时，权重是一个决定哪种样式生效，或者是优先级的过程。
3.每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 。
4.如果两个选择器同时作用到一个元素上，权重高者生效。
权重记忆口诀：!important 无穷大，在属性后面使用该关键字可覆盖任何其他样式
从0开始， 一个行内样式+1000，
一个id选择器+100，
一个属性选择器、class或者伪类+10，
一个元素选择器，或者伪元素+1，
通配符（*号表示）+0。
布局方式
1、负边距与浮动布局
2、弹性布局（Flexbox）
3、流式布局（Fluid）
4、响应式布局（Responsive）
https://www.cnblogs.com/zhangyongl/p/6123522.html
css三种布局,使用css主要有哪几种布局方式
一、静态布局(Static Layout)
布局概念
最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。
优点
采用的是css2之前的写法,不存在浏览器兼容性。布局简单。
缺点
但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。
实现方法
PC端:
最外层居中,使用固定的宽(高)度,超出部分用滚动条查阅。
例如百度首页外层body设置了一个min-width:1000px;,当我打开调试器的时候,底部x轴滚动条就出现了。
当然,它的布局比普通的静态布局要复杂地多了,比如推荐模块又是一个流式布局…
移动端
由于静态布局不适用于手机端,所以一般都会另设计一个布局,并使用另一个域名。
例如刚刚百度的PC端我们切换成手机模拟器访问试试:
确实有点丑是吧。
我们访问一下百度的手机端页面:m.baidu.com
舒服！
再看一下最近比较’火’的京东的案例:分别访问
jd.com
m.jd.com
可以发现:
PC端限制了最小的宽度, 低于了则以最小宽度出现滚动条
移动端限制了最大的宽度, 超过了则以最大宽度居中显示
二、流式布局(Liquid Layout)
布局概念
流式布局也叫百分比布局
这边引入一下自适应布局:
分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的。
而流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。
流式布局常用的设计模板:
左侧固定+右侧自适应
左右固定宽度+中间自适应(参考京东手机版)
页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示 。 你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
优点
元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化
缺点
屏幕尺度跨度过大的情况下，页面不能正常显示。
三、弹性布局(Flex Layout)
布局概念
弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使 的一些复杂易错的hacks方法(如float实现流式布局)。
优点
简单、方便、快速
缺点
CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。
自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。 你可以把自适应布局看作是静态布局的一个系列。 就是说你看到的页面，里面元素的位置会变化而大小不会变化。
四、响应式布局(Responsive layout)
采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局
现在优秀的页面都追求一套代码可以实现三端的浏览;
从概念可以看出来,自适应布局的诞生是为了实现不同屏幕分辨率的终端上浏览网页的不同展示方式。
通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.
利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。
大名鼎鼎的bootstrap就是响应式布局的专家。
官方放出狠话:
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
连我们最热爱的React官方也热衷于响应式布局设计:
《React官方网站》
手机端下的React页面:
五、总结一波
以上四种就是常用的前端布局方案啦，布局并不唯一。灵活应用就能构建出优秀的网站