以下是本人初学时的笔记，不足之处，望猿友们指出
css基础
1、CSS层叠样式表（Cascading Style Sheets）
2、CSS的样式表
A、内部样式表
<style type=”text/css”>
Css属性及属性值
</style>
B、内联样式表
<div style=”color:red;”></div>
C、外部样式表
<link rel=”stylesheet” type=”text/css” href=”路径”>
<style type=”text/css”>
@import url(路径);
</style>
3 两种引用外部样式表的区别（link与@import的区别）
1、link是XHTML定义的，@import是CSS提供的，link可以加载其他的文件，如RSS，@import只能加载css样式
2、加载顺序的区别：link的css样式和html一起加载，@import是等html全部加载完成之后再加载
3、兼容性的区别：@import是在ie5以上的版本生效，link无此要求
4、使用dom时区别：使用js控制dom时@import不能控制dom而link可以
4 样式表的优先级
内联样式优先级最高，外部样式与内部样式取决于他们的书写顺序，谁在后面谁生效
5 CSS中的选择器
类型选择器 p{属性：属性值；}
Id选择器 #id名{属性：属性值；} 需要引用 id=“id名”
类选择器 .类名{属性：属性值；} class=“类名”
群组选择器 选择器1，选择器2，…{属性：属性值；}
伪类选择器 a标签的四个伪类 （注意他们之间的顺序，若在使用时某个状态失效，先检查是否是顺序问题）
A：link 初始状态
A：visited 访问过后的状态
A：hover 鼠标划过的状态
A：active 鼠标点击时的状态
伪对象 选择符：after{content：“”；}
包含选择器 p b{属性：属性值；}
6 选择器是权重
Id>class>类型>继承
内联权重1000
Id的权重100
Class的权重 10
类型的权重 1
包含的权重是其选择器的和
继承是权重为0
7 注释
Html：<!---->
Css：/**/(不要用//方式)
CSS核心属性
1 文字的属性font
字体font-family
当字体是中文时需要加双引号，只有一个英文单词时直接写，当有一组或多个英文单词组成时需要加双引号。
字体可以引用多个中间用逗号隔开，当第一字体系统没有时，解析第二个，第二没有时解析第三，以此类推，如果都没有用系统默认字体
字体的大小font-size
单位：px p t（印刷字体单位）em 1em=16px 0.75em=12px
xx-small
文字颜色color
可以用6个16进制数表示#ff0000（#号必须要有）当他们两两相同时可以简写#f00
Color：rgb（0,255,255）
Color：rgba（0,255,255,0.2）a代表透明度（css3.0）
加粗font-weight（bold加粗 normal正常）
倾斜font-style（italic倾斜 normal正常）
英文小写变大写font-variant（small-caps小写变大写 normal正常）
文字的复合式写法
font：style variant weight size family
如果仅使用大小 字体行间距时 font：size/line-height family
2 文本设置text
水平对齐方式text-align（left、right、center、
justify）
垂直对齐方式vertical-align（top、bottom、middle）只能与图片连用时生效
行间距line-height
当只有一行文本时行间距等于实际高度可以实现文本的垂直居中
大于实际高度时文本会处于靠下的位置
小于实际高度时文本会处于靠上的位置
文本修饰text-decoration
没有none 上划线overline、 下划线underline 中划线line-through
首行缩进text-indent（取值是根据文字大小可以设置负值）
字符间距letter-spacing
词间距word-spacing
文本流控制
文本大小写text-transform（capitalize首字母大写uppercase全大lowercase全小写）
文本的阴影text-shadow（水平偏移 垂直偏移 模糊值 颜色）
3 列表的设置
列表符号list-style-type（disc实心圆 circle空心圆 square实心方块 decimal数字 none没有）
列表符号是图片list-style-image：url（图片路径）
列表符号的位置list-style-position（inside outside）
去掉列表符号list-style：none
4 边框设置border：粗细 颜色 线型（solid实线 dashed虚线 dotted点状线 double双实线）3个属性直接没有顺序要求
可以分别设置不同方向的边框border-top（left、right、bottom）
可以单独设置不同方向的粗细border-top-width
可以单独设置不同方向的线型border-top-style
可以单独设置不同方向的颜色border-top-color
5 背景background
背景颜色background-color
背景图片background-image
背景重复background-repeat（repeat、no-repeat、repeat-x、repeat-y）
背景的位置background-position：左右 上下（具体数值）m m
背景的固定background-attachment：scroll（滚动）/fixed（固定）
6 浮动float（left、right、none）
7 清除浮动clear（left、right、both）
盒模型盒模型的组成：外边距margin 边框border 内边距padding 内容
盒子的实际宽度：
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
盒子的实际高度：
margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom
margin padding的值（margin可以设负值padding不可以）
一个值代表4个方向都是一样
两个值代表上下 左右
三个值代表上 左右 下
四个值代表上 右 下 左
margin-top不生效的解决办法
A、 给父元素设置边框
B、 给父元素设置padding
C、 给自身或者父元素添加float
两个盒子之间的外边距：
左右边距是他们的和
上下：当两个盒子都没有浮动的时候（上边设置margin-bottom下边设置margin-top）上下之间的距离是取最大值；当两个盒子都浮动的时候是两个之和；一个浮动另一个清除浮动时取浮动的值
溢出
容器溢出：overflow
Visible：默认的，内容会超出容器的边界显示
Hidden：超出隐藏，且不显示
Scroll：超出以滚动条形式显示
Auto：自适应，超出显示滚动条，不超出没有滚动条
Inherit：继承父元素的overflow的属性
文本溢出：text-overflow
Clip：溢出后直接剪切
Ellipsis：溢出后显示省略号
如果想超出的内容显示省略号的条件：
宽度width：value
强制文本在一行显示white-space：nowrap
超出隐藏overflow：hidden
文本溢出text-overflow：ellipsis
空白空间white-space
pre：保留文本间的空白且遇到边界不换行
pre-wrap：保留文本间的空白遇到边界会换行
pre-line：保留文本换行但是不保留文本间的空白
normal：正常的
nowrap：强制文本在一行显示知道文本结束或者是遇到br
Inherit：继续父元素的white-space属性（只有ie浏览器支持）
元素的类型
元素的分类：块状元素 内联元素 可变元素
块状元素与内联元素的区别（div与span的区别）
块状元素可以设置宽、高，内联元素不可以；
块状元素自上而下独占一行显示，内联元素自左向右一行显示直到宽度不够时才会换行显示；
内联元素遵从盒模型但是有些属性值不能正常显示
内联元素的宽度高度是其内容的宽高，块状元素显示独占一行；
元素类型的转化display（18个属性值）
Block：将元素转化成块状
Inline：将元素转化成内联元素
Inline-block：将元素转化成行内块元素（只有行内块元素支持vertical-align）img input
List-item：列表元素 li的默认元素类
None：隐藏
大多数块元素的元素类型为block，li的默认元素类型为list-item
大多数内联元素的元素类型为inline,img input的默认元素类型为inline-block
常用的块元素：div dl dt dd ul ol h1~h6
常用的内联元素：a span b br em strong i u
兼容性
浏览器的兼容
最早的浏览器网景领航者简称NN；（1994-2008）
五大浏览器内核以及代表作
Trident（三叉线）：IE、360、遨游等市场份额占有率最大的，不是开源的
Gecko（壁虎）：火狐跨平台，开源的
Presto（迅速的）：Opera 渲染速度最快的
Webkit：谷歌开源的
Blink：由谷歌和opera共同开发的
常见的兼容性问题
图片的间隙
将</div>与img写在一行（ie6下有效）
将图片转换成块状元素：display：block
dl li 里的图片间隙为图片添加声明display：block
ie6的双边距问题
给浮动元素添加声明display：inline
Ie6的默认高度（8px）
添加font-size:0 或者overflow：hidden
表单行高不一致问题
给表单元素添加float
按钮大小不一致问题
用a标签代替按钮
在表单元素外部添加一个标签，将表单的样式清空
直接用图片作为按钮的背景
百分比问题
当左右两边都是50%的宽度时给右边的添加清除浮动效果
鼠标指针异常cursor：pointer（鼠标变成小手型）
透明度问题（ie7）
filter：alpha（opacity=value）value的取值是0-100
opacity：value value、的取值是0-1
下划线_（在属性前加下划线ie6识别）
*（在属性前加*ie6、ie7都识别）
+（在属性前加*ie6、ie7都识别）
\9（在属性值后添加\9 ie10以下版本都识别）
\0（在属性值后添加\0 ie8以上版本都识别）
关键字！important在属性值后边添加关键字表示将此属性的优先级设置为最大
定位
一、 position（static、absolute、relative、fixed）（使用定位的时候宽度一定要有）
static：默认的 静态的
absolute：绝对定位如果父元素有定位那么他是根据父元素进行的偏移；如果父元素没有定位，那么他是根据浏览器进行的偏移
relative：相对定位 是根据自己所以在位置进行偏移
fixed：固定定位 无论窗口如何变动都不会改变
一个固定宽度的div如何实现水平垂直居中：
A、绝对定位
width：200px; height:100px; position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-100px;
B、固定定位
width：200px; height:100px; position:fixed; top:50%; left:50%; margin-top:-50px; margin-left:-100px;
如果想子元素根据父元素进行定位那么需要给父元素添加position：relative（将父元素作为包含块）
锚点的应用
<div id=”锚点名称”></div>
<a href=”#锚点名称></a>”
圆角：border-radius（c3属性）
滚动条overflow、overflow-x、overflow-y（visible、hidden、scroll、auto）
hack当网页出现横向的滚动条而并非需要的，由于网页基本完成很难找出是由于哪个元素导致的时候，
可用overflow-x:hidden;来隐藏滚动条
常用于小图标icon，优势在于减少服务器对图片的请求次数，加快加载速度
宽度自适应
元素宽度设为：100% （块元素宽度默认100%）
元素具备最小高度自适应
min-heigh最小高度
IE6不能识别min-（IE6下div默认有一定的高度）
hack1：min-heigh:value;_height:value;
hack2： min-height:value;height:auto!important;height:value;
高度自适应
元素高度自适应
设置方法html,body{height:100%;}
需要自适应的元素height:100%;
浮动元素父元素高度自适应（即高度塌陷）
hack1：给父元素添加声明overflow:hidden;zoom:1;兼容IE6
hack2：在浮动元素后添加空div给该div声明：clear:both;height:0;overflow:hidden;/font-size:0;
hack3：通用解决方法
:after{content:".";display:block;height:0;visibility:hidden;clear:both;}
visibility:hidden;与display:block;的区别
都能使对象不可见，但前者使对象在页面中所占的空间没有改变
后者使对象隐藏，不在网页上留下空间
30万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
