CSS、响应式
1、text-align ：
属性规定元素中的文本的水平对齐方式。
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
| inherit | 规定应该从父元素继承 text-align 属性的值。 |
文本阴影：text-shadow: h-shadow v-shadow blur color。前两项是必须的，后两项不是必须。
文字填充色： -webkit-text-fill-color: lightblue;
文字添加边框: -webkit-text-stroke:width，color；
文本缩进：text-indent: 2em;
当文本溢出包含元素时：text-overflow: clip;
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
| string | 使用给定的字符串来代表被修剪的文本。 |
2、 外边距(margin)和内边距(padding)
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
- padding: 用于控制内容与边框之间的距离；
- Border(边框) 围绕在内边距和内容外的边框。
- Content(内容) 盒子的内容，显示文本和图像。
边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下，body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了。
※：对于一些 border、padding、background、margin属性是不能被继承的。
margin collapse（边界塌陷或者说边界重叠）：
1、兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值。左右没有这种情况。
2、父子div：如果父级div中没有 border，padding，overflow，子级div的margin会一直向上找，直到找到某个标签包含border，padding，overflow中的其中一个，然后按此div 进行margin。
4、background：
// 设置背景颜色
background-color: dodgerblue;
// 设置图片背景
background-image: url("logo.gif");
// 背景图像的尺寸 cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。按照最长边
// contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 按照最短边
background-size: cover;
// 背景重复设置 横向重复(repeat-x)、纵向重复(repeat-y)
background-repeat: repeat-x;
//scroll 默认值。背景图像会随着页面其余部分的滚动而移动。fixed 当页面的其余部分滚动时，背景图像不会移动。
background-attachment: fixed;
// 背景图片起始位置 第一个参数控制x轴、第二个参数控制y轴
background-position: center center;
// 图片太小时是否重复
background-repeat: no-repeat;5、border
border属性： border-width的值不能为0。
border-style: solid;
border-color: chartreuse;
border-width: 20px;
简写：border: 30px rebeccapurple solid;对其中一条边的处理一定要在border属性整体设置之后，对其进行重写。
border: dashed 4px red;
border-bottom-color: chartreuse;border-radius:top left,top right, bottom right, bottom left。分别代表四个角的直径。
border-radius:h-top left,h-top right, h-bottom right, h-bottom left/v-top left,v-top right, v-bottom right, v-bottom left。斜杠前面代表四个角的水平直径，后面代表四个角的垂直直径。
border-image: 图片、图片剪裁位置、重复性;
重复：repeat（重复、round（平铺）和stretch（拉伸）。其中，stretch是默认值。
6、overflow：处理溢出元素内容区的内容会。
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
white-space：处理元素内的空白。
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
7、display：
可以让让块级标签变成内联标签，让内联标签变成块级标签。
属性：block 可以将内联标签变成块级标签。inline 将块级标签变成内联标签。none：隐藏元素。inline-block：既是块级元素，又不会独占一行。浏览器默认会加上间距。
图片间的间隙小bug可以通过如下设置解决：
#outer{
border: 3px dashed;
word-spacing: -5px; /* 通过word-specing可以调节父级元素的两个子元素的间距。 */
}letter-specing：字母之间的距离(字间隔)。word-specing：单词之间的距离(字符间距)。
8、float 浮动
先了解一下什么是文档流：
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
只有绝对定位absolute和浮动float才会脱离文档流。
浮动定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的浮动框之后的块框表现得就像浮动框不存在一样。（注意这里是块框而不是内联元素；浮动框只对它后面的元素造成影响）。换句话说，浮动就是将某个元素飘起来（使其脱离文档流），后面的元素会补上这个位置。
清除浮动：
clear： left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：不允许有浮动对象※：但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。
方法一：
.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容；
content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。
display: block; <----加入的这个元素转换为块级元素。
clear: both; <----清除左右两边浮动。
visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；
line-height: 0; <----行高为0；
height: 0; <----高度为0；
font-size:0; <----字体大小为0；
}
.clearfix { *zoom:1;} <----这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。添加上述代码到一个class中，整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
9、响应式：
必须要加上 。
宽度为设备宽度，初始缩放为1.0，最大缩放比例为1.0，用户不允许缩放。
响应式的样式要定义在@media all and (min-width: 600px) and (max-width: 1000px){} 意思是：all--->代表所有设备，当宽度在600px和1000px之间应用下面样式，所有的条件用and拼接。
Title
也可以在Link中直接判断设备尺寸，引用不同css。
最后我们来总结下响应式布局的实现原理
首先我们应该遵循移动端优先，交互和设计以移动端为主，pc则作为移动端的扩展，一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、多媒体）