I1326的博客

超出部分隐藏 不显示…不截取今日做个搜索热词的需求，设计强制要求热词关键词不得超出搜索框宽度并切不可切割不可设置省略号；先看成品样式；这里实际热词还有直接设置overflow的话超出的部分会被直接截掉，肯定是不可以的；添加text-overflow: ellipsis又会出现省略号，样式上好像也不太行；由于这里后台抓取的热词长度、数量都不固定，一时不知道怎么处理，甚至有想过拿js过一遍筛子；在懒惰的驱使下，很明显最优解是直接把热词截取后展示的三个省略号隐藏掉；直接为热词的父级设置字体

前两天于某公司面试，曾被问道什么是BFC能不能解释一下，有关样式表的东西我一直认为没啥所以基本上没看过，一直凭着印象以为是盒模型之类的问题，长篇大论之后啪啪打脸，根本驴唇不对马嘴；之后虽然面试通过了，但是这玩意不搞清楚还是有点如鲠在喉的意思。这种概念性问题，虽然各路blog一大堆,但是为了避免其他人理解后的再加工干扰，直接祭出MDN； 块格式化上下文—MDN首先，BFC拼全了是Block Formatting Context，块格式化上下文，也不知怎的就想起了块级作用域（大误）是Web页面的可

flex这个东西项目中用的不少，使了好几年了也，不知道有没有人想我一样，就记得大概属性名，值完全靠补全的，记不住用哪个就直接上chrome点开调试工具挨个看；或者直接开着阮一峰的flex布局博文参照着用。虽然阮一峰老师写的确实简明清晰，但是求人不如求己，今天索性吧所有的flex属性整理一下，自己敲个demo加强下记忆。什么是Flex布局flex布局（2012）前身不知道是不是box布局（2009）；从布局的方式上来看基本上是一致的。传统的布局方式依赖于float\position\margin;flex

css动画在项目中使用频繁，取代了flash或者动态图片的使用，以及更加出色的页面交互表现能力；绘制一个css的动画效果主要使用transition和animation;transition属性属性描述transition简写，用于在一个属性中设置四个过渡属性transition-property规定应用过渡的css属性名称transition-duration定义过渡效果花费的时间，默认是0transition-timing-function规定过渡效果时

css的2D3D变换2d变换transform通过css3转换，我们能够对元素进行移动、缩放、拉长或拉伸2D转换方法：translate（）偏移rotate()旋转scale（）缩放skew（）斜拉matrix（）矩阵translate（）偏移元素从其当前位置移动，根据给定的left（x坐标）和top（y坐标）.class{ transform:translate(60px,80px);}将class的元素移动到x轴60px,y轴80px处。单独定义偏移：translate

Css3拾遗对页面样式进行设置，要实现一对一或者一对多的控制，就要通过选择器进行匹配的操作。在这之前简单记录下css的书写顺序和一般规范；css书写顺序位置（position，top，right、z-index\display\float）大小（width、height、padding、margin）文字（font、line-height、letter-spaacingcolor-text-align）背景（background、border）其他（animation，transition）