1.溢出隐藏用省略号表示
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
2.下划线
text-decoration: overline;//上划线
text-decoration: line-through;//中划线
text-decoration: underline;//下划线
text-decoration: blink;//线消失
3.引入.css文件
//.css文件内容：//
.b12{
width: 1100px;
height: 60px;
line-height: 60px;
margin-bottom: 20px !important;
background-color: #fff;
padding: 5px 50px;
}
//.html中引入.css文件：//
<head>
<link rel="stylesheet" href="./位置demo_index.css">
</head>
4.背景图
//背景图：//
.b14 .c3{
background-image: url(./beijing-----23f3ddf914b1b527d0429a3d713cfe3a.png);
}
//背景图定位：//
.b14 .c3{
background-image: url(./beijing-----23f3ddf914b1b527d0429a3d713cfe3a.png);
background-position: 0 -192px;
}
//背景图铺满：//
background-image: url(./b7-pic/b7-e4-下载.png);
background-size: 100% 100%;
//背景图平铺：//
background-repeat: repeat; //平铺·
background-repeat: repeat-x; //只x轴平铺
background-repeat: repeat-y; //只x轴平铺
background-repeat: no-repeat; //不平铺
//背景图随滚动轴移动方式：//
background-attachment: scroll; //随页面的滚动而滚动
background-attachment: fixed; //相对于窗口固定
background-attachment: local; //随内容滚动
5.通配符
* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
6.hover
.b13 .d3:hover{
background-color: red;
color: #fff;
}
.b13 .d3:hover .e1,.e2{
background-color: red;
color: #fff;
}
7.居中
margin: auto;
text-align: center;
line-height: 100px;
//元素居中：//
position: relative;
left: 0;
right: 0;
margin: auto;
8.标签
<h2>标题标签</h2>
//空格//
<br> //换行//
<p>文本标签</p>
<i>斜体标签</i>
9.表单
用户名：<input
type="text"
placeholder="请输入关键字"
readonly value="昵称">
<!-- 文本输入框 placeholder定义关键字提示语
readonly定义只读 一般伴随value使用-->
密码：<input type="password"><br>
<!-- 密码框 -->
性别：<input type="radio" name="sex">男
<input type="radio" name="sex">女<br>
<!-- 单选框 name属性定义多选一 -->
爱好：<input type="checkbox">打游戏
<input type="checkbox">敲代码
<input type="checkbox" checked>打篮球
<input type="checkbox">睡觉<br>
<!-- 多选框 checked属性定义默认选中 -->
省份：<select>
<option disabled selected>--省份选择--</option>
<option>陕西</option>
<option>山西</option>
<option>广东</option>
<option>河南</option>
<!-- 下拉项 disabled定义失效 selected定义默认选中 -->
</select><br>
<!-- 下拉框 -->
数字/月份：
<input type="number" min="1" max="30" step="2"><br>
<!-- 数字类型输入框 min定义最小数字范围
max定义最大数字范围 step定义输入字段的数字间隔 -->
<input type="date">
<!-- 包含日期的输入框 -->
<input type="file"><br>
<!-- 文件域 -->
<input type="reset">
<!-- 重置按钮 -->
<input type="button" value="正在加载"><br>
<!-- 按钮 伴随value使用 value属性定义按钮文字内容 -->
<input type="submit" value="登录"><br>
<!-- 提交按钮 value属性可以更改文字内容 -->
<input type="image"
src="../项目/图片/mww.jpg" width="100" height="50">
<!-- 图像式提交按钮 伴随src使用
width定义图片的宽
height定义图片的高 -->
<textarea cols="50" rows="30"></textarea>
<!-- 可拖动文本框
textarea定义多行文本域 cols定义文本域的宽（每行的字符数）
rows定义文本域的高（显示的行数） -->
元素定义多行输入字段（文本域）
<form action="">
<textarea name="" id="" cols="30" rows="10">
</textarea>
</form>
<!-- 可拖动文本框：cols定义文本域的宽（每行中的字符数），
rows定义文本域的高度（显示的行数） -->
定位
position：static（默认值无效果）：静止定位
：relative相对定位
：absolution绝对定位
：fixed固定定位
：sticky动态固定定位
position：fixed；
left：0；
top：0；
弹性盒子
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
.box{
background-color: #999999;
display: flex;
flex-direction: row-reverse; //主轴水平，起点在右
: row；//主轴水平方向，起点在左
flex-wrap: wrap-reverse; //溢出换行，起点在下
：wrap; //换行，起点在上
：nowrap; //不换行（盒子会压缩）
justify-content:space-around; //水平散开
：center; //居中
}
.box:hover{
transition: all 2s; //渐变
color: #f99;
}
动画：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html