css

h1 {color:red; font-size:14px;}

rgba（ ， ， ，alpha）透明0-1
opacity:0.5：透明（0-1）
transparent:透明

背景和img的区别 ： 背景css，要有宽高才能支持
img（图片）结构不需要父级容器
img； vertical-align:midde 垂直居中
vertical-align:top 解决基线问题
overflow:hidden 超出的会被裁切

cursor: pointer; （指向时变手型）

清除浮动：clear：both；
解决塌陷问题：1.div clear: both
2..clearfix::after{
conter:””;
display:block;
clear：both；
}
3.ovefrlow：hidden
4.手动添加高度

背景样式：
background-color:背景颜色 ;
background-image:url(图片地址);
background-repeat:重复方式;
background-position:位置;

color:字体颜色：
属性值有四种 r(红0~255)g(绿0~255)b(蓝0~255) a透明度(0~1)
color: red; /字母单词表示/
color:#FF0000; /十六进制表示/
color: rgb(255,0,0); /三原色表示/
color: rgba(255,0,0,0.1); /透明度/

单行文本溢出显示省略号：
1.固定宽高
2.强制不换行3.溢出隐藏
4.隐藏变成省略号

内部样式：

注：使用style标记创建样式时，最好将标记写在;

B
方法一：外部样式表的创建：
外部样式：

rel(relation) : 用于定义文档关联，表示关联样式表；
type ； 定义文档类型；

方法二：外部样式表的导入：

注：@和import之间没有空格 url和小括号之间也没有空格；必须结尾以分号结束；

link 和 @import 的区别：本质的区别：@import是css2.1提出的，所以老的浏览器不支持，@import只有IE5级以上才能识别，而link标签无此问题。
link 和 @import 的区别：link引用的css会同时被加载，而@import引用的css会等到页面全部被下载完再加载 @inport加载css页面时开始会没有样式，网速慢的时候还挺明显

C
内联样式（行间样式。行内样式，嵌入式样式）
语法：<标签 style =”属性 ： 属性值； 属性：属性值；”></标签>

样式表的优先级：
A：内联样式表的优先级别最高
B：内部样式表与外部样式表的优先级和书写的顺序有关，后写的优先级高

伪类选择器：
a: link{属性：属性值；}超链接的初始值的初始状态
a: visited{属性：属性值；}超链接被访问后的状态
a：hover{属性: 属性值；}鼠标悬停，即鼠标划过超链接时的状态
a：active{属性：属性值；}超链接被激活时的状态，即鼠标按下去时超链接的状态

文本大小：font-size：value； 属性为数值时必须加单位，属性为0时除外

文本颜色：color：颜色值；十六进制数，光色模式，颜色值的缩写

文本字体：font-family：字体1，字体2，字体3； 先从1开始2 、3这样。当字体是中文字体是，需加双引号；当英文中有空格时，需加双引号如（“Time New Roman”）；放当英文只有一个单词组成是不加双引号如（Arial）；

文字加粗 font-weight：bolder（更粗的）/bold（加粗）/normal（常规）/100-900；100-900为整数一般500常规字体600-900加粗字体

font-style: italic/oblique/norml（取消倾斜，常规显示）

水平对齐方式：text-align：left/right/center/justify（两端对齐中文不起作用）

font属性的简写：
font-style font-weight font-size /line-height font-family : 不能改变顺序

文字行高：line-height：normal/value；
当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐
当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上
当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下

文本修饰：text-decoration:
none：没有修饰
underline:添加下划线
overline:添加上划线
line-through：添加删除线

列表属性： list-style:none 去掉列表符号

边框border：
常用：border：1px solid red
边框样式：border-style:solid(实线) /dashed(虚线) dotted(点划线) double(双线)，
可单独设置一方向边框，
solid实线 double双实线 dotted点状线 dashed虚线

背景属性：background：颜色 地址 是否平铺 位置；

地址：url（）

平铺：background-repeat：no-repeat；只显示一张图片
background-repeat：repeat-x ；显示x轴全部
background-repeat：repeat-y ；显示y轴全部
位置：background-position：left/center/right/数值top/center/bottom/数值；
background-position：值1 值2；
两个值：第一个值表示水平位置的值，第二个值，表示垂直的位置
当两个值都是center的时候写一个值就可以代表的事水平位置和垂直位置
说明：向左方向，向上方向是负值

背景：css，要有宽高才能支持
图片：结构 不需要宽高

背景属性的缩写语法：
background：属性值1属性值2属性值3；
背景缩写：background（背景图片的路径及全称） no-repeat center top #00；

浮动属性的简单应用：

语法：float：none/left/right;
float:定义网页中其他文本如何环绕该元素显示
浮动的目的：就是让竖着的东西横着来

有三个取值：
left: 元素活动浮动在文本左面
right：元素浮动在右面
none：默认值，不浮动

盒模型：
标准盒模型：
总宽度：border(左右) + width（宽）+ padding（左右）
总高度：border（左右）+height（高）+padding（左右）

IE盒模型：（怪异盒模型） box-sizing:border-box;怪异模型
总宽度：width
总高度：height

border边框: solid 实线 double双实线 dotted点状线 dashed虚线

margin:外边距；
通常控制两个元素之间的位置关系（兄弟级）
margin；不会撑大任何元素的初始宽高
方向：top/right/bottom/left 上左下右
margin：可以取负值
实现版心居中： a版心高度要和父级的高度（外围结高度）一致
b版心{margin：0 auto} 居中
*{margin：0，padding：0}清除浏览器的默认边距 8px

padding;内边距；
padding通常加在父级： 会撑大父级元素的初始宽高

padding加在子级身上：a：会撑大子级原有的宽高
b：不要自己添加颜色

padding：不可以去负值

a:hover：只能本身和子集

首行缩进：（有负值）text-indent:

position:relative ：相对定位；
position：absolute: 绝对定位；

line-height：行高；（行高等于高度的时候处于中间）

overflow:hidden: 超出的会被裁切

transparent:透明；

rgba（ ， ， ， alpha）透明0-1

list-style：none 清除列表圆点；

文本溢出属性：overflow:(visible/hedden/scroll/auto/inherit;)

visible：默认值，内容不会被修剪，会呈现在元素框之外；
hedden：内容会被修剪，并且其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其他的内容
auto：如果内容被修剪，则改浏览器会显示滚动条，以便查看其他的内容
inherit:规定应该从父元素继承overflow属性的值

文本属性-文本溢出
text-overflow:(clip /e;lipsis;)
clip:不显示省略号（..）,而是简单的裁切；
ellipsis：当对象内文本溢出是，显示省略标记；

text-overflow属性仅是： 当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义： 1、容器宽度：width：value；（px、%，都可以） 2、强制文本在一行内显示:white-space：nowrap; 3、溢出内容为隐藏：overflow：hidden； 4、溢出文本显示省略号：text-overflow：ellipsis; 注：必须是单行文本才能设置本文溢出！！！

xhtml 元素被分为三种类型：

块级元素，内联元素，可变元素

块级元素：
div -最常用的块级元素 dl - 和dt-dd 搭配使用的块级元素 form - 交互表单 h1 -h6- 大标题 hr - 水平分隔线 ol – 有序列表 p - 段落 ul - 无序列表 fieldset - 表单字段集//
A、块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，
B、默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。
C、块状元素都可以定义自己的宽度和高度。
D、块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。

内联元素：
a –超链接（锚点） br - 换行 i - 斜体 em - 强调 label - 表单标签 // span - 常用内联容器，定义文本内区块 strong - 粗体强调 textarea - 多行文本输入框 // u - 下划线 select - 项目选择 //
A:内联元素的表现形式是始终以行内逐个进行显示；
B:内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度由内容来确定，它只能根据所包含内容的高度，最小内容单元也会呈现矩形形状；
C:内联元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但个别属性不能正确显示;(margin-top/bottom:;)

块级：就是独占一行 ，块元素会自上向下排列
内联： 行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。

可变元素：
需要根据上下文关系确定该元素是块元素或者内联元素。

行内块元素：
img 图片 ，input输入框， textarea - 多行文本输入框

元素类型的转换：
display属性有19个属性：
属性值：block/inline/inline-block/none/list-item/table-header-group/table-footer-group

block块状显示：类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。或者就是让元素竖排显示。
inline内联显示：在元素后面删除换行符，多个元素可以在一行内并列显示。或者就是让元素横排显示。
当元素设置了float属性后，就相当于该元素具备块状元素显示的特点；
inline-block行内块元素：元素的内容以块状显示 行内的其他元素显示在同一行。
（只有这一个元素类型支持vertical-align属性）img,input
垂直对齐方式{vertical-align:top/bottom/middle;}
none 此元素不会被显示
list-item 将元素装换成列表。li的默认类型

display: block; 将元素装换成块状元素
display：none; 此元素不会被显示

position 定位属性和属性值

position定位属性，检索对象的定位方式；
语法：position：static/absolute/relative/fixed/
1.static:默认值，无特殊定位，对象遵循HTML原则；
2.absolute：绝对定位，将对象从文档流中脱离出来，使left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位，如果不存在这样的父对象，则依据根元素（html）浏览器。进行定位，二其层叠通过z-inde属性定义
3.relative；相对定位，该对象的文档留位置不动，将依据 right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置；其层叠通过z-index属性定义
4.fixed： ：(固定定位)未支持，对象定位遵从绝对定位方式（absolute）；但是要遵守一些规范（IE6浏览器不支持此定位） ；

position:relative 相对定位 不脱离文档流，本身偏移。
position:absoluse 绝对定位 脱离文档流 分两种情况：1当没有父集的时候就以浏览器来偏移 2.有父集的时候就相对父集偏移
定位元素的层级属性：
z-index : auto |number 检索或设置对象的层叠顺序。
auto：默认值。遵从其父对象
number:无单位的整数值。可为负数
没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；
说明：
1）较大 数值的对象会覆盖在较小 数值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。
此属性仅仅作用于 position 属性值 relative 或 absolute,fixed 的对象。

锚点链接的语法和应用场景：
命名锚点链接的应用
定义：
是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。
命名锚点的作用：在同一页面内的不同位置进行跳转。
制作锚标记：
1)给元素定义命名锚记名
语法：<标记 id=”命名锚记名”> </标记>
2)命名锚记连接
语法：

高度塌陷：
min-height 最小高度 （兼容 bug虫子） 只能在高版本以上及ie6以上

高级表单：
表单字段集：

图像域：

——————————————————————————————————————————————————————————
通用属性：

/ 清除浏览器的默认间距 /
{margin：0; padding：0;}
/清除b，strong 默认加粗样式 /
b，strong{font-weight：nomal}
/清除i,em 默认倾斜样式/
i,em {font-style:nomal;}
/清除a标签下划线/
a{text-decoration:none;}
/清除列表默认符号*/
ul,li{list-style:none；}

baby,p,h1,h2,h3,h4,ul{margin:0;}

ul{margin:0;padding:0;list-style:none;}

img{border:none;vertical-align:middle;}

a{text-decoration:none;color:#3c3c3c;} 消除所有a标签下划线

i{font-size:normal;} 文本字体样式为正常字体

.clearfix:aftef{cont:””; display:block; clear：both} 清除浮动

.fl{float:left;} 左浮动
.fr{float:right;} 右浮动

.c4 {color:#f40;} 淘宝红

input,button{margin:0; padding:0;}