CSS - 随笔分类(第2页) - 半夏微澜ぺ

input type=file

摘要：如果想使用浏览器原生特性实现文件上传(如图片)效果，父级的form元素有个东西不能丢，就是： enctype="multipart/form-data" enctype属性规定在发送到服务器之前应该如何对表单数据进行编码，默认的编码是：”application/x-www-form-urlencod 阅读全文

posted @ 2017-01-18 11:19 半夏微澜ぺ阅读(237) 评论(0) 推荐(0)

css层叠上下文和层叠顺序

摘要：普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在当前层叠上下文元素中才有意义。诸位千万不要把层叠水平和CSS的z-index属性混为一谈。没错，某些情况下z-index确实可以影响层叠水平，但是，只限于定位元素以及flex盒子的孩子元素；而层叠水平所有的元素都存在。什么是层叠顺阅读全文

posted @ 2017-01-18 10:33 半夏微澜ぺ阅读(260) 评论(0) 推荐(0)

图片加载背景色块问题

摘要：就是CSS的加载和背景图片的加载不是同步的，尤其首次加载的时候，图片是异步的，具有明显的延迟，于是，我们会看到非常丑陋的色块在一瞬间出现了；页面渲染流程如下，1. CSS加载；2. 对应DOM渲染，背景色出现；3.拉取DOM样式对应背景图片。图片在异步加载的（图片有北背景颜色）：一开始时候宽阅读全文

posted @ 2017-01-13 16:29 半夏微澜ぺ阅读(1093) 评论(0) 推荐(0)

box-shadow 模拟border

摘要：border会占据空间;如果想加边框效果，但是又不占用空间，可以使用box-shadow来模拟 demo div 100*100 border：10px solid red; 可以写： div 100*100 box-shadow：0 0 10px solid red; 加圆角 box-radius 阅读全文

posted @ 2017-01-13 10:38 半夏微澜ぺ阅读(1068) 评论(0) 推荐(0)

zoom和transform scale

摘要：一、zoom zoom的字面意思是“变焦”，摄影的时候常用到的一个概念。对于web上的zoom效果，你也可以按照此概念理解。可以改变页面上元素的尺寸，属于真实尺寸。在旧的web时代。*zoom: 1可以给IE6/IE7浏览器增加haslayout, 用来清除浮动，修复一些布局上的疑难杂症等。其支阅读全文

posted @ 2017-01-10 17:04 半夏微澜ぺ阅读(427) 评论(0) 推荐(0)

中英文两端对齐实现

摘要：text-align:justify; 这个属性是针对英文设计的，现在在谷歌个火狐中对中文也支持，就是ie不支持在ie中需要再加上一个属性 text-justify:distribute;//只有 IE支持 text-justify 属性。阅读全文

posted @ 2017-01-10 15:42 半夏微澜ぺ阅读(533) 评论(0) 推荐(0)

word-break word-wrap

摘要：work-break：break-all CJK超出的部分自动换行 word-wrap：break-word CJK如果有分隔符，当前分隔符之后与下一个分隔符之间的内容不能在这一行全部显示的话，在当前风分隔符之后的内容就换行阅读全文

posted @ 2017-01-10 15:06 半夏微澜ぺ阅读(157) 评论(0) 推荐(0)

去除inline-block的间隙

摘要：产生间隙的原因就是标签之间的空格，去除的方法： 1 设置父元素的font-size：0;空格字符的宽高都为0, 2 inline-block元素在一行上，不换行 3 inline-block元素换行，但是上一个标签的结束标签与下一个标签的开始标签在一行上或者 4 在上一个标签的结束标签和下一个标签阅读全文

posted @ 2016-12-20 09:37 半夏微澜ぺ阅读(214) 评论(0) 推荐(0)

css line-height

摘要：“行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离 1 实现单行文字垂直居中设置box的inline-height值为box的height值，网上一直说设置inline-height值与height之相等，其实去掉height值也是可以的 2 实现div中行数不固定的文字的垂直阅读全文

posted @ 2016-12-15 14:51 半夏微澜ぺ阅读(324) 评论(0) 推荐(0)

vertical-align 和line-height 以及baseline的解析

摘要：line-height是相对于font-size来计算的，vertical-align的百分比值是相对于line-height来计算的，vertical-align的默认是baseline; demo： font-size:14px; line-height:1.5; line-height的值其实阅读全文

posted @ 2016-12-15 10:49 半夏微澜ぺ阅读(837) 评论(0) 推荐(0)

direction

摘要：基本上，大家只要关心下面这两个属性值就好了： direction: ltr; // 默认值 direction: rtl; 其中，ltr是初始值，表示left-to-right，就是从左往右的意思，再具体描述下，就是内联内容是从左往右依次排布的，我们平时网页的处理都是这样的，比方说前后两个图片，默认阅读全文

posted @ 2016-12-13 10:54 半夏微澜ぺ阅读(441) 评论(0) 推荐(1)

writing-mode属性

摘要：writing-mode属性最初只是ie中的属性，只有ie支持，现在在css3中谷歌，火狐也开始支持。所以使用的时候就需要记住两套不同的语法，ie的私有属性和css3的规范属性如果只需要兼容到ie8+就可以只使用css3的规范属性就可以了 css3： html html writing-mod 阅读全文

posted @ 2016-12-13 10:31 半夏微澜ぺ阅读(6622) 评论(0) 推荐(1)

css画三角的原理

摘要：当我们设置一个div其width与height为100px，并且设置其四边框的宽度为100px，且分别设置其颜色后，我们可以看到如下的一张图片此时如果设置这个div的height为0的话，其他不变，会得到下面这个图形下面把其宽度也设置为0后，得到如下的一张图片删除border-bottom 设阅读全文

posted @ 2016-12-07 09:58 半夏微澜ぺ阅读(300) 评论(0) 推荐(0)

让ie支持css3的一些htc文件

摘要：1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js)这个玩意估计是试图让IE支持CSS3属性的鼻祖，还算蛮强大，就是性能开销较大，要解析很多文件脚本，给DOM添加大量的元素以及ClassName。 2. Aaron Gustafson的 eCSStender此方法支持阅读全文

posted @ 2016-12-06 14:35 半夏微澜ぺ阅读(663) 评论(0) 推荐(0)

ie7 ie8 使用border模拟圆

摘要：border-radius 属性ie8+才支持，ie7 ie8 下的圆角就可以使用border进行模拟；（移动端都支持）我们平常使用border-style一般都是solid实线，其他常用的还有dashed以及dotted，我们这里的主角就是dotted点，在IE浏览器下，dotted点是被渲染成阅读全文

posted @ 2016-12-06 11:46 半夏微澜ぺ阅读(940) 评论(0) 推荐(0)

label标签的可访问性

摘要：与表单元素关联的方法（IE6下label标签包裹控件的方法是不顶用的）： 1 使用for和id关联控件 <p><label for="test">标签</label> <input name="input" type="text" id="test" /></p>（一个控件可以支持多个label）阅读全文

posted @ 2016-12-05 18:32 半夏微澜ぺ阅读(180) 评论(0) 推荐(0)

css 选择器中的正则表达式

摘要：正则表达式在任何语言中都有使用，只是使用的形式不一样而已 css也是一门语言，也有自己的正则表达式正则表达式中的一些通用规则： 1 ^ 表示字符串开始位置匹配 2 $表示字符串结束为止匹配 3 *表示字符串任意位置匹配 4 i表示字符串匹配不区分大小写 5 g 表示字符串全局匹配 css属性选择器阅读全文

posted @ 2016-12-05 16:07 半夏微澜ぺ阅读(9295) 评论(0) 推荐(0)

css原生变量 var

摘要：css 变量的支持情况：在pc端支持还不错，ie不支持，移动端也不支持，大概这就是css变量没有广泛使用的原因吧 CSS预编译工具Sass/Less/Stylus的便捷之处就是可以定义变量，方便代码的维护，其实css也有自己原生的变量var：命名方式：--* (以--开头，*代表变量名称) 变量阅读全文

posted @ 2016-12-02 17:51 半夏微澜ぺ阅读(1971) 评论(0) 推荐(0)

iconMoon---小图标小记

摘要：IcoMoon 是一个免费的图标库。可以下载自己需要的图标三、使用流程、操作演示进入主页，点击下图所示区域开始：每个图标你都是可以自己进行标记的（移上去会看到Edit, 点击之），然后—— 注：编辑框下面的Download会下载该图标svg格式的zip文件, Replace按钮则是上面新生成一阅读全文

posted @ 2016-11-30 16:26 半夏微澜ぺ阅读(2719) 评论(0) 推荐(0)

@font-face 用fontsquirrel把ttf文件获取别的文件格式

摘要：@font-face是css3的一个模块，但是@font-face这个功能早在IE4就支持了，他主要是把自己定义的Web字体嵌入到你的网页中，兼容浏览器取值说明 1、YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font 阅读全文

posted @ 2016-11-28 16:23 半夏微澜ぺ阅读(420) 评论(0) 推荐(0)

随笔分类 - CSS