CSS截断文字技巧
在响应式设计中，经常需要将文字截断，例如一个两列水平排列的列表，通常不希望li的内容换行，当视图尺寸过小时内容就会被挤到第二行，常用的截断方法为： li { white-space: nowrap; overflow: hidden; } 该方法有一个问题，经常会遇到最后一个文字被截断一半，很难看。 …
CSS清除点击元素移动端蓝色边框
表单元素和超链接获得焦点时会呈现出难看的边框，可以通过CSS样式清除： *:focus { outline: none; } 然而今天要说的是移动端点击元素出现蓝色边框，不论什么元素，只要点击就会有蓝色边框。 清除方法： * { -webkit-tap-highlight-color: transparent; } …
pre标签内容溢出父容器
<pre>标签可定义预格式化的文本，被包围在pre元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。 通常在包含一段代码时，我们会用到<pre>标签，与<code>标签的区别是<pre>是块级的，而<code>是行内元素。 …
box-sizing解决自适应布局容器宽度问题
在使用box-sizing属性前先要了解一下盒模型： 标准盒模型：内容宽度不包含内边距、边框、外边距 IE盒模型：内容宽度包含内边距、边框，但不包含外边距。 box-sizing属性的值： content-box，默认值，遵从标准盒模型； border-box，使用IE盒模型； inherit，继承父元素的box-sizing属性值； 早期的IE盒模型为border-box，但W3C的专家们认为内容宽度不应该包含内边距和边框，所以在CSS2.1中盒模型的默认值为content-box。实践证明盒模型为border-box更容易布局，例如： …