目录
css总结
文字属性
color可以定义字体颜色
font-size: 字体大小
font-weight:字体粗细
normal: 默认值，标准粗细
bold: 粗体
bolder: 更粗
lighter: 更细
100~900: 设置具体粗细，400等同于normal，而700等同于bold
inherit: 继承父元素字体的粗细值
font-style: 字体风格
normal： 默认值，浏览器会显示标准的字体样式
italic： 浏览器会显示斜体的字体样式
oblique：浏览器会显示倾斜的字体样式
font-family: 字体
综合:
{font:font-style font-weight font-size/line-height font-family;}
其他属性可以省略，必须保留font-size和font-family属性
外观属性
line-height:行间距 行间距=weight,可以设置水平居中
text-align:水平对齐方式
left 左对齐，默认值
right 右对齐
center 居中对齐
justify 两端对齐
text-decoration:文字装饰
none 默认。定义标准的文本
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 定义穿过文本下的一条线
inherit 继承父元素的text-decoration属性
letter-spacing:字间距
text-indent:首行缩进
color: rgba(r,g,b,a); :颜色半透明 a取值范围 0~1之间
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
行内元素和块级元素
块级元素的特点： （1）总是从新行开始 （2）高度，行高、外边距以及内边距都可以控制。 （3）宽度默认是容器的100% （4）可以容纳内联元素和其他块元素。 行内元素的特点： （1）和相邻行内元素在一行上。 （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。 （3）默认宽度就是它本身内容的宽度。 （4）行内元素只能容纳文本或则其他行内元素 display:块级元素和行级元素互换 display:"none" html文档中元素存在，但是在浏览器中不显示，一般用于配合javascript用 display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分 display:"inline" 按照行类元素显示，此时在设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响 display:"inline-block" 使元素同时具有行内元素和块级元素的特点
背景属性
背景图片(image) background-image : none | url (url) none : 无背景图（默认的） url : 使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。
背景平铺（repeat）：background-repeat : repeat | no-repeat | repeat-x | repeat-y
repeat : 背景图像在纵向和横向上平铺（默认的）
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺 设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。
背景位置(position)：
background-position : length || length
background-position : position || position
length : 百分数 | 由浮点数字和单位标识符组成的长度值
position : top | center | bottom | left | center | right
背景附着：background-attachment : scroll | fixed
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
背景简写：background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
如：background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
背景透明(CSS3)：background: rgba(0,0,0,0.3);
背景缩放(CSS3)：background-size:
a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
多背景(CSS3)
以逗号分隔可以设置多背景，可用于自适应布局
background-image: url('images/gyt.jpg'),url('images/robot.png');
选择器
标签选择器(元素选择器)
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类选择器
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
多类名选择器
.类名1 .类名2{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
id选择器
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
通配符选择器
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
链接伪类选择器
:link 未访问的链接 :visited 已访问的链接 :hover 鼠标移动到链接上 :active 选定的链接
结构(位置)伪类选择器
:first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型 :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素， 不论元素的类型，从最后一个子元素开始计数。 n 可以是数字、关键词或公式
目标伪类选择器(CSS3)
:target目标伪类选择器 :选择器可用于选取当前活动的目标元素
嵌套
多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色
.c1 p { color: red; }
CSS复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
选择器优先级
!important 正无穷 行间样式 1000 id 100 class|属性|伪类 10 标签选择器|伪元素 1 通配符 0 css中同一横行的那个权重大，以哪个为准， 权重相等时，遵循后来先到原则，即后来的覆盖之前的
交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
交集选择器 是 并且的意思。 即...又...的意思
比如： p.one 选择的是： 类名为 .one 的 段落标签。
记忆技巧： 用的相对来说比较少，不太建议使用。
并集选择器
并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
记忆技巧： 并集选择器 和 的意思， 就是说，只要逗号隔开的，所有选择器都会执行后面样式。
比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。 通常用于集体声明。
后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。
子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。
属性选择器
| 选择器 | 示例 | 含义 |
|---|---|---|
| E[attr] | 存在attr属性即可 | |
| E[attr=val] | 属性值完全等于val | |
| E[attr*=val] | 属性值里包含val字符并且在“任意”位置 | |
| E[attr^=val] | 属性值里包含val字符并且在“开始”位置 | |
| E[attr$=val] | 属性值里包含val字符并且在“结束”位置 |
伪元素选择器（CSS3)
E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
E::first-line 文本第一行；
E::selection 可改变选中文本的样式； 4、E::before和E::after 在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
div::befor { content:"开始"; } div::after { content:"结束"; }
盒模型
盒子边框（border）border : border-width || border-style || border-color
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
圆角边框(CSS3)： border-radius: 左上角 右上角 右下角 左下角;
内边距（padding）：上右下左
1个值 padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素
2个值 padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值 padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值 padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针
外边距margin:上外边距 右外边距 下外边距 左外边
外边距实现盒子居中
1.必须是块级元素。
2.盒子必须指定了宽度（width）
给左右的外边距都设置为auto，就可使块级元素水平居中
.header{ width:960px; margin:0 auto;}
清除元素的默认内外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
content宽度和高度
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和 盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子模型布局稳定性
width > padding > margin margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。 padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。 width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。
css3盒模型
1、box-sizing: border-box 盒子大小为 width 2、box-sizing: content-box 盒子大小为 width + padding + border
盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；box-shadow:5px 5px 10px 16px rgba(0,0,0,0.3) inside 默认是outside
浮动
选择器{float:属性值;}
属性值 描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动（默认值）
定位
边偏移
边偏移属性 描述 top 顶端偏移量，定义元素相对于其父元素上边线的距离 bottom 底部偏移量，定义元素相对于其父元素下边线的距离 left 左侧偏移量，定义元素相对于其父元素左边线的距离 right 右侧偏移量，定义元素相对于其父元素右边线的距离 定位模式
position属性的常用值
值 描述 static 自动定位（默认定位方式） relative 相对定位，相对于其原文档流的位置进行定位 absolute 绝对定位，相对于其上一个已经定位的父元素进行定位 fixed 固定定位，相对于浏览器窗口进行定位 3.绝对定位的盒子水平/垂直居中 普通盒子的左右margin改为auto就可以，但是对于绝对定位就无效了 定位的盒子也可以水平或者垂直居中：
1.首先left 50% 父盒子的一般大小
2.然后在自己外边距负的一半值就可以了，margin-left
转载于优秀的博主： https://www.cnblogs.com/zhangcheng94/p/12188755.html
8723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
