首页 > 代码库 > css基础
css基础
css基础
1、 Css新建格式
Css语法：
选择符{属性名称：属性值；}
1、内部样式表（嵌套到页面中）
语法：
<style type="text/css">
css语句
</style>
注：使用style标记创建样式时，最好将该标记写在<head></head>;
2、内联样式（行间样式，行内样式，嵌入式样式）
语法：
<div style="属性1:值1;属性2:值2;属性3:值3;……"> </div>
3、引用外部样式表文件
(1) 语法：
<link href="http://www.mamicode.com/目标文件的路径及文件名全称"
rel="stylesheet" type="text/css" />
说明：使用link元素导入外部样式表时，需将该元素写在文档头部，即<head>与</head>之间。
href：css文件的路径及文件名全称
rel：用于定义文档关联，表示关联样式表；
type：定义文档类型；
(2)、导入外部样式表
<style type="text/css">
@import url("目标文件的路径及文件名全称");
</style>
说明：@和import之间没有空格 url和小括号之间也没有空格；括号内部加引号，必须结尾以分号结束；
4、css样式表的优先级
内联样式表的优先级别最高
内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。
2、css基础语法
CSS语法由两部分组成：选择符、属性
选择符 {属性: 属性值 } p { color: #ff0000;font-size:12px}
6、CSS选择符包括4大类：类型选择符、id选择符、class选择符、和特殊选择符；
常用的选择符有十种左右,Css选择符分类：
类型选择符（标记选择器）,类选择符 （class选择符）,ID选择符 （id选择器）,伪类选择器,群组选择符（集合选择器）,通配符（*）,伪对象选择符
包含选择符（后代选择器）
类型选择符（标记选择器）:类型选择符就是以文档对象类型的元素作为选择符，即是用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span......等。
类选择符 （class选择符）:类选择器使用必须要引用才能生效,语法：.class名{属性：属性值;}
类别选择器说明：
(1)当我们使用类选择符时，应先为每个元素定义一个类名称，
(2)类选择符的语法格式：
如：<div class="top"></div>
用法：class选择符更适合定义一类样式；
ID选择符:语法：#id名{属性：属性值;}
说明：
（1）可以给每个元素使用id选择符，但id是元素的唯一标识符，不可出现重复的id名；
如：<div id="top"></div>
（2）id选择符的语法格式是“#”加上自定义的id名
如：#box{width:300px; height:300px;}
(3) 起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)
如：head标记
(4)一个id名称只能在文档中出现一次，因为id是唯一的
(5) 最大的用处：创建网页的外围结构。
通配符（*）:语法：*{属性：属性值;}
说明：通配选择符的写法是“*”，其含义就是所有元素；表示该样式适用所有网页元素；
用法：常用来重置样式。
群组选择符（集合选择器）:语法：选择符1，选择符2，选择符3{属性：属性值;}
说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。 做页面居中设置 ：选择符{margin:0 auto;}
包含选择器(后代选择器):
语法：选择符1 选择符2{属性：属性值;}
选择符父级 选择符子级{属性：属性值;}
子代选择器 语法: 选择符父级>选择符子级{属性:属性值;}(子代选择器只能写两輩,多余两輩无效)
说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2;
伪类选择器:
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
说明：
1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：
a，a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；
2）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
例如：a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同，只有鼠标划过变颜色。
|
属性 |
描述 |
CSS |
|
:active |
向被激活的元素添加样式。 |
1 |
|
:focus |
向拥有键盘输入焦点的元素添加样式。 |
2 |
|
:hover |
当鼠标悬浮在元素上方时，向元素添加样式。 |
1 |
|
:link |
向未被访问的链接添加样式。 |
1 |
|
:visited |
向已被访问的链接添加样式。 |
1 |
|
:first-child |
向元素的第一个子元素添加样式。 |
2 |
|
:lang |
向带有指定 lang 属性的元素添加样式。 |
2 |
属性选择器:
语法: [属性符]{属性:属性值;}
例如:[alt]{color:blue;} 或者:img[alt][id]{color:green;}或者img[alt][id=”type1”]{color:green;}
相邻兄弟选择器:
语法：td+td{属性:属性值;} 或者:.tag01+.tag02{属性:属性值}
7 选择符的权重:
css中用四位数字表示权重，
权重规则：HTML标签的权重是1，class的权重是10，id的权重是100。
权重的表达方式如：0，0，0，0；
类型选择符的权重为0001
class选择符的权重为0010
id选择符的权重为0100
子选择符的权重为0000
属性选择符的权重为0010
伪类选择符的权重为0010
伪元素选择符的权重为0010
包含选择符的权重：为包含选择符的权重之和
内联样式的权重为1000
继承样式的权重为0000
群组集合权重为他本身
当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式。
例如：b.demo的权重是1+10=11。
相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。（注意：是样式中定义该选择符的先后，而不是html中使用先后）
ps软件学习
常用快捷键：
（1）c 裁剪、 m 选框、i 吸取、h 抓手、z 缩放、x 前景和背景切换、f 屏幕模式的切换、
（2）ctrl+s 保存、ctrl+shift+s 另存、 ctrl+z 返回上一步、 ctrl+t 自由变换、 ctrl+c 复制、ctrl+v 粘贴、ctrl+n 新建文件
8 css常用属性
标签:
字体{font-family:”宋体”,”黑体”;} 字体大小{font-size:px/cm/% ;}
字体加粗:{font-weight:bold;} 颜色{color: ;}
水平排列{text-align:center/left/right;}
缩进{text-indent:*px/*cm;}
行高{line-height:*px;}
边框{border/border-bottom/border-top/border-left/border-right: ;solid(边框形式): ;}
{border-color: ;border-width: ;border-style:solid/dashed/double;}
下划线{text-decoration:none/underline/overline/line-through);}
超链接鼠标放上去颜色改变a:hover{color: ;}
列表横向排列{list-style-type:none;}
背景色{background-img:url(地址)}
背景平铺属性{backgroun-repeat:no-repaet/repaet-x/repaet-y;}
图片不随滚动轴滚动{backgroun-attachment:fixed/scroll;}
设定图片位置{backgroun-position:top left/bottom left/center/left;}
注意:长度单位(length)有绝对单位cm/nm/in/pt/pc,相对单位em/ex/px
padding{上 右 下 左 }
HTML 块元素 和 内联元素
1、HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。
“块级元素”译为 block level element，Display:block;
“内联元素”译为 inline element。Display:inline;
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：div、H1、P、form、table、ul、pre
2、HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子：span,a,strong, em, input ,select,textarea, img ,br
3、CSS常用样式
width：设置宽度，单位px像素
height：高度
line-height：行高
可用来设置垂直居中，单位为px/em/%，200%可简写为2，一般为1.5或者1.8
color：前景色，也就是文字的颜色
background-color：背景色
font-size:字体的大小
4、CSS 颜色
颜色的三种表达方式：
十六进制 如：color:#ff0000
颜色名称 如：color:red
三原色单位 如：rgb(255,0,0)
一般最常用的是十六进制，三原色单位的原理【红（r）,绿（g）,蓝(b)】混合而成。每个值域在0－255之间。
5、CSS 长度
长度的三种表达方式：
px 如：width: 200px;（像素计算机屏幕上的一个点）
em 如：line-height: 2em;（2em 等于当前字体尺寸的两倍）
rem 是相对于根元素大小 （移动端推荐使用）
6、图片类型
网页上常用的图片格式（压缩图片）
1)jpg:有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )
2）gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;
3)png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;
1、背景色（background-color）
2、背景图像（background-image）
背景图片的显示原则
1）容器尺寸等于图片尺寸，背景图片正好显示在容器中;
2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；
3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。
3、背景重复（background-repeat）
在页面上对背景图像进行平铺
|
值 |
描述 |
|
repeat |
默认。背景图像将在垂直方向和水平方向重复。 |
|
repeat-x |
背景图像将在水平方向重复。 |
|
repeat-y |
背景图像将在垂直方向重复。 |
|
no-repeat |
背景图像将仅显示一次。 |
4、背景定位（background-position）改变图像在背景中的位置
值有三种方式：
A.关键字：
|
单一关键字 |
等价的关键字 |
|
center |
center center |
|
top |
top center 或 center top |
|
bottom |
bottom center 或 center bottom |
|
right |
right center 或 center right |
|
left |
left center 或 center left |
B.百分数值：
C.长度值：
设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：
4、背景关联(background-attachment)
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
|
值 |
描述 |
|
scroll |
默认值。背景图像会随着页面其余部分的滚动而移动。 |
|
fixed |
当页面的其余部分滚动时，背景图像不会移动。 |
5、背景尺寸（Background-size）
数值、百分比（根据高度覆盖、易变形）、cover（根据高度覆盖、不易变形）、contain（不变形、易留空白）
总结：CSS 背景属性
|
属性 |
描述 |
|
background |
简写属性，作用是将背景属性设置在一个声明中。 |
|
background-attachment |
背景图像是否固定或者随着页面的其余部分滚动。 |
|
background-color |
设置元素的背景颜色。 |
|
background-image |
把图像设置为背景。 |
|
background-position |
设置背景图像的起始位置。 |
|
background-repeat |
设置背景图像是否及如何重复。 |
如何在一个声明中设置所有背景属性：
背景缩写：
background: #0FF2F0 url(../img/7.jpg) no-repeat center;
7、CSS 字体
1、CSS 字体系列（font-family）
{ font-family: 字体1，字体2；}
body {font-family: "微软雅黑","宋体";}
浏览器首先会寻找字体1、如存在就使用，如果不存在，则寻找字体2，如字体2也不存在则按系统默认字体显示；
当字体是中文字体时，需加双引号；
当英文字体中有空格时，需加双引号如（“Times New Roman”）
当英文字体只有一个单词组成是不加双引号；如：（Arial）；
Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial，新推出的版本也默认为微软雅黑。
2、字体风格( font-style )
最常用于规定斜体文本
该属性有三个值：
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
italic和oblique都表示倾斜，不过oblique的幅度要大一点。但一般浏览器对它们的区分不是很明显
3、字体加粗( font-weight )
设置文本的粗细
{ font-weight:bolder/bold/normal/100—900; }
bolder(更粗的)/bold（加粗）/normal（常规）
字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，而900对应最重的字体变形，一般400常规字体，600-900加粗字体
4、字体大小( font-size )
设置文本的大小
a、使用像素来设置字体大小
b、使用em表示元素字体高度，em值是根据父元素值来确定。
5、字体颜色（color）
6、字体变形( font-variant )
可以设定小型大写字母
{ font-variant:normal(正常的字体)/small-caps(小型的大写字母字体)/inherit(规定继承父元素属性值) }
小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。
字体属性学习大纲
|
属性 |
描述 |
|
font-family |
设置字体系列。 |
|
font-size |
设置字体的尺寸。 |
|
font-style |
设置字体风格。 |
|
font-variant |
以小型大写字体或者正常字体显示文本。 |
|
font-weight |
设置字体的粗细。 |
8、CSS 文本
一、缩进文本（text-indent）
注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素。
1、单位em/px
2、使用负值
p.indent{text-indent: -2em;}
3、使用百分比值，百分数相对于缩进元素父元素的宽度。
4、继承，该属性可以继承
二、水平对齐（text-align）
元素中的文本行互相之间的对齐方式
text-align: center; text-align: right;
按单词换行
word-wrap: normal|break-word;
|
值 |
描述 |
|
normal |
只在允许的断字点换行（浏览器保持默认处理）。 |
|
break-word |
在长单词或 URL 地址内部进行换行。 |
word-wrap:break-word;
三、字间隔（word-spacing）
改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的，只对英文有效，对中文无效。
四、字母间隔（letter-spacing）
字母间隔修改的是字符或字母之间的间隔，对英文和中文都有效。
五、字符转换（text-transform）
属性处理文本的大小写。这个属性有 4 个值：
- none uppercase（大写） lowercase（小写） capitalize （首字母大写）
六、文本装饰（text-decoration）
text-decoration 有 5 个值：
none underline overline line-through blink
七、处理空白符（white-space ）
|
值 |
空白符 |
换行符 |
自动换行 |
|
pre-line |
合并 |
保留 |
允许 |
|
normal |
合并 |
忽略 |
允许 |
|
nowrap |
合并 |
忽略 |
不允许 |
|
pre |
保留 |
保留 |
不允许 |
|
pre-wrap |
保留 |
保留 |
允许 |
四、CSS区块、浮动、定位、溢出、滚动条
1、CSS区块
|
属性名称 |
属性值 |
说明 |
|
width |
像素/百分比 auto |
|
|
height |
像素/百分比 auto |
|
|
min-hieght |
像素/百分比 auto |
|
|
max-height |
像素/百分比 auto |
|
|
min-width |
像素/百分比 auto |
|
|
max-width |
像素/百分比 auto |
|
2、CSS中浮动的使用
1>、元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。
在CSS中，通过float属性来定义浮动，其基本语法格式如下：
选择器{float:属性值;}
|
属性名称 |
属性值 |
说明 |
|
float |
none |
正常显示 |
|
left |
左浮动 |
|
|
right |
右浮动 |
|
|
clear |
none |
允许两边浮动 |
|
left |
不允许左边浮动 |
|
|
right |
不允许右边浮动 |
|
|
both |
不允许两边浮动 |
2>、浮动的特性
1.浮动脱离标准流，不占位置，但会影响标准流。浮动只有左右浮动。
2. 浮动的元素A排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
3.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
4.浮动根据元素书写的位置来显示相应的浮动。
5. 元素添加浮动后，如果没有设置宽高的话，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少。也就是具有了包裹性。
6.浮动具有破坏性，元素浮动后，破坏原来的正常流布局，造成内容塌陷。如果一个标准流中的盒子所有的子元素都进行了浮动，而且盒子没有设置高度，那么父容器整个高度会塌陷。
3>、清除浮动
方法一：使用空标记清除浮动。
<div style=“height:0px; clear:both;”></div>
方法二：使用after伪对象清除浮动。 （推荐）
.clear:after{
content:””;
display:block;
clear:both;
height:0;
visibility:hidden;
}
.clearfix{
*zoom:1;
}
方法三、
overflow:hidden;
4>、overflow属性的常用值
|
属性名称 |
属性值 |
说明 |
|
overflow |
visible |
内容不会被修剪，会呈现在元素框之外（默认值） |
|
hidden |
溢出内容会被修剪，并且被修建的内容是不可见的 |
|
|
auto |
在需要时产生滚动条，即自适应所要显示的内容 |
|
|
scroll |
总是显示滚动条 |
|
|
overflow-x |
同上 |
|
|
overflow-y |
同上 |
|
5>、定位
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器{position:属性值；}
position属性常用值
|
值 |
描述 |
|
static |
自动定位（默认） |
|
relative |
相对定位，相对于其源文档流的位置进行定位 |
|
absolute |
绝对位置，相对于其上一个已经定位的父元素进行定位 |
|
fixed |
固定定位，相对于浏览器窗口进行定位 |
元素的定位属性主要包括定位模式和边偏移两部分。
边偏移
在CSS中，通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比。
静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。
固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。IE6浏览器不支持固定定位。
z-index层叠等级属性
在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。定义靠后的，默认在之前的元素之上。不要滥用z-index;父容器的z-index会影响子元素的层级级别。
盒模型
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
CSS中边框的使用
border-color、border-atyle、border-width
简化方案：border:形态 长度 颜色;
border-color:上 右 下 左；
CSS边界盒子模型
padding margin
行内元素不要给上下的margin 和padding,上下margin和padding会被忽略。左右margin和padding会起作用。
盒子的宽与高
使用宽度属性width和高度属性height可以对盒子的大小进行控制。
width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。
大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：
盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和
1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（<img />标记和<input />除外）。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
外边距塌陷
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
相邻块元素垂直外边距的合并
定位设置
1、元素定位 position
语法：语法：position：static /absolute/relative/fixed
取值：
1、static：默认值，无特殊定位，对象遵循HTML原则；
2、absolute：绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据body对象(浏览器)，而其层叠通过z-index属性定义；
3、relative ：相对定位，对象不可层叠，将依据right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置；
4、fixed：(固定定位)未支持，对象定位遵从绝对定位方式（absolute）；但是要遵守一些规范；
绝对定位和相对定位的区别：1、参照物不同，绝对定位的参照物是包含块（父级），相对定位的参照物是元素本身位置；2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。
包含块的概念及作用
包含块是绝对定位的基础，包含块就是为决定定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；默认状态下，body是一个大的包含块。
定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；
定位元素层叠属性
z-index : auto |number； 检索或设置对象的层叠顺序。
auto：默认值。遵从其父对象 number:无单位的整数值。可为负数
1）较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。
此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象。
透明度设置
IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100
兼容其他浏览器写法：opacity: .value/0.2 (value的取值范围0-1,0.1,0.2,0.3-----0.9)
例如：opacity: .8 ; filter:alpha(opacity=80);
滚动字幕
语法：
<marquee behavior=“scroll/alternate” direction="up/down/left/right"
scrollamount=“value” height="value" width="">
内容</marquee>
behavior（行为）="scroll(滚动)/alternate（晃动）
direction（方向）="up(从下向上)/down（从上向下）/left（从右向左）
/right（从左向右）“
scrollamount（滚动速度）="value"
height="value(上下滚动范围)"
width=""(左右滚动范围)
插入flash
语法：
<object width="value" height="value">
<param name="movie" value="http://www.mamicode.com/flash路径及全称" />
（其他浏览器识别）
<embed width="value" height="value" src="http://www.mamicode.com/flash路径及全称"> </embed>
（ie浏览器识别）
</object>
flash源文件格式.fla, 导出影片为.swf, 创建播放器格式为.exe.
将flash背景设置为透明
<param name="wmode" value="http://www.mamicode.com/transparent" />
给<embed>标记添加属性：wmode="transparent"
异常处理
IE中不显示flash,可做如下操作：
A.下载安装flash player;
B.打开IE浏览器，选择工具菜单--Internet选项----安全----低。
滚动条
Overflow内容溢出时的设置
属性：
overflow 水平及垂直方向内容溢出时的设置
overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置
以上三个属性设置的属性值：
visible、scroll、hidden、auto、
visible 默认值，其中的内容无论是否超出范围都将被显示。
hidden 效果与visible相反。任何超出“width”和“height”的内容都会隐藏。
scroll 无论内容是否超越范围，都将显示滚动条。
auto 当内容超出范围时，显示滚动条，否则不显示。
滚动条运用：
1）没有水平滚动条:
<div style="overflow-x:hidden">test</div>
2）没有垂直滚动条
<div style="overflow-y:hidden">test</div>
3）没有滚动条
<div style="overflow-x:hidden;overflow-y:hidden" 或
style="overflow:hidden">test</div>
4）自动显示滚动条
<div style="height:100px;width:100px;overflow:auto;">test</div>
定义滚动条的颜色
scrollbar-face-color(立体滚动条凸出部分的颜色)
scrollbar-highlight-color(滚动条背景条的颜色)
scrollbar-base-color(滚动条背景的亮光色，基底)
scrollbar-arrow-color(上下按钮三角箭头的颜色)
scrollbar-shadow-color(立体滚动条阴影的颜色)(滑动滚动条边框色,ie显示)
scrollbar-dark-shadow-color(立体滚动条强阴影的颜色（浏览器不显示）)
以上适用于<body>、<div>、<textarea>、<iframe>
边框阴影
- box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow,v-shadow必须。水平，垂直阴影的位置。允许赋值。blur可选，模糊距离。spread可选，阴影的尺寸。color可选，阴影的颜色。inset可选，将外部阴影（outset）改为内部阴影。
CSS Sprites（图片整合技术）
原理：将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position来实现背景图片的定位技术。
优势：1）通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度。
2）通过整合图片来减小图片的体积。
滑动门技术：滑动门是一个形象的称呼，它利用CSS背景图像可层叠性，并允许彼此之上进行滑动来创造一些特殊动态效果通过滑动门技术，可以使CSS设计出来的导航菜单兼具传统布局的图像效果，与CSS布局的高效扩展性 。
自适应宽高
宽度自适应：元素宽度设置为100%。（块元素宽度默认为100%）
高度自适应
元素高度自适应窗口高度设置方法：html,body{height:100%;}
自适应元素高度设置方法：height:100%;
元素具备最小高度的自适应：min-height属性：最小高度；
（IE6 BUG：IE6浏览器不识别该属性，兼容IE6方法：hack1:min-height:value; _height:value;hack2:min-height:value; height:auto!important; _height:value;）
类似属性扩展：
min-height（最小高度） max-height(最大高度) min-width(最小宽度) max-width(最大宽度) 注：IE6及以下版本不识别该组属性。
浮动元素父元素高度自适应（高度塌陷）：
hack1：给父元素添加声明overflow:hidden;
hack2:在浮动元素下方添加空div,并给该元素添加上clear:both;height:0;overflow:hidden;
hack3:万能清除浮动法
:after{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
伪对象选择符
:after:与content属性一起使用，定义在对象后的内容： div:after{content:"文本内容";}
:before:与content属性一起使用，定义在对象前的内容
：first-letter:定义对象内第一个字符的样式(该伪元素只能用于块级元素。)
:first-line:定义对象内第一行的样式(该伪元素只能用于块级元素。)
重要属性visibility
visibility:hidden/visible;隐藏/可见 display:none/initial;
visibility:hidden;和display:none;的区别：visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失。
浏览器兼容
常用的浏览器
1）主流浏览器
Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游
2）最早的浏览器 : Mosaic / Netscape Navigator(网景领航者)（1994-2008）简称NN
五大浏览器内核
?Trident （MSHTML） （三叉戟；三叉线；三齿鱼叉）
?Gecko （壁虎）
?Presto （ 迅速的）
?Webkit （Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）
?Blink (由Google和Opera Software开发的浏览器排版引擎)。
出现浏览器兼容问题原因：
由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的。
CSS Bug、CSS Hack：1) CSS Bug: CSS样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.
2) CSS Hack: CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，因为它们都属于个人对CSS代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。
css基础