HTML分类：
1. 块级元素：
div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul
特点：总是在新行上开始，高度、行高以及上下边距都可控制，宽度默认是容器的100%，除非设定宽度。
功能：主要是用来搭建网站架构、网页布局、承载内容。
2、行内元素：
span、a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、strike、strong、sub、textarea、tt、u、var
特点：和其他元素都在一行上，高、行高、以及上下边距不可变，宽度就是它的文字和图片的宽度，不可改变。
嵌套规则：1、块级元素与块级元素平级、内嵌元素与内嵌元素平级
2、块级元素可以包含内联元素或某些块元素，但是内联元素不能包含块元素，它只能包含其他的内联元素。
3、有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素
h1~h6、p、dt
4、块级元素不能放在标签p里面
5、li标签可以包含标签，因为li和div标签都是装载内容的容器。
a标签想要用hover必须把它的路径写全
所有属性的简写形式总结：
框：border：width(边框粗细) style(边框样式) color(边框颜色)；（border-top/border-left/border-right/border-bottom）
溢出overflow：visible/(溢出可见)hidden(隐藏)/scroll(显示滚动条，溢出时可用)/auto(自动，溢出显示滚动条，并可用);（overflow-x、overflow-y）
外边距：margin:value(数值) 先上下后左右（可以设负值）
默认拥有外边距的元素：body,p,h1,h2,h3,h4,h5,h6,pre,ol,ul,dl,dd
外边距特殊效果：1.外边距合并2.上下外边距溢出（子元素是一个没有外边距的父元素的第一个或最后一个）
内边距：padding：value 先上下后左右
在设置button type=“submit/reset/button”的宽高时包含边框和内边距
box-sizing：content-box/border-box；按照盒子模型计算（将内边距和边框包含进去）
background：color(颜色) url(“”)(背景照片的路径) repeat(是否重复背景图片) attachment(背景图片固定) position(背景图片定位);
attachment(背景图片固定)：scorll（背景随文本移动）、fixed（固定）
repeat(是否重复背景图片)：repeat、no-repeat、repeat-x、repeat-y
background-size：背景图片的大小：cover扩充足够大覆盖元素区域（有可能背景图显示不完整）
position(背景图片定位);抠图专用；
线性渐变：background-image：linear-gradient（angle（角度或方向），color-point，color-point…）
径向渐变：background-image：radial-gradient（[size（圆半径） at position（圆心位置）],color-point…）
浏览器兼容性：fire-fox：-moz-
chrome&safari：-webkit-
opera：-o-
字体属性：font: style(样式normal/italic) variant（小型大写字母normal/small-caps） weight（字体加粗 normal/bold/400-900） size（字体大小px pt em） family（字体*必须写）;
文本属性：color：颜色、文本排列：text-align：left/center/right；文字修饰：text-decoration：none/underline/line-though/overline；行高：line-weight：value；首行文本缩进text-indent:value；文本阴影：text-shadow:h-shadow（横向阴影） v-shadow（纵向阴影） blur（阴影模糊） color（阴影颜色）；
表格：垂直方向对齐：vertical-align：top/middle/bottom；
边框合并：border-collapse：separate（分离）/collapse（合并）
边框边距：border-spacing：value 一个值垂直和水平都有、两个值代表水平和垂直
标题位置：caption-side：top/bottom
显示规则：table-layout：auto（列宽由内容决定[加载慢]）/fixed（列宽由设定值决定[速度快]）
浮动定位：float：none/left/right；
清除浮动：none/left/right/both；
如果想消除浮动对父元素的影响：设置父元素高度、父元素浮动、父元素设置：overflow：hidden/auto 、父元素设置clear：both。
显示方式：display：none（隐藏：脱离文档流）/block（块级：允许修改尺寸）/inline（行级）/inline-block（行内块：允许修改尺寸）/table（尺寸自占一行）；
显示效果：visibility：visible（元素可见）/hidden（元素不可见：未脱离文档流）/collapse（删除一行或一列不影响布局）
透明度：opacity：0~1；
文本垂直对齐方式：vertical-align：baseline（默认基线对齐）/top/middle/bottom；
光标：cursor：default/pointer（小手）/crosshair（+）/text（I）/wait（等待）/help（帮助）；
列表项标志：lis-style-type：none（无标记）/disc（实心圆）/circle（空心圆）/square（方块）；
列表项图像：list-style-image：url(“url”)；
列表项位置：；list-style-position:outside（标志位于文本域之外）/inside（文本域之内）；
列表属性：list-style：type url() position；
定位：position：static（静态）/relative（相对定位）/absolute（绝对定位：元素会变成块级元素[弹出菜单]）/fixed（固定定位：脱离文档流不占据页面空间）；
偏移属性：top/bottom/left/right：value
堆叠顺序：z-index：value；
自带属性去除body,p,h1,h2,h3,h4,h5,h6,pre,ol,ul,dl,dd{
margin:0px;
padding:0px;
}
背景图片的处理：
#top_box>ul>.shoujijingdong a {
padding-left: 18px;
display: inline-block;
height: 23px;
padding-bottom: 9px;
background: url("../Images/iconlist_2.png") no-repeat;
background-position: -127px -356px;
}
文本样式：
<b></b>加粗
<i></i>斜体
<u></u>下划线
特殊字符：
空格
<<
>>
©@
¥￥
标记：
<img src="图像所在url" width="图像宽度" height="图像宽度"
border="图像边框" alt="图像出错时的文字" title="鼠标放入图片时显示的文字">
<a href="链接的url路径" target="打开新的标签页的方式(取值：_blank/_self)"
title="鼠标放入链接时显示的文字" name="锚点名称"></a>
href="xxx.rar"/href="xxx.zip" : 下载资源
href="mailto:xxx"; : 发送邮件
href="#"; :返回顶部
href="javascript:"; : 连接到JS
常用结构布局：
header：头部
nav：导航内容
aside：侧边栏
section：主题内容
article：论坛帖子
footer：页面底部信息
列表：
ol：有序列表
属性：type：取值：1、a、A、i、I
start：取值：阿拉伯数字
ul：无序列表
属性：type 取值：disc、circle、square、none
CSS：
调整优先级：
! important;
伪类选择器：
链接伪类： : link 匹配尚未访问过的超链接
: visited 匹配访问过的超链接
动态伪类：
: hover 匹配鼠标悬停在元素的状态
: active 匹配元素被激活时的状态
: focus 匹配元素获取焦点时的状态
CSS单位：
%：相对单位
in：英寸 （2.54cm）
cm：厘米
mm：毫米
pt：磅 1/72in
px：像素
em：倍数 1em相当于不变 2em相当于乘以2
块级元素:
宽度：占据父元素的100% 可以更改尺寸
高度：自适应 可以更改更改尺寸
行级元素：
宽度：自适应
高度：自适应
边框属性：
border：
属性：width（线的宽度）style（solid{实线}、dotted{点状虚线}、dashed{线条状虚线}）
border-top、border-bottom、border-left、border-right
border:里面包含padding和主体 可以通过控制padding的大小来给主体加（下）划线
border：数值px solid color;
border-方向-color：单边框颜色
border-方向-style：单边框的样式
边框倒角：
border-radius：数值px、百分比
border-方向-方向-radius：单角倒角
边框阴影：
box-shadow：h-shadow(阴影水平偏移！) v-shadow(阴影垂直偏移！) blur(模糊距离) spread(阴影尺寸) color(阴影颜色) inset(外阴影改为内阴影)；
外边距属性：
margin：数值px/百分比/auto/值为负向相反的方向移动
margin:value ：上下左右的外边距
margin:v1 v2 v1:上下外边距 v2 :左右外边距
margin: v1 v2 v3 v1:上外边距 v2: 左右外边距 v3:下外边距
margin:v1 v2 v3 v4 上右下左 顺时针方向
单边外边距：margin-方向
margin:opx auto;
只对左右外边距有效，上下外边距无效
用于控制块级元素水平居中对齐
必须设置该元素的宽度属性，否则无效
padding:
padding:数值px/百分比%
padding: value 四个方向的内边距
padding:v1 v2 v1:上下内边距 v2:左右内边距
padding:v1 v2 v3 v1:上内边距 v2:左右内边距 v3:下外边距
padding:v1 v2 v3 v4 上右下左 顺时针
padding-方向：单边设置
定位：
浮动定位：float:none/left/right
属性：position
static 静态 默认定位方式 文档流定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
偏移属性：
left、top、right、bottom
left:数值px ：数值为正，向右移动 数值为负，向左移动
背景样式：
background-color:背景颜色
背景颜色淡化：opacity:0-1;
background-image:url("url路径"); -----> 背景图片
background-repeat:no-repeat; ------>背景图片是否需要平铺
background-size:v1 v2/v1% v2%/cover/contain; ------> 背景图片大小
background-position:x y /x% y% ; ----->背景图像位置
x:背景图片在水平方向偏移距离：正：向右移动 负：向左移动
y:背景图片在垂直放向偏移距离：正： 向下移动 负：向上移动
x、y还可以取关键字
x：left、center、right
y：top、center、bottom
字体样式：
font-family：字体选择
font-size：字体大小
font-weight：字体加粗
font-style：字体样式（normal正常/italic斜体）
color:字体颜色
text-align:文本水平对齐方式
text-decoration:(none{无线条样式}/underline{下划线}/overline{上划线}/line-through{删除线})文本修饰
line-height:数值px ----->行高
显示方式：
display:none{隐藏}/block{块级元素}/inline{行级元素}/inline-block{行内块元素}
列表样式：
list-style-type：列表项标记
取值：none/dics/circle/square（ul）
list-style-image:url("url路径"); 列表项图像
list-style-position:：列表项位置
取值：outside/inside
list-style:列表属性
取值：none
在body体中：
width规定了页面的整体宽度
text:定义文本颜色
bgcolor：定义页面的背景颜色
margin:0px auto;属性 整体居中外边距为0px
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h50921.shtml
