我整理的CSS - lbx

标签选择器

CSS选择器优先级：id(#)     class(.)        标签选择器

* ：表示所有标签，例：*{color:red}

+：表示紧随该样式的同级标签（后面的），例：c1+p{color:red}

~：表示该样式的同级所有标签，例：c1+p{color:red}

.c1>p：表示该样式c1下子元素的p标签

.c1 p：表示该样式c1下子元素的所有p标签

html:
<a href="http://www.abcd.com">abcd</a>
<a href="http://www.abcd.com" title="aaa">abcd</a>
css:
a[title]{}：表示设置了title属性的a标签
a[href='http://www.abcd.com']{}：表示属性值等于http://www.abcd.com的标签
a[href^='http']{}：表示属性值以http开头的标签
a[href$='http']{}：表示属性值以http结尾的标签
a[href*='http']{}：表示属性值包含http的标签

css权重（优先级）
内联（行间样式）
ID（#）
Class（.）/属性
标签
继承
*

字体：
font-weight：字体加粗
text-decoration：上下中画线
text-transform：大小写转化
letter-spacing：文字间距
line-height：行间距（行高）
设置容器里的元素水平并垂直居中：
水平：text-align:center
垂直：line-height = 容器高度

边框：
（简写）
border: 样式 粗细 颜色
border：分为border-style、border-width、border-color
背景：
（简写）
background：颜色  url(链接)  是否重复  是否固定  左边距  上边距
方位position：与左边的间距、与上边的间距
当网页出现滚动条时设置背景图片固定 attachment：fixed

background-size：cover，会让宽度变为100%，高度等比率缩放
background-size：contain，会让高度变为100%，宽度等比率缩放
background-size：100% 100%，用的比较多

隐藏
overflow：
值分别为：
hidden：超出的部分隐藏
auto：超出的部分出现滚动条，未超出就没有
scroll：一直有滚动条

display：none，不占位置
visibility：hidden，占位置

position：absolute，将div重叠在一起。（放于父级元素）
top：上边距（子元素）
left：左边距（子元素）
z-index：控制层级显示，越大显示得越靠上（子元素）

设置垂直居中：vertical-align：middle（只针对行内元素）

超链接颜色：
a:link，默认的颜色
a:visited，访问过后的颜色
a:hover，鼠标滑过的颜色
a:active，鼠标点击的那一刻的颜色

边框：
边框重合：border-collapse：collapse

快级元素：例如div，p，h1~h6，form， menu，pre，table
列表（ol li，ul li，dl dt）
内容默认显示在左上角
默认单独占一行（文档流）
行内元素：例如span，a，label，img， textarea，storing，input，select，......
默认情况下内容不受width，height影响
默认没有单独占一行

盒子模型
内间距：padding（内容与盒子边框的距离）
写法：padding：10px，上下左右为10px
  padding：10px 5px，上下为10px，左右为5px
  padding：2px 3px 1px，上为2px，下为1px，左右为3px
  padding：1px 1px 1px 3px，分别为上右下左

外边距margin（盒子间的距离）
写法与padding一样

伪类
CSS找到所有被禁用的元素写法，： disabled{}
可用，：enable{}
被选中，：checked{}
焦点，： foucus{}
只读，：read- only{}
读写，：read-write{}

伪元素
在标签前面加上一些内容，p::before{content：“哈喽”}
后面，::after{}
修改文字被选中的样式::selection{}

绝对定位
position：absolute
top：上边距
left：左边距
特点：
脱离文档流（不会占位置），不会单独占一行，用top，left，bottom，right确认其位置（如果它的父元素做了定位，就相对于最近的一个父元素，如果父元素没有定位，就相对于body）

相对定位
position： relative
特点：
不会脱离文档流（会单独占满一行的位置）用top，left，bottom，right确认其位置（相对于最近的一个父元素）

固定定位
position： flexd
特点：
脱离文档流（不会占位置），不会单独占一行，用top，left，bottom，right确认其位置（相对于body）

注：top，left，bottom，right只有设置了定位（绝对，相对，固定）才有用。

透明度：
背景和元素都透明，opacity：0.3
背景透明，元素不透明，background：如果把（颜色值1，颜色值2，颜色值3，透明度）

字体
px，大小固定
rem，相对于根元素的属性值，例如html{font-size：10px}（手机）
vw，相对于手机浏览器的宽度，例如p{font-size：4vw}，字体大小是手机浏览器宽度的4%。（手机）

强制不换行，white-space：nowrap

超出的部分使用省略号替换：
overflow：hidden；
text-overflow：ellipsis；

文字阴影，box-shadow：阴影水平方向移动距离  阴影垂直方向移动距离  阴影的尺寸  颜色

盒子阴影，box-shadow：阴影水平方向移动距离  阴影垂直方向移动距离  模糊的距离  阴影的尺寸  颜色

将内边框算在总宽度内：box-sizing：border-box

-moz-xxx：Firefox
-webkit-xxx：Chrome

渐变：linear-gradient
例如：background：linear-gradient（left，red，blue）

分栏：column-count：5

将边框算在总宽度内，outline：1px solid red
border与outline的区别：
border会将内容往外撑
outline不会

响应式布局：
@media only screen and （max-width：800px）{}
就是指屏幕宽度小于800px时执行其样式

根据屏幕宽度不同引入不同的css文件：
指屏幕宽度小于1000px时引入a.css
<link rel=“stylesheet” type=“text/css” href="a.css" media="screen and （max-width：1000px）" />
指屏幕宽度大于1000px时引入b.css
<link rel=“stylesheet” type=“text/css” href="b.css" media="screen and （min-width：1000px）" />