HTML+CSS高级技巧

元素的隐藏方式元素隐藏 1、display:nonea.元素删除掉不在DOM结构中b.不占位置的2、visibility:hiddena.元素并没有删除掉还在DOM结构中b.占位置的3、opacity:0a.元素并没有删除掉还在DOM结构中b.占位置的文字的隐藏换行只能运用于英文 允许拆分单词换行word-break: break-all;在半角空格或连字符处换行word-break: keep-all;overflow属性值hidden:溢出的部分直接隐藏scroll:产生滚动条auto:自适应如果内容溢出产生滚动条如果不溢出没有滚动条单行省略号强制文本在同一行上显示white-space: nowrap;溢出的内容隐藏掉overflow: hidden;添加省略号text-overflow: ellipsis;多行省略号弹性盒子显示display: -webkit-box;让当前弹性盒子中的子元素或者文本内容垂直排列-webkit-box-orient: vertical;在第几行显示省略号-webkit-line-clamp: 5;多余的内容隐藏掉overflow: hidden;高度自适应height: auto;用户界面样式鼠标的光标样式默认的小白cursor: default小手cursor: pointer文本cursor: text移动cursor: move禁用cursor: not-allowed轮廓围绕在表单域标签中的四周的线条起到了突出的作用一般只去掉不设置outlinenone或0防止多行文本框的拖拽resize: none垂直对齐行内块元素左右两侧的行内元素或者文本内容相对于行内块元素的高度对齐top 上 middle 中 bottom下注意是给行内块元素添加vertical-align属性两个相邻的行内块其中一个设置外边距另一个也受影响的原因和解决办法添加 vertical-align:top属性相邻的两个行内块元素之间的默认距离如何解决1、添加浮动2、给父元素添加font-size:0精灵图why精灵图为了减轻服务器的压力提高页面的加载速度what精灵图多张小图拼接在一张大图上通过背景图的位置属性background-position去移动到指定小图位置上水平向右、垂直向下都是正方向背景图往哪个方向移动就是对应的正负值。引入字体图标unicode编码引入字体图标第一步引入自动生成的iconfont.csslink relstylesheet href./font/iconfont.css /第二步挑选相应图标并获取字体编码应用于页面span classiconfont#xe6c2;/spanFont Class引入字体图标第一步引入自动生成的iconfont.csslink relstylesheet href./font/iconfont.css /第二步挑选相应图标并获取类名应用于页面span classiconfont icon-phone/spansymbol引入字体图标第一步引入自动生成的iconfont.csslink relstylesheet href./font/iconfont.css /第二步引入自动生成的iconfont.jsscript src./font//iconfont.js/script第三步挑选相应图标并获取类名应用于页面svg classicon aria-hiddentrue use xlink:href#icon-phone/use /svg