css 样式

1、引入外部css样式表

<link rel="stylesheet" href="1.css" />  

2、常用样式

width   宽度。
height  高度。
color   颜色。
transition:1s;                  过渡1秒钟
outline                         设置 4 个边框的样式：(谷歌多线问题可设置outline:none;)

3、背景样式

background                                  背景
background-color:red;                       背景颜色
background-color:rgb(140,160,234);          背景颜色
background:url(1.png);                      背景图片
background-image:url(img/1.jpg);            背景图片(默认平铺)

background-repeat:no-repeat;                背景图片不重复 可连接上面使用
background-repeat:repeat-x;                 背景图片沿着X轴平铺
background-repeat:repeat-y;                 背景图片沿着y轴平铺

background-position:100px,100px;            背景定位x,y轴
background-position:100px;                  背景定位默认x轴
background-position:left,top;               背景定位x(left|center|right),y轴(top|center|bottom)。

background-position:left;                   背景定位y值默认居中
background-position:bottom;                 背景定位x值默认剧中
background-position:center;                 背景定位全部居中

如果设置背景图片沿着X轴平铺，那么background-position:20px,100px;移动后左边不会空白，会填充。
如果设置背景图片沿着y轴平铺，同理。

background-attachment:scroll;               背景可以跟下拉条滚动
background-attachment:fixed;                背景固定定位
background:颜色|图片|是否平铺|定位|固定         背景复合样式

4、边框样式

border:1px solid red;                       1像素实心红色边框
border:1px dashed red;                      1像素虚线红色边框
border:1px dotted red;                      1像素点划线红色边框
border-top:1px solid red;                   可添加(top,bottom,left,right)边框

border-(top,left,right,bottom)              设置边框某个位置
border-(top,left,right,bottom)：none;        让边框某个位置消失

border-(top,left,right,bottom)-width        设置边框每个部分的宽度
border-(top,left,right,bottom)-style        设置边框每个部分的样式
border-(top,left,right,bottom)-color        设置边框每个部分的颜色


注意：如果边框加了2个像素，那么对应的宽高要减2个像素。测量内宽时，不包含边框
提示：ps中按F8，信息面板有w宽h高

5、文本样式

font-size:20px;                     字体大小
font-weight:bold;                   文字加粗（bold加粗/normal不加粗)
font-style:italic                   文字倾斜（italic倾斜/normal不倾斜）
font-family:微软雅黑                    字体

font:字体大小，字体
font:字体大小/行高  字体。
font:加粗，倾斜，大小，行高，字体         字体复合样式


text-align:（left,center,right）      文本对齐方式
text-indent:2em                         首行缩进（1em=1个文字大小）
text-decoration:underline;              文本下划线（line-through删除线/上划线overline/none没有修饰）
text-decoration:none;                   清除a标签下划线

letter-spacing:5px;                     字间距
word-spacing:10px;                      段落字间距
line-height:10px;                       行高

6、可视宽（高） = border+padding+width(height)

padding:10px;                       内填充(padding元素的边框之外显示元素背景)
padding-(top/left/right/bottom)     内填充

margin:10px;                        外边距(margin元素的边框之外不显示元素背景)
margin-(top/left/right/bottom)      外边距

margin:0 auto;                      块水平居中

注意：margin叠加相邻两个元素的上下margin是叠加在一起的

7、选择器

#id         id选择器
.class      类选择器
li          标签选择器
#id p       包含选择器
div,span    群组选择器
*           通配符，代表所有的标签

默认 < 类型 < class < id < style(行间) < !important 
!important  提升样式优先级权重(可以在某一条样式加)

8、块与内嵌

div     块：    1.独占一行。
                2.支持所有的样式。
                3.不设置宽度的时候，宽度撑满整行

span    内嵌： 1.可以在一行显示。
                2.不支持宽高，对上下的margin和padding等样式支持的也有问题
                3.宽度由内容撑开
                4.代码换行会被解析

display:block;      显示为块（使内联元素具备块属性标签的特性）
display:inline;     显示为内嵌（使行块属性标签具备内联元素的特性）

display:inline-block;   

1、块在一行显示。
2.行内属性标签支持宽高。
3.没有宽度的时候内容撑开宽度。
4标签换行解析，ie6/7不支持块属性解析。



visibility              属性规定元素是否可见。
visibility:visible      默认值。元素是可见的。
visibility:hidden       元素是不可见的。

9、浮动

float:left|right|none|inherit;      使元素脱离文档流，按照指定方向发生移动
clear:left|right|both|none|inherit; 元素的某个方向上不能有浮动元素
clear:both                          在左右两侧均不允许浮动元素

float特征
1、块在一排显示
2、内联支持宽高
3、默认内容撑开宽度
4、脱离文档流
5、提升层级半层


清除浮动的方法

.clearfix{
    *zoom:1;
}
.clearfix:after{
    content:"";
    display:block;
    clear:both;
}

<div class="box clearfix"></div>



BFC 标准浏览器
a、float的值不为none;
b、overflow的值不为visible。
c、display的值为table-cell,table-caption,inline=block中的一个。
d、position的值不为relative和static。
e、width|height|min-width|min-height:(!aotu);

haslayout   IE浏览器
a、writing-mode:tb-rl
b、-ms-writing-mode:tb-rl
c、zoom:（!normal）



overflow:hidden 也能清除浮动
问题：需要配合宽度或者zoom兼容IE6 IE7;


overflow:scroll（滚动条）|auto|hidden（隐藏）;
overflow:hidden; 溢出隐藏

10、定位

position:relative;  相对定位

1、不影响元素本身的特性
2、不使元素脱离文档流(元素移动之后原始位置会被保留)
3、如果没有定位偏移量，对元素本身没有任何影响
4、提升层级



position:absolute;  绝对定位
1、使元素完全脱离文档流
2、使内嵌支持宽高
3、块属性标签内容撑开宽度
4、如果有定位低级相对于定位父级发生偏移，没有定位父级相对于document发生偏移
5、相对定位一般都是配合绝对定位元素使用
6、提升层级



position:fixed;     固定定位
与绝对定位的特性基本一致，差别是始终相对整个文档进行定位;
问题：IE6不支持固定定位。


定位其它值
position:static;    默认值
position:inherit;   从父元素继承定位属性的值(不兼容)
position:relative|absolute|fixed|static|inherit;



定位元素位置控制
top/right/bottom/left;  定位元素偏移量


z-index:[number];   定位层级
1、定位元素默认后者层级高于前者
2、建议在兄弟标签之间比较层级

11、透明度

标准  不透明度：opacity:0~1;
IE滤镜：   filter:alpha(opacity=0~100);