1.清除元素默认间隙方式：
设置float清除样式 *{ margin:0; padding:0 }2.在使用hr做分割线时，考虑是否可以用border写或使用div添加高度
3.auto的使用：
div{ width: 500px; height: 500px; border: 1px solid red; background-color:#77cedb; margin-left:auto;/* 左边自动填充，div靠右放置 */ }margin:0 auto;与margin-left:auto;margin-right:auto;作用相同
4.从左向右排列的元素的上下有间距，img、input...
5.外边距重叠问题
问题描述：相邻的两个元素之间的上下边距会产生重叠，以较大的值为准。
6.margin塌陷问题
解决办法：a.给父元素添加上内边框或上内边距 b.给父元素添加overflow:hidden;
7.去掉input框在不同浏览器中的样式
border:none;或border:0;/* 去掉输入边框 */
outline:none;/* 去掉轮廓线 */
8.三角形css写法:
div { width: 0px; height: 0px; border: 10px solid transparent; border-left-color: yellowgreen; }9.表格细线
table{ border-collapse:collapse; border-spacing:0;/* 与cellspacing作用相同 */ }10.文本溢出
overflow:hidden;/* 超出部分隐藏 */ overflow:scroll;/* 不论内容多少，始终会有滚动条（横竖轴都有） */ overflow:hidden;/* 只有内容超过容器才会出现滚动条 */11.清除浮动
目的：为了解决子元素浮动引起父元素高度为0的问题。
a.额外标签法，是W3C推荐的做法，通过在浮动元素的末尾添加一个空标签，例如<div style="clear:both;"></div>。注意，清除浮动的这个元素不能被设置为浮动。
b.overflow:hidden;(作用太多，一般不用)
c.使用after伪元素清除浮动
.clearfix::after { content: ""; clear: both; display: block; height: 0; visibility: hidden; } .clearfix{ *zoom: 1; }d.使用after，before双伪元素清除浮动
.clearfix::before,.clearfix::after{ content: ""; display: table; } .clearfix::after{ clear: both; } .clearfix{ *zoom: 1; /* 触发IE */ }12.瀑布流效果
13.设置浮动，相当于隐式转换为行内块元素（但不包含行内块的默认间距）
14.
<pre>预格式,比如写古诗</pre> <code>代码</code> <sub>下标</sub> <sup>上标</sup>15.特殊表示字符
© ©版权符号 ¥¥人民币16.white-space
white-space:pre; /* 保留格式，不会换行 */ white-space: pre-wrap; /* 保留格式，超出内容自动换行 */ white-space: pre-line; /* 保留格式，删除空格符 */ white-space: nowrap; /* 不会换行，直至遇到<br/>换行 */17.设置单行文本超出部分隐藏显示省略号
white-space: nowrap; text-overflow: ellipsis; /* 单行文本显示省略号 */ overflow: hidden; /* 超出文本隐藏 */18.设置多行文本显示超出部分隐藏显示为省略号
<div> <p>笑着流泪，还会说是太感动了吗?哭着煽情还会被触动吗?拙劣的表演，加上完美的包装，就是谢幕的掌声吗?空无一人的孤单，会是一个少年的，韬光养晦吗?笑着流泪，还会说是太感动了吗?哭着煽情还会被触动吗?拙劣的表演，加上完美的包装，就是谢幕的掌声吗?空无 一人的孤单，会是一个少年的，韬光养晦吗?笑着流泪，还会说是太感动了吗?哭着煽情还会被触动吗?拙劣的表演，加上完美的包装，就是谢幕的掌声吗?<nobr>空无一人的孤单，会是一个少年的，韬光养晦吗?笑着流泪，还会说是太感动了吗?哭着煽情还会被触动吗?拙劣的表演，加上完美的包装，就是谢幕的掌声吗?空无一人的孤单，会是一个少年的，韬光养晦吗?</nobr></p> </div> p{ width: 250px; height: 250px; margin: 0 auto; border:10px solid red; /* 多行文本显示隐藏 */ overflow: hidden; text-overflow: ellipsis; }19.元素的分类
行内块元素不能转行内元素，行内块元素包含默认间距（使用float:left;或display:block;消除）
20.display:table;与display:block;的区别
display:block:元素高度为内容高度，宽度占据父元素整行。（还可以让隐藏元素显示）
display:table;内容大小即表格大小
21.实现垂直居中
display:table-cell;/* 转换成单元格显示 */ vertical-align: middle;/* css属性 */表格居中方式
<table align="center" valign="middle"></table> align="center" 实现表格水平居中 valign="middle" 实现内容垂直居中22.定位（定位模式和边偏移）
定位模式：静态定位static、相对定位relative、绝对定位absolute、固定定位fixed
相对定位relative：相对于自身原来的位置进行定位 不脱标（占有原来的位置）
绝对定位absolute：相对于父元素（relative，absolute、fixed）定位 脱标
如果父元素没有定位，就往上找 ，相对于有定位的祖先元素进行定位；如果父元素有定位，就相对于父元素进行定位
固定定位fixed：相对于浏览器窗口进行定位 脱标
边偏移：left、right、bottom、top
定位常用用法：子绝父相
23.z-index
正整数、负整数、0（默认值） 只有含相对定位、绝对定位、固定定位的元素才有此属性
注意：不要带单位
24.粘性定位
position:sticky; (脱标，不占有原来的位置)
25.锚点链接
26.透明写法
opacity: 0.5;/* 取值范围0-1 */ opacity: .5; background-color: rgba(255,0,0,0.5);区别：opacity会使内容和背景都会变透明；background-color背景色透明，不会影响内容
兼容IE写法：
filter:alpha(opacity=value);/* value取值范围为1-100 */27.<markquee></markquee>
behavior属性值有scroll(滚动)、alternate(晃动)direction属性值：left、right、up、down <marquee behavior="scroll" direction="" scrollamount="20">nashenmezhenjiuni</marquee>28.隐藏-->显示
display:none;-->display:block;
opacity:0;-->opacity:1;
visibility:hidden;
29.实现水平垂直居中
.box{ left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; width: 200px; height: 200px; position: absolute; } .box{ left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 200px; height: 200px; position: absolute }30.精灵图=图片整合=雪碧图（sprite）
作用：减少页面请求，减轻服务器压力，提升页面响应速度
31.宽高自适应的概念和使用
body默认是只有高度，没有宽度
设置元素百分比：a. html,body{height:100%;}
b.height:auto; /* 和不写高度一样的 由内容撑开 */
注意：在页面使用百分比写时，不要用line-height；设置距顶部高度使用position:relative;top:百分比;
32.一屏页面
在页面使用百分比时，不要用line-height；
设置距顶部高度使用position:relative;top:百分比。
当页面使用百分比控制时，浏览器最小字体大小为12px。
padding可使用百分比
转载于:https://www.cnblogs.com/glmkeep/p/11351356.html
相关资源：传智播客-PHP基础视频_html css js笔记