[TOC]
CssNotes
1、HTML5样式嵌入方法
外部（推荐）<link>标签 <link rel="stylesheet" type="text/css" href="css/layout.css">
内部 在html中使用<style></style>
内联（不推荐）在标签内部，写style=“background: red; border-radius:256px;”
2、css优先级
1 内联style
2 id选择器
3 class选择器
4 标签
3、css长度单位
1 px
2 em
4、css选择器
1 常用选择器
> 标签选择器 span {}
> id选择器 #id {}
> 类选择器 .class {}
> 关联选择器 由父类里面找子类的子类，使用空格
> 组合选择器 使用“,” 选择多个不同的父类里面的子类
2 基本选择器
> :first-child 第一个元素
> :first-letter 第一个字符
> :first-line 第一行
> :last-child 最后一个元素
> :nth-child(2) 第几个元素，括号内可以选择
3 层级选择器
> a,b 组合
> a b 后代中所有的
> a>b 子元素（不包括孙子级别）
> a+b 后面的（不是里面的）
4 伪类选择器
> :hover 当鼠标移动到其上方的时候，其样式进行改变
> :focus 获取焦点 如input
> ::selection 被选择的时候，如文本的选择时可以进行操作
5 属性选择器
> [id] 该标签含有该属性就够了，如input[name] {}指的是，选择input标签中含有name属性的标签
> [id=use1] 该标签的属性为，如：input[name=username]{}
> [name*=us] 该属性中含有后面的字符的，如：input[name*=us]{}，指的是name属性中包含有"us"字符的
> [name^=en] 选择该属性以“en”开头的
> [name$=en] 选择该属性以“en”结束的
。。。还有很多，具体参考API文档
5、常见的样式属性和值
1 字体与颜色
font-family 字体类型，如： 宋体、黑体、微软雅黑，默认为宋体
font-size 字体大小，
font-style 字体样式，是正常，还是斜体 normal、italic
font-weight 字体粗细，bold为粗体，默认为正常
可以自定义字体，如下，自定义了font-family为“zcx”的字体类型
@font-face {
font-family:zcx;
src:url('zcx.ttf');
}
2 背景属性
background-color
background-image
background-repeat 重复，比如图比较小，可以使用多个 可以为 no-repeat
background-attachment fiexed（固定） scroll（跟着滚动）适用于body对div不兼容
background-position
水平:left center right ，垂直:top center bottom
50% 50%
500px 700px
可以缩写，对其颜色 no-repeat 位置等进行一行写完。
3 文本属性
letter-spacing 字间距
word-spacing 词间距
text-decorationg none、underline、overline、line-through
text-align 文本居中，left、center、right
text-index p标签段落首行缩进
line-height 文本的高
color 文本颜色
word-break 自动换行，中文会自动换行，英文不会，因此可以使用break-all
*若文本溢出文本框，则可以使用 overflow:auto,可以自动出现滚动条
4 边框属性
border-style none、hidden、dotted、dashed、solid、double、groove（凹进去）、ridge（凸出来）、inset(凹进去的)、outset（凸出来的）
border-width
border-color
border-bottom 设置底部边框的样式
border-left 设置左侧边框的样式
border-right
border-top
5 鼠标光标属性 cursor:
crosshair 十字形状
pointer 小手形状
text 文本形状
wait 等待形状
default 默认形状
help 帮助形状
6 列表样式 <ul> <li>
list-style-type: none、disc、circle、square、decimal、lower-roman、upper-roman、lower-alpha、upper-alpha
定宽、定高的效果：min-width（当再更小的时候，会出现滚动条）
textarea文本域【cols 和 rows 表示 宽 和 高 】
resize：none 文本框不能拖动调动大小 可设置width 和 height
样式继承：
文字样式、颜色、大小继承【文本属性】可以继承
表格：<table> <tr> <th> <td> border、width、cellspacing
border-collaps: collaps表格边框是否合并
border-spacing 表格边框之间的距离
7 定位属性
position：【脱离文档流】
absolute 不占位置 坐标系为浏览器左上角
relative 占位置 坐标系为自己左上角
实现div绝对位置方法：父div的position为relative，子div的position为absolute
【即为：若absolute外层为relative，则其位置top，left为相对于外层relative的位置，否则为相对于浏览器的位置】
top left z-index
8 内外边距
外边距 margin
内边距 padding
9 浮动和清除浮动
float: 浮动 脱离文档流，不占位
块标签，设置float值，则不会自动变行 可以使用ul设置导航菜单。
例子：ul中所有的li都设置为浮动，若不设置ul标签的高度，ul会自动设置高度为0，此时在ul中添加一个div标签，并设置“style='clear:both'”即可。
clear: 一般用于clear：both，在盒子所有的子盒子都浮动起来的时候，将盒子撑开。
10 滚动条
overflow: scroll、auto、hidden
11 显示和隐藏
display:
none 看不见，且不占位
block 以块标签进行显示
inline 以行标签进行显示
visibility: hidden 看不见，但占位 visible
12 CSS3
边框样式：
border-radius 圆角直径（1个值 2个值 3个值 4个值）
box-shadow 右下角阴影（5个值 前两个为位置，第三个为模糊值，第四个为外延值，第五个为颜色）
border-image: url('b.png') 26 26 round ，不要忘了加上“border 26px solid transparent”
背景样式：
background-size 背景图的大小
background-origin : padding-box、border-box、content-box
文本样式：
text-shadow 字的阴影
word-wrap break-world 折行
字体样式：
可以自定义字体，如下，自定义了font-family为“zcx”的字体类型
@font-face {
font-family:zcx;
src:url('zcx.ttf');
}
2D样式：transform
translate() 相对移动
rotate() 自身旋转 70deg 若translate和rotate结合，则斜着走
scale() 比例，x、y分别变为原来的几倍，从中心变大的
3D样式：transform
rorateX()
rorateY()
过渡样式：
transition 改变宽高的时间 width 2s
分栏样式：对文本进行分栏
column-count: 分栏数目
column-gap: 分栏中间距离
column-rule: 分栏中间线
轮廓样式：
outline: 2px solid #00f
outline-offset: 离边框的距离
============================================================================================
1、盒子模型
边框：border
内填充：padding
高度：height
宽度：width
外边距：margin
/* padding 内边距
padding: 10px; 四个边都是
padding: 10px 20 px; 上下10px 左右20px
padding: 10px 20px 30px; 上10px 左右20px 下30px
padding: 10px 20px 30px 40px; 上 右 下 左
padding-top
padding-left
padding-right
padding-bottom
*/
同理，margin外边距也是一样的
IE浏览器 的内容并不是正确的，而是width-border*2 -（padding-left*2），可加一个"!important"字段进行标记，IE选择下面一个，而普通浏览器选择important
2、页面布局相关属性
position属性
为absolute时，其位置为相对于浏览器的绝对位置，需要配合top、left来使用【一般结合js来使用，漂浮的广告来用=。=】
为relative时，位置为相对位置其本来默认的位置。
static（静态）为position默认值
fixed（固定），页面上下滑动的时候，其位置不发生任何的变化
z-index
text-align: left right center 【内容】横向居中
line-height: 100px【此时不使用height，直接使用line-height 【内容】垂直居中（或者内加padding）
display属性
block：当span这种非块级区域的标签要进行换行时可以使用
inline：当div这种块级标签想要不换行时可以使用，两个都要用【现在没用？？？？】
none: 隐藏，其该元素的位置没了
visibility属性
inherit 子层继承父层的可见性
visible 无论父层是否可见，子层都可见
hidden 无论父层是否可见，子层都不可见
overflow属性
hidden 超出框的部分隐藏
scroll 超出部分加上滚动条
auto 若超出，则加滚动条，不超出，则不加滚动条
float属性 漂浮
left right 上层有空间就在上层，如果没有，会自动下去 会自动换行
clear属性
left right both
清除指定元素的指定方向的漂浮
3、多列浮动
1 设置一列浮动，一列div盒子居中：让左右自动
margin-left：auto margin-right：auto
margin：0 auto
2 设置两列浮动
float: left right
3 设置三列浮动
float: left right，同时设置 margin-left或者margin-right的距离 【千万不要忘了float】
4 设置多列浮动
float都设置为left
display: block;和display: inline;的区别
block元素特点：
1.处于常规流中时，如果width没有设置，会自动填充满父容器 2.可以应用margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略vertical-align
inline元素特点
1.水平方向上根据direction依次布局 2.不会在元素前后进行换行 3.受white-space控制 4.margin/padding在竖直方向上无效，水平方向上有效 5.width/height属性对非替换行内元素无效，宽度由元素内容决定 6.非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定 6.浮动或绝对定位时会转换为block 7.vertical-align属性生效
link与@import的区别
link是HTML方式， @import是CSS方式
link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
link可以通过rel="alternate stylesheet"指定候选样式
浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
@import必须在样式规则之前，可以在css文件中引用其他文件
溢出省略“...”
.ellipsis{display:block !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。
还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。
