随笔分类 -  css随笔

解决弹性盒子模型容器因为文字大小而被撑开
摘要：解决方法就是在 flex item 中加上 width:0,让宽度由 box-flex 属性来分配 阅读全文

posted @ 2018-03-22 20:35 世界，太精彩 阅读(1661) 评论(0) 推荐(0)

iscroll
摘要：用JS有效解决移动w用JS有效解决移动web浏览器中HTML元素的overflow:sceb浏览器中HTML元素的overflow:scroll滚动属性失效问题 iscroll4webhtml5mobilejavascript web移动平台前端UI开发工作，兼容问题超多，今儿又遇到一个。产品方要求 阅读全文

posted @ 2017-10-31 14:54 世界，太精彩 阅读(193) 评论(0) 推荐(0)

sass中的循环判断条件语句
摘要：@if $lte7:true !default;//是否兼容ie6,7 //inline-block //ie6-7 *display: inline;*zoom:1; @mixin inline-block { display: inline-block; @if $lte7 { *display 阅读全文

posted @ 2017-09-27 09:59 世界，太精彩 阅读(3063) 评论(0) 推荐(0)

左右固定，中间自适应布局
摘要：1、html: left right main css: left,right固定宽度，left左浮动，right右浮动。main: width 100% height 100% padding-left left宽度 padding-right right宽度 阅读全文

posted @ 2017-07-28 16:43 世界，太精彩 阅读(160) 评论(0) 推荐(0)

背景透明，文字不透明的兼容性写法
摘要：背景透明，文字不透明 背景透明，文字不透明 阅读全文

posted @ 2017-07-28 16:01 世界，太精彩 阅读(213) 评论(0) 推荐(0)

css中使用变量
摘要：2017年3月，微软宣布 Edge 浏览器将支持 CSS 变量。这个重要的 CSS 新功能，所有主要浏览器已经都支持了。 声明css变量的时候，变量名前面要加两根连词线（--）。变量名大小写敏感，--header-color和--Header-Color是两个不同变量。 var()函数用于读取变量。 阅读全文

posted @ 2017-07-28 15:14 世界，太精彩 阅读(11511) 评论(2) 推荐(0)

CSS 中的 initial、inherit、unset、revert
摘要：在css中，initial（初始）、inherit（继承）、unset（未设置）、revert（还原）这四个关键字可以应用于所有的CSS属性。 initial - 初始默认值。IE不支持 inherit - 继承直接父元素的对应属性值。IE7-不支持 unset - 表示如果该属性默认可继承，则值为 阅读全文

posted @ 2017-07-28 15:08 世界，太精彩 阅读(367) 评论(0) 推荐(0)

stylus选中hover元素的兄弟元素下的子元素
摘要：stylus设置兄弟元素样式：鼠标浮动在 .video-li 元素上时，.video-li 兄弟中 .video-info 下的 .word 显示。 设置 h1 兄弟元素中，class 为 p1 的元素样式： 阅读全文

posted @ 2017-07-28 15:03 世界，太精彩 阅读(3489) 评论(0) 推荐(0)

positio:absolute与position:relative的区别
摘要：absolute 能让元素 inline-block 化：例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度。 float 可以 inline-block 化元素 float 的破坏性：使高度塌陷absolute 的破坏性： 阅读全文

posted @ 2017-07-28 14:56 世界，太精彩 阅读(520) 评论(0) 推荐(0)

改变input光标颜色与输入字体颜色不同
摘要：设置input css: 阅读全文

posted @ 2017-07-18 18:27 世界，太精彩 阅读(5719) 评论(0) 推荐(0)

多行文本溢出显示省略号
摘要：overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 阅读全文

posted @ 2017-07-05 16:11 世界，太精彩 阅读(135) 评论(0) 推荐(0)

设置input的placeholder样式
摘要：自定义input默认placeholder样式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 input::input-placeholder { color: #fb4747; } input::-w 阅读全文

posted @ 2017-04-21 12:07 世界，太精彩 阅读(2496) 评论(0) 推荐(0)

input[type="button"]与<button>的区别
摘要：<button>标签 浏览器支持 所有主流浏览器都支持<button>标签。 重要事项：如果在HTML表单中使用button元素，不同的浏览器会提交不同的值。IE将提交<button>与<button/>之间的文本，而其他浏览器将提交value属性的内容。请在HTML表单中使用input元素来创建按 阅读全文

posted @ 2017-04-20 15:28 世界，太精彩 阅读(2980) 评论(0) 推荐(0)

分页功能
摘要：1.项目中使用的分页 html: .pagess { margin: 20px auto; text-align: center;} .clearfix { zoom: 1;} .pagess a { display: inline-block; height: 28px; border: 1px 阅读全文

posted @ 2017-04-20 11:53 世界，太精彩

css 弹性盒兼容性写法，直接复制粘贴
摘要：弹性布局各种坑爹兼容 当然也看到过遇到flexbox布局的属性将所有的新的老的前缀都加上的，这样省事啊 谁闲着没事整天研究那几个属性的兼容，更可况前端发展这么快说不定有更牛逼的样式出现 但是想在移动端用好这个布局摸透这个属性 我还是一个个都探究下吧，在此先说下各浏览器PC端最新版本情况目前：IE最新 阅读全文

posted @ 2017-04-20 11:40 世界，太精彩

弹性盒兼容性
摘要：display:box/flexbox/flex 先看这个定义弹性布局盒子 附上兼容图 还是比较直观对此属性做兼容只需如下 定义子元素排列 目前有两种新的写法flex-direction和旧的写法box-orient+box-direction， 新写法flex-direction的兼容 旧写法bo 阅读全文

posted @ 2017-04-20 11:03 世界，太精彩 阅读(4735) 评论(0) 推荐(0)

实现图片垂直水平居中（不压缩图片）
摘要：img { width: auto; height: auto; max-width: 100%; max-height: 100%; display: block; vertical-align: middle; position: absolute; left: 0; top: 0; right 阅读全文

posted @ 2017-04-20 10:56 世界，太精彩

实现左右布局的表单验证，每一行内容高度不一定
只有注册用户登录后才能阅读该文。

posted @ 2017-04-20 10:50 世界，太精彩