标签：数字 线性 盒模型 hid 元素属性 流程 另一个 超出 str
本博客为本人在学习css编程过程中积累的笔记和感悟，仅供学习参考和翻阅
文本样式
text-align: justify; 文本格式：两端对齐
text-indent: 40px / 10%; 文本首行缩进
font-family: "楷体"； 字体样式：楷体
font-style: italic; 字体样式：斜体
line-height: 100px; 总高度100，文本居中显示，使文本中线对齐
vertical-align: baseline, sub, super, top, text-top
文本对齐方式：默认，对齐下标，对齐上标，对齐行中最高元素，顶端与父元素字体顶端对齐，
text-transform: capitalize; 首字母大写
text-transform: uppercase; 选中字母大写
text-transform: lowercase; 选中字母小写
letter-spacing: 10px; 字间距10px
margin
外边距（值可以为负），垂直方向的外边距会重叠（取大值）
border
边框
border: 1px solid red; 设置宽度为1像素的红色实体边框线
border: 1px dashed red; 虚线边框线
border: 1px dotted red; 点状边框线
border: 1px double red; 双线边框线
border-radius: 50%; 四边全圆倒角（长宽相同呈正圆）
border-top-left-radius: 2px; 左上角呈半径为2像素的倒角
padding: 10px 20px; 值不可为负
内边距：上下10px，左右20px
padding: 10px 20px 30px;
内边距：上10px，左右20px，下30px
padding: 10px 20px 30px 40px;
内边距：上10px，右20px，下30px，左40px
outline: 10px solid black;
border要占用像素，outline不占用
display: line-block;
将块级元素转换为行内块级元素
cursor: pointer, waite; w-resize;
鼠标移上之后该元素添加手型：点击，沙漏，左右位移标识；
transform: skew(20deg);
背景向右倾斜；
transform: rotate(90deg);
顺时针旋转90度
box-sizing: border-box;
将盒模型的边框包含在content内，让padding的宽度和border的宽度包含在元素的width内
触发bfc
bfc块级格式化上下文，给父级设置了以下属性，可以保持父级属性不被子级影响，反之亦然
- 根元素
- float
- overflow: auto、scroll、hidden; 子级超出父级范围：自动、出现滚动条、隐藏； overflow-x: scroll; overflow-y: scroll;
- display: table-cell、table-caption、inline-block、flex、inline-flex; 转化为其他元素
- position: absolut、fixed;
overflow: hidden;
子级超出父级范围：不显示；
overflow: scroll
子级超出父级范围：出现滚动条； 父级的范围和属性不变，拉动滚动条可以查看子级
overflow-x: scroll
列表样式
li{
list-style: none; 去掉小圆点
list-style: upper-roman; 大写罗马数字
list-style: lower-roman; 小写罗马数字
list-style: upper-alpha; 大写英文
list-style: lower-alpha; 小写英文
}
选择
#id{ } id选择器
.class{ } class选择器
元素 [ 属性=属性值 ] { } 属性选择器
li: first-child; last-child;
选择第一个元素（当li的父级第一个元素是li时） ，选择最后一个元素（当li的父级最后一个 元素是li时）
li: first-of-type; last-of-type;
选择父级里特定类型的第一个元素 ，选择父级里特定类型的最后一个元素
nth-child() nth-of-type() 用法同上
a: link{ } 未被访问（初始状态）
a: hover{ } 鼠标移入/悬停
a: active{ } 点击时
a: visited{ } 访问以后
伪元素
*: first-letter 第一个字（字母）
*: first-line 第一行
*: before 在...之前
*: after 在...之后
伪类
*: nth-child(3n+1) 选择父级中某个类型为*的项【每3项选择一次，第一项从（3*0+1）开始】
*: nth-of-type(3n+1) 选择父级中特定类型的某项 【每3项选择一次，第一项从（3*0+1）开始】
浮动
- 浮动会脱离文档流
- 浮动会导致其父级高度塌陷（高度变为0）
- 行内元素浮动后（脱离文档流）被视为块级元素
- 浮动对文字有包裹性（如果文字过少，需要手动设置文本的宽度）
- 如果 A 浮动影响了 B ，则在 B 上增加 clear: both 即可消除影响
float: right; 右浮动（列表项从右边依次排列）
clear: both; 清除浮动
定位
相对定位（相对自身原来的位置）
position: relative;
left: -100px; 向左移动100px
绝对定位（脱离文档流）
position: absolute
top: 0px; 置顶
非静态定位（绝对定位会以包含它的非静态定位元素定位）
父级 position: relative; 定位父集
子级 position: absolute; 定位到父集里的绝对位置
固定定位（脱离文档流，以页面视口为准）
position: fixed;
边框/阴影
线型
boder: 1px solid #58a; 直线
border: 10px dashed red; 虚线
border: 10px dotted black; 点线
border: 10px double blue; double点线
框
boder-top: 1px solid #58a; 顶部
border-right: 10px dashed red; 右边
border-left: 10px dotted black; 左边
border-bottom: 10px double blue; 底部
倒角
border-radius: 10px/50%; 圆倒角
阴影
box-shadow: 5px 5px 20px 10px #000; 元素阴影：X Y 模糊 外延 颜色
图片格式
background-repeat: repeat; no-repeat; repeat-x; reapt-y; 背景图设置平铺方式：平铺 ；不平铺；水平平铺；竖直平铺；
背景色渐变
rgb(255,255,255) 白色
rgba(255,255,255,0.5) 白色50%透明度
线性渐变
background: linear-gradient(red, yellow); 纵向背景色渐变：红色，黄色
background: linear-gradient(to right, red, yellow) 向右渐变色：红色，黄色
background: linear-gradient(-90deg, red, yellow) 顺时针90度渐变色：红色，黄色
径向渐变
background: radial-gradient(red, yellow) 径向渐变（呈圆形扩散）
状态渐变
transition: all/width linear/ease-in 1s;
动作渐变：所有/宽度 匀速 时长
-webkit-transition: all linear .5s 浏览器兼容：谷歌
-moz-transition: all linear .5s; 浏览器兼容：
-ms-transition: all linear .5s; 浏览器兼容：Microsoft
-o-transition: all linear .5s; 浏览器兼容：欧朋
transition: all linear .5s;
注：transition属性需渐变，必须设置原始状态（如需top: 100px;则先设置top: 0;），否则无渐变效果
动画
animation: name 2s 3/infinite; 动画属性，首先声明（写在元素属性里）
动画： 名称 时长 3次/循环
@keyframes name{
from{
} 从一个状态变化到另一个状态
to {
}
}
@keyframes name{
0%{
}
30%{
分部制定变化流程
}
100%{
}
}
图片替换技术（点击logo跳转主页）
.h1 a{
display: block; 先将行内标记转换为块集标记
line-height: 200px; 再修改高度，将文字移除显示范围
}
.h1{
//定义块大小
overflow: hiddeng; 将父块范围之外的内容隐藏
}
css基础
标签：数字 线性 盒模型 hid 元素属性 流程 另一个 超出 str
原文地址：http://www.cnblogs.com/mephisto-ef/p/6771635.html
