HTML标签（元素）

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属性指定的位置上。

绝对定位的缺点：

CSS表格显示