HTML i em与cite区别
标签 <i> 英文全称是 italic ，意思是斜体，它是一个单纯的样式标签（物理标记），指定文本要用斜体。<em>英文全称是 emphasize ，意思是强调，它是一个带有强调意味的标签（逻辑标记），浏览器通常也把它显示为斜体。<cite>英文全称是 citation ，意思是引用，它是定义引用。
HTML 元素边框border
每个标签（元素）都有边框 border，边框有4个边，上下左右 分别对应
border-top border-bottom border-left border-right
border: 5px solid red;
意思是 border-width: 5px; border-style: solid; border-color: red;
同样的： border-top: 5px solid red; 也是类似的情况。
注意：元素里面直接设置 color的值 是设置的文本的颜色。background-color是设置的元素背景的颜色。
注意：文本元素本身有一个underline属性，作用是在文本下面加一条下划线。 但是只在有文本的下面添加，不会延伸到页面边缘，而border-bottom会一直延伸到页面边缘。
元素可以加入多个类，如 <p class="greentea redburry blueburry"> ,<p>元素属于greentea redburry blueburry这三个类。
line-height: 90% -- 设置文本之间的行高
background-image 属性为元素设置背景图像。元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。
font-size 属性为文本元素设置字体大小
如 font-size: 16px; font-size: 150%; 是父节点的1.5倍 font-size: 1.2em; 是父节点的1.2倍。
或者font-size: xx-small x-small small medium(一般正常的大小) large x-large xx-large;
盒模型
css把每个元素看成一个盒子，这个盒子由一个内容区域以及可选的内边距、边框和外边距组成。
注意：除了大小之外，不能对内边距和外边距指定其它样式。内外边距都是用来提供更多可见的空间，不能对内边距和外边距指定颜色，也不能加任何装饰。不过，由于它们是透明的，所以它们会呈现背景颜色或背景图像。内边距和外边距之间有一个区别：元素的背景颜色或背景图像会延伸到内边距下面，但不会延伸到外边距。
div元素
width属性只指定内容区的宽度。盒子的总宽度还要加上 左右margin、border和padding的宽度。
text-align 设置元素（盒子）内部文本对齐方式，只能作用在块元素上，内联元素则不起作用
可选值 ---- center、left、right、justify -- 两端对齐， js语法：
| object.style.textAlign="right" |
子孙选择器：
div h2 {color: yellow; } -- 只选择div元素下面的h2元素对其进行设置样式，父元素和子孙元素名之间有一个空格。
若页面中有多个包含h2元素的div元素，则可以对div加id，比如上面也可用 #cats h2 {color: yellow; }
直接后代
div>span {
background-color: DodgerBlue;
}
伪类 Pseudo-class
一个链接可以有多种状态：未访问、已访问、悬停、focus和active 等等
根据不同的状态，设置不同的颜色，可以用伪类实现。
a:link {color: green; } a:visited {color: red; } a:hover {color: yellow; } a:focus {color: blue; } a:link {color: purple; }
之所以称之为伪类，是因为这些类是由浏览器增加和删除的（这些类真实存在，浏览器会在后台想这些类增加和删除元素），而不是显式的添加在html中。
布局与定位
浮动元素 float
float属性首先尽可能远地向左或向右（根据float是left还是right）浮动一个元素，然后它下面的所有内容会绕流这个元素，就好像这个元素不存在一样。 不过，对于内联元素定位时，它们会考虑浮动元素的边界，因此会围绕着浮动元素。
为了使页面分栏显示，可以让边栏向右浮动 float: right；并且设置主内容区的右边距 等于 边栏盒子的宽度。
但是这样会存在如上所示的一个小问题，问了解决这个重叠问题，可以使用css的 clear属性 -- 当元素流入页面时，在这个元素左边、右边或者左右两边 (可选择) 均不允许有浮动内容。
也可以向左浮动主内容区，然后边栏设置相应的左外边距。
注意：浮动元素的外边距也不会折叠
注意：也可以浮动内联元素，最常见的例子就是浮动图片，文本会围绕在它周围
流体与冻结设计
上面所讨论的均是流体布局（liquid layouts）：即不论讲浏览器调整到多大宽度，布局都会扩展，填满整个浏览器。流体布局很有用，因为通过扩展，它们会填充可用空间，使用户能够充分利用他们的屏幕空间。
不过，有时让布局锁定可能会更合适，这样一来，当用户调整屏幕大小时，设计仍能保持原样。这称为冻结布局（frozen layouts）。冻结布局会锁定元素，让它们冻结在页面上。
如下：allcontent是body的id，限定body的width为800像素。
绝对定位（absolute positioning）-- 可以按正常顺序排列内容，如边栏div在主内容div下面
position的属性值有4种，默认是static，还有absolute 绝对、fixed 固定、relative 相对。
一个元素绝对定位时，浏览器首先要做的是将它从流中删除，然后浏览器将这个元素放置在top 和 right属性指定的位置上。
绝对定位的缺点：
