CSS学习

csdn不像简书一样可以即时保存真的很不爽啊！
CSS属性兼容性查询 网站

一、样式

1. 行内样式
2. 内联样式
   一般加上注释，以适应低版本浏览器
   
3. 外部样式
4. 导入式
   
   
   

二、选择

2.1 选择器

1. 标签选择器
2. 类选择器
   .class{}
   区分大小写
3. ID选择器
   #id{}
   区分大小写
4. 全局选择器
   *{}
5. 群组选择器
   用,隔开
6. 后代选择器
   用空格隔开
7. 伪类
   大小写不敏感
   顺序必须为:link->:visited->:hover->:active
   
8. 选择器优先级
   id选择器>类选择器>标签选择器>通配符
   给一个标签注明不同的类名，样式与类名顺序无关，遵循就近原则
9. 权值
   标签选择器：权值为1
   类选择器和伪类：权值为10
   id选择器：权值为100
   通配符选择器：权值为0
   行内样式：权值为1000
   带！important声明是最高的

2.2 继承和层叠

1. 继承
   子元素可以继承部分父元素样式
2. 层叠
   可以定义多个样式

三、文本样式

3.1 字体样式

字体	font-family	“微软雅黑”，字体集（例如serif）
大小	font-size	绝对单位（例如mm）；相对单位(例如20px,2em,70%，em和%都是针对父元素)
颜色	color	yellow;#f0f0f0;rgb(255,255,255)
粗细	font-weight	bold;normal; 700相当于bold
样式	font-style	normal;italic;oblique
字体变形	font-variant	normal;small-caps

当需要同时设置font-size和font-family时可以font属性缩写
语法为（必须按顺序，值之间用空格隔开）：

3.2文本样式

水平对齐	text-align(作用于块级元素)	center;left;right;justify
垂直对齐	vertical-align(作用于行内元素)	middle;sub;super;baseline
行高	line-height	px;em;% em和%与字体大小有关,line-height等于父元素的高度时会垂直居中，如果行高的单位是百分比，那么是基于当前字体尺寸的百分比行间距，本题中字体是20px，那么行高设置为500%，行间距就是100px；
缩进	text-indent(作用于块级元素)	em;% em和%与字体大小有关
单词间间距	word-spacing	px;em;% em和%与字体大小有关
字母间间距	letter-spacing	px;em;% em和%与字体大小有关
文本大小写	text-transform	capitalize;uppercase;lowercase;none
文本装饰	text-decoration	underline;overline;line-through;blink;none

对于块级元素内的多行文本垂直居中，需要在块级元素的父级元素上添加display:table，在块级元素上添加display:table-cell;vertical-align:middle

四、盒子模型

4.1 属性

块级元素和替换元素例如.等才可设置高和宽

width	宽度	长度；百分比；auto
max-width	最大宽度	同上
min-width	最小宽度	同上
height	高度	长度；百分比；auto
max-height	最大高度	同上
min-height	最小高度	同上
border-width	边框宽度	thin;medium;thick;长度值
border-color	边框颜色	颜色;#xxxxxx；rgb(x,x,x)
border-style	边框样式	none;dotted（点状）;dashed（虚线）;solid（实线）;double（双线）
各方向边框设置 border-[left / right / top /bottom]-width / style / color	边框缩写 border:[宽度] [样式] [颜色]
padding-top / right / bottom / left	填充（内容到边框的距离）	长度值(不可为负值)；百分比
margin-top / right / bottom / left	外边距（元素间的距离）	长度值(可为负值)；百分比；auto（实现水平居中）

4.2 display属性

display:inline//设置为内联元素
display:block//设置为块级元素
display:inline-block//行内块元素，呈现为inline，具有block特性
display:nonek//此元素不会被显示

五、背景和列表

5.1 背景

background-color	背景颜色（包括内容、内边距和边框）	颜色；十六进制；RGB；transparent，默认值是transparent
background-image	背景图片（占据内容、内边距和边框）	URL；none，默认值是none
background-repeat	背景图片重复	repeat;no-repeat;repeat-x;repeat-y
background-attachment	背景图片显示方式	scroll（随滚动条滚动）;fixed（背景图片不移动），默认为scroll
background-position	背景图片位置	(x,y);(x%,y%);top;right;left;bottom;center

背景样式缩写(空格隔开，不分先后顺序)-background:

5.2 列表

list-style-type	列表标记样式	无序列表：none;disc;circle;square 有序列表：none;decimal;lower-roman;upper-roman;lower-alpha;upper-alpha
list-style-image	列表标记图片	URL；none
list-style-position	列表标记位置	inside（在文本内，且围绕文本根据标记对其）;outside（默认值，文本外，不对齐）

列表样式缩写（空格隔开，不分顺序):list-style:

六、float浮动

CSS定位机制：

1. 普通流：默认状态，元素从左往右，从上往下排列
2. 浮动：为了让元素同行显示
   

float	浮动位置	left;right;none;inherit
clear	清除浮动(只影响自身)	left;right;none;inherit;both

【易出现问题，清除浮动】父元素高度塌陷，浮动溢出，临近元素异位
【解】
方法一：在浮动元素后使用一个空元素
<div class="clear"></div>
方法二：给浮动元素的容器添加
overflow：hidden; zoom:1;//触发hasLayout兼容IE6、7;
方法三：使用CSS3的:after
方法四：给父级元素定义高度，只适合高度固定的布局
方法五：父元素一起浮动，不推荐
3. 绝对定位

七、定位

只有相对定位relative没有偏移文档流
sticky定位一定要设置偏移量，不然相当于relative
带定位的元素居中办法1：

margin: auto 0;
top: 0;
bottom: 0;//垂直居中

margin: 0 auto;
left: 0;
right: 0;//水平居中

带定位的元素居中方法2：

left:50%;
margin-left: -x;//x为元素宽度的一半，水平居中

top:50%;
margin-top: -y;//y为元素高度的一半，垂直居中

八、布局

1. 行布局
2. 经典两列布局
3. 经典三列布局
4. 圣杯布局
   
5. 双飞翼布局
   
   圣杯布局——container设置padding预留位置，用相对定位
   双飞翼布局——main设置margin预留位置