定位

定位 = 定位模式 + 边偏移定位模式position：
static：静态定位，没有边偏移
relative：相对定位，移动位置的时候参照点是自己原来的位置；
原来在标准流的位置继续占有，后面的盒子任然以标准流的方式对待它（不脱标，继续保留原来的位置）
absolute：绝对定位，如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位；
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考移动位置；
绝对定位不再占有原先的位置（脱标）
fixed：固定定位；元素固定于浏览器可视区的位置；不随滚动条滚条；不占有原先的位置
sticky：粘性定位；以浏览器的可视窗口为参照点移动元素并占有原先的位置，必需有一个边偏移；兼容性较差边偏移：top|left|right|bottom子绝父相定位的叠放顺序：z-index:999;只有定位点的盒子才有该属性绝对定位的盒子居中
left:50%;
margin-left:让盒子向左移动自身宽度的一半;特殊特性
行内元素添加绝对或者固定定位，可以直接设置宽度和高度
块级元素添加绝对或者固定定位，如果不给定宽度或者高度，默认大小是内容的大小
脱标的盒子不会触发外边距塌陷问题浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字、图片
绝对定位（固定定位）会压住下面标准流所有的内容

固定定位小技巧：固定在版心右侧位置

1、让固定定位的盒子走到浏览器可视区一半的位置 left:50%;
2、让固定定位的盒子再多走版心宽度一半的位置 margin-left:版心宽度的一半距离；

元素的显示和隐藏

display:none|block;隐藏元素后，不在占有原来的位置visibility：hidden|visible;隐藏元素后，继续占有原来的位置overflow:visible|hidden|auto|scroll;溢出隐藏

单行文字溢出省略号显示

/* 1、先强制一行内显示文本 */
white-space: nowrap;
/* 2、超出的部分隐藏 */
overflow: hidden;
/* 3、文字用省略号替代超出的部分 */
text-overflow: ellipsis;

多行文字溢出省略号显示（兼容性有问题）

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

精灵图使用

background:url();
background-position:-100px -100px;

字体图标

下载字体图标：
https://icomoon.io/
https://www.iconfont.cn/把下载包里面的fonts文件夹放入页面根目录下字体图标引入
@font-face {font-family: 'icomoon';src:  url('fonts/icomoon.eot?w6grul');src:  url('fonts/icomoon.eot?w6grul#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?w6grul') format('truetype'),url('fonts/icomoon.woff?w6grul') format('woff'),url('fonts/icomoon.svg?w6grul#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}使用
去下载文件中的demo.html复制小框框
并在其样式中使用font-family: 'icomoon';即可

CSS三角做法

width:0;
height:0;
line-height:0;
font-size:0;
border:50px solid transparent;
border-left-color:skyblue;

界面样式

鼠标样式
cursor:default|pointer（小手）|move（移动）|text（文本）|not-allowed（禁止）;取消表单的轮廓线
outline:none;防止拖拽文本域
resize:none;设置行内元素或者行内块元素垂直对齐方式
vertical-align:baseling|top|middle|bottom;

解決图片底部默认空白缝隙问题

给图片添加vertical-align:top|middle|bottom;
把图片转换为块级元素display:block;

Bootstrap前端开发框架

中文官网：https://www.bootcss.com/
官网：http://getbootstrap.com/
推荐使用：https://v3.bootcss.com/

资源

1.codepen：http://codepen.io/
2.jsrun：http://jsrun.net
3、html5tricks：http://www.html5tricks.com/
4、Enjoy CSS：http://enjoycss.com/
5、frontendrescue：https://uptodate.frontendrescue.org/RunJS：http://runjs.cn/
CodePlayerh：ttp://thecodeplayer.com/
实验楼-web：https://www.shiyanlou.com/courses/
CSS-tricks：https://css-tricks.com/
Dribbble：https://dribbble.com/