CSS样式总结
CSS相关概念
1. CSS的定义
Cascading Style Sheets 层叠样式表（级联样式表）
2. CSS的作用
定义网页外观，如字体、背景、颜色等
3. CSS特点
① 精确的定位 准确的控制页面的任何元素
② 精细的控制 可以做到像素级别的调整
③ 样式与内容的分离 便于维护，便于重用
CSS的使用方式
1. 内联样式（行内样式）
在标签里面添加style属性，属性值 写css 代码
2. 内部样式（通常定义在head头中）
把css代码写在style标签中
注意：style标签可以写在文件内部的任何一个地方，但是建议都放在head头内
3. 外部样式（使用link标签引入单独的css文件）
link标签 <link href="css文件地址" rel="stylesheet" />
@import @import "css文件地址"; 注意：要写在css代码的前面
★：当样式的定义有冲突的时候，行内样式的优先级最高；其他两种看代码出现的顺序，后面的会覆盖前面的；
CSS的基本语法
1. CSS语法
选择器：是你需要改变样式的 HTML 元素
声明：
声明都被包含在{}中；
每条声明由一个属性和值组成，中间用冒号隔开；
定义多条声明的时候，用分号隔开；
实例：
h1{color:red; background:blue;}
2. CSS注释
/* 注释内容 */
3. 单位
3.1 长度单位
px 像素(推荐)，屏幕上显示的最小单位；（字体大小默认16px）
em 倍数 字体大小相对于默认的16px来翻倍
% 百分比 字体大小相对于默认的16px来取百分比
========以上3个都是相对单位===========
in 英寸
pt 磅 (1 pt 等于 1/72 英寸)，标准长度单位，通常用于印刷业
mm/cm 毫米/厘米
3.2 颜色单位
1.颜色单词
red green blue yellow pink purple lightblue...
2.以16进制表示, 取值范围0~f
#121212
提示：如果表示三原色的数值相同，可以简写
#00 00 00 = #000
3.rgb
数字： color:rbg(0~255, 0~255, 0~255)
百分比： color:rbg(0~100%, 0~100%, 0~100%)
注意：不能混用！
CSS的选择器
通配符选择器
*{margin:0px}
HTML标签选择器
p{color:red}
CLASS类选择器
.class名{color:red}
ID选择器
#ID名{color:red}
========= 注意：以上4种是基本选择器；请保持ID名的唯一性；class和ID选择器区分大小写，标签不区分
后代选择器
爹 后代{color:red}
空格分隔，相当于找ul的后代中左右的a标签
群组选择器
a, h1, p{color:red}
伪元素选择器（不能在行内样式使用）
选择器:link 设置没访问前的样式
选择器:visited 设置访问过后的样式
选择器:hover 设置鼠标放上来的时候的样式（最常用）
选择器:active 设置鼠标点击还没放开的时候的样式
选择器的优先级
ID选择器 > CLASS选择器 > 标签选择器
CSS中常见的属性和值
1、字体属性
font 设置字体所有属性
font: [粗细] [斜体] 30px '楷体';
font-size 字体大小（常用的）
font-family 用哪一种字体
font-weight 字体粗细 值：100-900的整百数！600以上为粗体，其他为正常大小
font-style 字体样式 italic 设置为斜体
2、颜色属性
color 值参考基本语法中的颜色单位
3、背景属性
background 任意组合各种子属性
background-color 背景颜色
background-color:#ccc;
background-image 背景图片
background-image:url('../html03/img/f.gif');
background-repeat 背景图片的平铺方式
值：repeat(默认) no-repeat(不平铺) repeat-x repeat-y
background-repeat:no-repeat;
background-position 背景图片的位置（九宫格或者像素）
值：left center right top bottom 像素
background-position:10px 100px;
background-attachment 背景图片相对于谁滚
值：fixed(相对于窗口滚) scroll(相对于元素滚) local(默认，跟着内容滚)
4、文本属性
letter-spacing 设置字间距 （值：长度单位）
word-spacing 设置词间距 （值：长度单位；空格区分一个词）
### text-indent 设置首行缩进 （值：长度单位；通常为2em，缩进两个汉字）
text-transform 大小写转换
值：capitalize(每个单词的首字母大写) uppercase(全大写) lowercase（全小写）
### text-decoration 设置线
值：none（没有） underline(下划线) overline(上划线) line-through(删除线)
### text-align 水平对齐方式
值：left center right
### vertical-align 行级元素基于本行的垂直对齐方式
值：
baseline 默认
middle 默认与下标位置之间
sub 下标位置
super 上标位置
top 会找到最上面的哥们对齐
bottom 会找到最下面的哥们对齐
100px 直接设置长度单位
### line-height 设置行高，通常用于文本垂直居中
word-wrap break-word:设置超长变态的单词自动换行
5、边框属性
border 必须记住，设置元素的边框
border:1px solid red; //顺序无所谓
border-width 设置边框的宽度
border-color 设置边框的颜色
border-style 设置边框的样式：solid|dashed|dotted... #可以单独设置上下左右某一条边框
border-top
border-top-width
border-top-color
border-top-style
border-bottom
border-bottom-width
border-bottom-color
border-bottom-style
border-left
border-left-width
border-left-color
border-left-style
border-right
border-right-width
border-right-color
border-right-style
6、鼠标指针样式属性
cursor 设置鼠标指针样式
值：pointer|move|not-allowed|wait|progress... 7、列表属性
list-style 通常是去掉前面的点：list-style:none;
list-style-type 设置图标类型：circle|square...
list-style-image 设置图标图片
list-style-position 设置图标位置：inside|outside
8、表格属性
table-layout: 设置表格为固定布局：auto|fixed
border-collapse: 设置td的边框相邻合并；默认为独立的 值：separate(默认独立) collapse（相邻合并）
网页布局（DIV + CSS）
HTML网页：标准文档流（从左往右，从上往下）由标签构成
浏览器把每一个标签都看做是一个盒子！
布局相关概念：
1.盒子模型
1.1 定义： 任何一个元素都可以抽象一个盒子模型， 盒子里面可以嵌套盒子
1.2 组成： 元素内容（有宽高）、内边距（补白）、边框、外边距（补白）
1.3 相关属性：
width height 盒子的宽高
border 盒子的边框
padding 盒子的边框距离盒子的内容的距离
margin 盒子的边框距离上一个盒子或父元素的距离，可以为负值
1.4 盒子模型的宽高
盒子的宽 = 内容的宽 + 左右内补白 + 左右边框
2.标签分为块级元素和行级元素
块级元素（标签）
一般用来搭建网站架构、布局、承载内容……像这些大体力活都属于块级元素的
如：div|ul|li|dl|dt|p。。。
特点：
1、从左到右撑满页面，独占一行。
2、如果没有设置宽度，默认是它容器宽度的100%
3、块级元素可以包含其他块级元素或者行级元素（P标签除外）
部分标签：h1~h6、p、dt。。。（html语法检测的编辑器会报错，只有p标签会影响结构）
<ul>、<ol>、<dl>、<table>，它们的子一层必须是指定元素
行级元素（标签）
一般用在网站内容之中的某些细节或部位，用以“强调、区分样式、上标、下标、锚点”等等，如：span|a|b|i|strong|img|input。。。
特点：
1、从左到右在同一行显示，触碰到页面边缘时会自动换行
2、设置的宽、高、行高属性没用（部分标签例外），在容器允许的范围内，实际的宽高度是由内容决定的！padding有效；margin左右有效，上下没用！
部分标签：img|input|select|textarea|button|label
3、行级元素只能包含其他行级元素或者文本内容，不能包含块级元素！
3.无意义的块级元素（div）和行级元素（span）
3.1、布局标签
<div></div>
<span></span>
没有任何内涵和样式，常用于布局！
3.2、行级元素和块级元素的转换（display）
display inline|block|inline-block|none
扩充：IE7不支持inline-block，解决方法：首先将其变成行内元素，使其具有行内元素的特性，然后触发haslayout，使其具有块级元素的特性，如此就可以模拟出inline-block的效果
div{
display:inline-block;
*display:inline;
*zoom:1;
}
4.盒子的浮动
浮动的盒子可以脱离文档流；脱离了文档流后，其他的块级元素会无视这个盒子的存在
需要注意的是：元素中的文本依然会为它让出位置，环绕在它周围
float属性，值有right|left|none
5.盒子的定位
相对定位
相对于自己原先的位置定位，配合left|right|top|bottom使用，不会脱离文档流，不影响其他元素的布局；可以与其他元素重叠，但它原本所占的空间不会改变
绝对定位
相对于离自己最近的已定位父元素，如果没有找到，那么它的位置相对于浏览器的可视窗口；脱离了文档流，其他元素（包括元素中的文本）会无视它
固定定位
固定定位，固定在浏览器的某个位置，不随滚动条的滚动而滚动
6.margin的特性
1、两个盒子的水平外边距margin值会相加（正常理解），累加显示
2、两个盒子的垂直外边距margin值会重叠，以最大的为显示标准
3、父元素的第一个子元素的[上边距](只有上边距)margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。将自己的margin应用到“领导”的身上;
解决：
1、给父元素加有效的border或者padding（不能为0）
2、或者设置父元素的overflow:hidden
7.盒子的嵌套
1、如果子元素的宽高超出了父元素，可以通过overflow来控制超出部分
auto 自动 | hidden 隐藏 | scroll 滚动条
2、当子元素浮动后，父元素的高度不会被撑开了！就像橡皮筋一样
解决：
1、让父元素也浮动起来
2、给父元素加上overflow属性
8.居中
水平居中
text-align 可以让文本和行级元素水平居中，设置在要居中元素的父级元素上
margin:0 auto 可以让块级元素水平居中，设置在要居中的元素本身上
垂直居中
line-height 和父元素的height相等，可以让文本和行级元素垂直居中，设置在要居中元素的父级元素上（只能有1行文本）
块级元素垂直居中：（画图中心点演示）
position:absolute;
top:50%;
margin-top:当前元素高度的一半
9.隐藏元素
visibility:hidden 隐藏元素，但保留其物理空间
display:none 隐藏元素，不保留空间
布局相关的属性
1、尺寸
width 设置内容的宽
height 设置内容的高
2、内边距
padding
padding：四边
padding：上下 左右
padding：上 左右 下
padding：上 右 下 左
padding-top 上
padding-right 右
padding-bottom 下
padding-left 左
3、外边距
margin
margin:四边
margin:上下 左右
margin:上 左右 下
margin:上 右 下 左
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距
4、布局
display 设置元素的显示方式
值：
none 隐藏元素，很彻底的隐藏，不保留物理空间
block 显示为块级元素
inline 显示为行级元素
inline-block 显示为行内块级元素（类似于img、input标签，可以设置宽高）
float 设置元素浮动方式
值：
left 往左浮动
right 往右浮动
none 不浮动（默认）
clear 清除浮动。一般用于被浮动所影响的(块状)元素上
值：
both 清除两边的浮动（常用）
left 清除左浮动
right 清除右浮动
overflow
值：
auto 溢出就显示滚动条，没超出就算了
hidden 溢出隐藏
scroll 溢出滚动（有没有超出都有滚动条的位置）
overflow-x 设置水平方向的溢出方式，值和overflow一样
overflow-y 设置垂直方向的溢出方式，值和overflow一样
visibility 设置元素的可见性
值：
hidden 隐藏可见元素
visible 显示元素（默认）
5、定位
position 设置元素的定位方式
值：
relative 相对定位
absolute 绝对定位
fixed 固定定位，固定在浏览器的某个位置，不随滚动条的滚动而滚动
z-index 设置元素的堆叠层级
值为一个整数，越大优先级越高；可以有负值
注意：必须设置了postion的属性才有效！如果值相同，写在后面的会覆盖前面的
布局
1.取消标签的默认样式
body、h1~h6、p、ul 的margin值
img的border值(IE默认有边框)
a标签的text-decoration:none
2.子元素继承父元素的属性设置
字体、颜色、文本相关的属性，子元素会继承父元素的
比如：在body中设置了字体样式，所有元素都会生效
跟布局相关的属性，不会被继承；
比如：边框、内边距、外边距、宽高、背景。。。
/********************* CSS3 **********************/
选择器
元素选择器
通配符 *
标签选择器 li|div|a|b
ID选择器
类选择器
关系选择器
后代选择器 ul li{...}
ul的后代li
儿子选择器 ul > li{...}
ul的儿子li（不包括孙子）
相邻选择器 ul + div{...}
ul后面紧挨着的div
相邻选择器 ul ~ div{...}
ul后面所有的div
属性选择器
E[attr]
包含attr属性的E元素
E[attr="val"]
attr属性等于某个值的E元素
E[attr^="val"]
包含attr属性，并且值是以val开始的E元素
E[attr$="val"]
包含attr属性，并且值是以val结尾的E元素
E[attr*="val"]
包含attr属性，并且值里面包含val的E元素
E[attr~="val"]
包含attr属性，并且值用空格分割后还包含val的E元素
E[attr|="val"]
包含attr属性，并且值用|分割后还包含val的E元素
伪类选择器
E:link
E:visited
E:hover
E:active
E:first-child
E:last-child
E:nth-child(n)
E:only-child
E:not(选择器)
E:empty
E:focus
E:checked
...
颜色
设置元素的透明度：rgba(0~255, 0~255, 0~255, 0~1(透明度));
transparent 设置为全透明
属性
边框圆角
border-radius
border-left-top-radius
border-left-right-radius
border-bottom-top-radius
border-bottom-right-radius
盒子阴影
box-shadow
文字阴影
text-shadow:5px 5px 10px yellow;
-webkit-text-stroke:1px red;
兼容写法：
-webkit- 表示chrome谷歌浏览器
-moz- 表示firefox火狐浏览器
-o- 表示opera欧朋浏览器
-ms- 表示IE浏览器
/****************** 以下均为扩充知识 ******************/
css hack
由于各大浏览器对CSS的解析认识不完全一样，所以可以用css hack使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
比如：
比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不认识
/*以下代码在IE7是蓝色，标准浏览器是红色*/
p{
color:red;
*color:blue;
}
比如判断浏览器
<!--[if lte IE 8]>
您的破浏览器太老了, 请到 <a href="http://browsehappy.com/">这里</a> 更新, 以获取最佳的体验
<![endif]-->
lt <
gt >
lte <=
gte >=
关于inline-block后的换行符产生空格问题：
? block水平的元素inline-block化后，IE6/7没有换行符间隙问题，其他浏览器均有；
? inline水平的元素inline-block后，所有主流浏览器都有换行符/空格间隙问题；
? font-size:0，去除换行符间隙，在IE6/7下残留1像素间隙，Chrome浏览器无效，其他浏览器都完美去除；
? letter-spacing负值可以去除所有浏览器的换行符间隙，但是，Opera浏览器下极限是间隙1像素，0像素会反弹，换行符间隙还原。
CSS的浮动
float 用于设置css的浮动
之所以会出现浮动，是为了实现文字的环绕效果，并不是为了高大上的布局
浮动的特性：
1. 包裹
一般有3中表现形式：
1. 收缩
没设置宽高的情况下，宽高会收缩到和内容差不多
2. 隔绝
里面发生的事情，与外部无关
具有包裹的其他属性：
display:inline-block|table-cell
position:absolute|fixed
overflow:hidden|scroll //待定
2. 破坏
一般表现为父元素高度塌陷，主要目的是为了实现文字环绕效果
具有破坏性的其他属性：
display:none
position:absolute|fixed
减轻浮动破坏性的两大方法
1. 在浮动元素底部插入clear:both 清除浮动
插入一个block块状元素，并加属性clear:both
如：<div style="clear:both"></div>
可以延伸出追加伪元素清除浮动的写法：
.fix::after{content:'';display:table;clear:both;}
.fix{zoom:1;/*兼容IE6/IE7*/}
2. 让父元素BFC(Block Formatting Context)
能够让父元素BFC的属性：
1. float:left|right
2. position:absolute|fixed
3. overflow:hidden|scroll (常用)
4. display:inline-block|table-cell(IE8+)
5. zoom:1 (IE6/IE7)
浮动后的元素有两种情况，变得像砖块一样，所以被很多人用来布局砌墙：
1. 会将元素块状化
<button onclick="alert (document.defaultView.getComputedStyle(this).display)">按钮</button>
button标签，默认为inline-block,浮动后变成了block
2. 去空格化
position的absolute绝对定位
1. 跟随性：元素设置了absolute后会留在原来的位置经常用于无依赖的绝对定位，脱离relative的掌控
2. 包裹性
3. 破坏性