随笔分类 - css
摘要：今天发现一个比较有意思的属性，appearance:none 可能有朋友不认识，但是有一个标签你肯定认识：select。 这个标签的样式是这样的： 一般情况下，我们所使用的border:0; 去除边框这种方式在某些浏览器是对它是不起作用的，比如:Opera 浏览器下就没有作用。 再拿google浏览
阅读全文
摘要：/* 参考了 normalize.css 以及借鉴了日常开发中常用到的一些设置，目标是尽可能不对浏览器样式做大的修改，确保在任何环境下都尽量好用。 */ *,*::before,*::after{ box-sizing: border-box;/* 修改默认盒模型 */ -webkit-text-size-adjust: 100%;/* IOS 横屏时默认字体为140%；旋转...
阅读全文
摘要：计算过程 1.W3C文档选择器权重的计算。 文档指出： A selector’s specificity is calculated for a given element as follows: count the number of ID selectors in the selector (=
阅读全文
摘要：只要兼容现代浏览器如 webkit、firefox、opera等浏览器，对于伪元素采用双冒号的写法，要是非要兼容IE浏览器，用CSS2的单冒号写法比较安全。 首先，阅读 w3c 对两者的定义： CSS 伪类用于向某些选择器添加特殊的效果。 CSS 伪元素用于将特殊的效果添加到某些选择器。 可以明确两
阅读全文
摘要：方法一： 关键样式： ① 父元素（这里是div）设置和高度一致的 line-height （这里是200px） 由后面的vertical-align定义看，这是为了设置div的基线 ② 子元素 (这里是span) 设置合适的line-height，并设置display:inline-block、ve
阅读全文
摘要：SCSS其实就是SASS新语法, 增强了对CSS3语法的支持 1.变量（Variables） 2.嵌套(Nesting) // 选择器的嵌套 // 属性嵌套 3.Mixins ==> Mixins是SASS中最强大的特性之一, 简单点来说，Mixins可以将一部分样式抽出，作为单独定义的模块，被很多
阅读全文
摘要：Ruby的安装 如果是Window系统，请打开：http://rubyinstaller.org/downloads/ ，下载当前稳定版本的exe文件。界面如下所示： Step(2): 接下来，在系统上运行来安装Ruby。 Step(3): 接下来，添加Ruby的bin文件夹到PATH用户变量和系统
阅读全文
摘要：width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: transparent transparent transparent #007bff;
阅读全文
摘要：设置为position:static即可
阅读全文
摘要：flexbox的核心是自适应动态变化的弹性布局 伸缩布局盒模型和术语 主轴main axis:Flex容器的主轴主要用来配置Flex项目。注意，它不一定是水平，这主要取决于flex-direction属性。main-start | main-end:Flex项目的配置从容器的主轴起点边开始，往主轴终
阅读全文
摘要：3D transform中有下面这三个方法： rotateX( angle ) rotateY( angle ) rotateZ( angle ) 邹凯的体操单杠运动是rotateX: 蔡依林姐姐的钢管舞是rotateY: 旋转飞刀的特技表演是rotateZ: 2.perspective属性,透视点
阅读全文
摘要：强制不换行 div{ white-space:nowrap; //强制在同一行内显示所有文本，直到文本结束或者遭遇 <br> 对象} 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{ word-break:bre
阅读全文
摘要：1.Times New Roman字体 Windows系统中的字体是Monotype公司为微软公司制作的Times New Roman PS（TrueType字体），视窗系统从3.1版本开始就一直附带这个字体。而在苹果电脑公司的麦金塔系统中使用的是Linotype公司的 Times Roman (在
阅读全文
摘要：1.overflow：hidden在IE6,IE7下无效，解决办法：添加position:relative 2.IE7下有li有间隙，解决：vertical-align: bottom; ——
阅读全文
摘要：一.语法box-shadow:inset x-offset y-offset blur-radius sperad-radius colorbos-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色PS:可以使用一个或多个投影，如果使用多个投影时必须需要用逗号...
阅读全文
摘要：meta标签 标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。1.Keywords (关键字) 为搜索引擎提供的关键字列表各关键词间用英文逗号“,”隔开。2.descriptio...
阅读全文
摘要：一.animation属性 1.animation-name:@keyframes后面跟着的名称. 2.animation-duration:动画周期持续时间。单位秒s或毫秒ms 3.animation-timing-funtion:定义动画播放的曲线方式，默认为ease;可选:|linear|ea
阅读全文
