一、CSS分类方法： 公共型样式 特殊型样式 皮肤型样式 并以此顺序引用 1 2 3 二、CSS命名规则 使用类选择器，放弃ID选择器 NEC特殊字符："-"连字符 分类的命名方法...三、代码格式 选择器、属性和值都使用小写 最后一个值也以分号结尾 省略值为0时的单位 使用单引号 根据属性的重要性按顺序书写 显示属性、自身属性、文本属性和其他修饰 四、优化 如果CSS可以做到，就不要使用
你会发现原来还有这么多，被你忽略而且好用的功能。 接下来就让我们一起见识见识它的更多用法。 介绍 首先我们先来看看 MDN 上对 content是如何描述的。...CSS 的 content属性用于在元素的 ::before和 ::after伪元素中插入内容。使用 content属性插入的内容都是匿名的可替换元素。...先来看看什么叫计数器： 本质上 CSS 计数器是由 CSS 维护的变量，这些变量可能根据 CSS 规则增加以跟踪使用次数。...style> .page-list { counter-reset: counter; } .page-list p:before { padding: 2px 8px; border: 1px..."; } 参考： 《css世界》 Using CSS counters
3、1px边框问题 产生的原因： 因为一个东西--DPR(DevicePixelRatio)称设备像素比，是一个手机物理像素 /CSS像素的比值。...但是自从retina屏以来，不同的手机有不同的像素密度，css中的1px并不等于移动设备中的1px， 最直接的表现就是1px边框问题；简单说就是你给border的css写个1px，到手机上却变粗了显示成...很多文章的解决办法都是用postcss-write-svg这个插件来处理这个问题，其实不太好用额，网上搜了下，觉得这篇文章讲的比较ok，其中比较推荐使用伪元素来解决这个问题：-->移动端1px解决方案。...商城mall项目中默认使用vant组件库，所以可以使用vant团队提供的1px边框解决方案。...参考链接： 移动端1px解决方案 vue-cli css相关 normalize.css
每天晚上18:00准时推送 翻译：疯狂的技术宅 原文：https://jakearchibald.com/2018/third-party-css-is-not-safe/ 前一段时间，有很多关于用CSS...第三方CSS ? CSS的作用更接近于脚本而不是图像。和脚本一样，它适用于整个页面。 它可以： 删除/添加/修改页面内容。 根据页面内容发出请求。 对许多用户交互作出响应。...CSS不能修改原始存储，你不能用CSS写一个挖矿程序（也有可能，或许我还不知道），但恶意CSS仍然可以造成很大的破坏。 键盘记录器 咱们从最开始的那个问题开始 ?...此外，还有许多基于CSS的攻击： 消失的内容 ?...所有这些都可以被CSS选择器设为目标，并且可以把结果发到某个服务器上。 监控互动 ? 可以将hover和active等动作发送回服务器。 适当的使用CSS，你可以很好地了解用户想要干什么。
前言：GitHub：https://github.com/Ewall1106/mall 一、关于reset.css 因为不同的浏览器默认的样式不同，所以在着手项目开始前，我们需要引入reset.css...我这里推荐一个下载reset.css的网站：https://cssreset.com/，里面还有一些normalize.css之类的，大家有兴趣可以研究。...二、关于1px边框问题 因为自从retina屏以来，不同的手机又不同的像素密度，css中的1px并不等于移动设备中的1px， 最直接的表现就是1px边框问题；简单说就是你给border的css写个1px...所以在项目中我们引入一个border.css解决这个问题。 三、项目中引入 1、新建styles文件夹 把reset.css和border.css粘贴到此： ?...reset.css 2、main.js中引入 ? main.js 3、配置路径 我觉得'.
前言 在CSS魔法堂：改变单选框颜色就这么吹毛求疵！...中我们要模拟原生单选框通过Tab键获得焦点的效果，这里涉及到一个常常被忽略的属性——outline，由于之前对其印象确实有些模糊，于是本文打算对其进行稍微深入的研究^_^ Spec是这样描述它的 作用...真心没法弄出圆角 自从有了border-radius后，我们就可以通过CSS制作圆角矩形、圆形等图形，甚至连box-shadow也受到border-radius影响从而实现元素阴影也能做到圆角的效果。...: 50%; outline: solid 1px red; } ?... .outline{ width: 13px; height: 13px; outline: 1px solid red;
css大家都认为是很简单东西，但是是代码就有让人头疼的时候，只是多少的问题，伴着小编走过的路，在前端多少也滚了一些坑，今天为了方便后来者，把收集到的东西跟大家分享一下，有需要的朋友可以当作参考，希望对各位盟友有帮助...： 一. css 2.x code 1....省略号： .ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} 二. css 3 code 1....-1px 0 #f1f1f1;text-shadow:1px 1px 0px #630;}filter:progid:DXImageTransform.Microsoft.gradient(enabled...9A background-image:-ms-linear-gradient(top, #fff, #ddd); ie10渐变 http://www.iefans.net/ie10-yulanban-css3
CSS定位介绍 层叠上下文 z-index -曾老湿, 江湖人称曾老大。 ---- -多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。...---- CSS定位介绍 ---- 布局和定位的区别 布局是屏幕平面上的，定位是垂直于屏幕的。 还得从文档流和盒模型说起。   *{box-sizing: border-box;} .container{ border: 1px...hover span{ display: inline-block; }  4.fixed：固定定位，定位基准是viewport 使用场景：烦人的广告 和 返回顶部按钮   5.sticky：粘滞定位...position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素； 3.position 值为 fixed（固定定位）或 sticky（粘滞定位
如何使div带有边框 边框虚线样式：dashed 边框实现样式：solid border:1px dashed #000 /* 代表设置对象边框宽度为1px黑色虚线边框*/ border:1px...solid #000 代表设置对象边框宽度为1px黑色实现边框 id唯一的原因 如果只是用来定义样式的话可以！...请注意， 除非指定 truespeed 值，否则将忽略任何小于 60 的值，并改为使用 60。 truespeed：默认情况下，会忽略小于60的scrolldelay值。...如果存在truespeed，那些值不会被忽略。 vspace,hspace：表示运动区域边界的水平距离和垂直距离，以像素或百分比值设置垂直边距。...样式上添加属性opacity：0-5；（0.1-0.9的时候会半透明） CSS伪类（http://www.w3school.com.cn/css/css_pseudo_classes.asp） a:
Facebook: CSS in JS http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html 比较变态的想法，干脆直接不要用...container: { fontSize: '13px', backgroundColor: 'rgb(233, 234, 237)', border: '1px...solid #cdced0', borderRadius: 2, boxShadow: '0 1px 1px rgba(0, 0, 0, 0.05)', padding...font-size: 14px; cursor: default; padding-left: 10px; -webkit-user-select: none; } /** 太长忽略...font-size: 14px; cursor: default; padding-left: 10px; -webkit-user-select: none; } /** 太长忽略
不过其他取值几乎用不上，可以直接忽略。 border-color border-color属性用于定义边框的颜色，取值可以是“关键字”或“16进制RGB值”。...简写方式 在css中可以使用简写方式： border:1px solid red; 等价于： border-width:1px; border-style:solid; border-color:red...列表项符号：list-style-type 在css中，不管是有序列表还是无序列表，都使用list-style-type来定义列表项符号。...针对ul的属性取值： 属性值 说明 disc 实心圈●（默认值） circle 空心圆○ square 正方形■ 去除列表项符号 在css中，也是使用list-style-type属性去除有序列表或无序列表的列表项符号...语法：list-style-type:none; 当对多个不同元素定义了相同的css样式时，我们可以使用群组选择器来去除列表项符号，在群组选择器中，元素之间用英文逗号隔开！
对于现代浏览器来说，css中指定的width就是content width。 对于IE5.x和6来说，在怪异模式中width等于content、左右padding和左右border。...（CSS2.1 新增的值） none 此元素不会被显示。 list-item 此元素会作为列表显示。...没有定位，元素出现在正常的流中 （忽略 top, bottom, left, right 或者 z-index 声明）。...那么父元素中没有内容撑开其高度，这样父元素的height就会被忽略。...可以通过**@supports**来判断是否支持某个css属性。
前言 上篇文章主要讲述了CSS样式更改中的背景Background，这篇文章我们来谈谈文本Content内容的基础用法。...文本闪烁 7).文本空白符的处理 pre-line 合并空白符序列，但是保留换行符 normal 忽略空白符...1px 1px red'> 11).字符换行 normal 只在允许的断字点换行 break-word 在长单词、...1px red'> 14).文本换行 normal 只在允许的换行点进行换行。...浏览器只在行中没有其它有效换行点时进行换行 参考文档：W3C官方文档（CSS篇） 二、总结 这篇文章主要介绍了CSS样式更改篇中的文本Content基本设置，希望让大家对CSS样式更改有个简单的认识和了解
当元素的position属性设置为sticky时则开启了元素的粘滞定位 粘滞定位和相对定位的特点基本一致， 不同的是粘滞定位可以在元素到达某个位置时将其固定 body{ height: 3000px; } /*...- 当元素的position属性设置为sticky时则开启了元素的粘滞定位 - 粘滞定位和相对定位的特点基本一致，...-- 创建导航条的结构 --> HTML/CSS .../css/reset.css"> /* 设置图片的容器 */ .img-list{ width: 590px;
static static属性是HTML元素的默认值，即没有定位，遵循正常的文档流对象，对于top、bottom、left、right、z-index属性的设置都被忽略。...static div{ border: 1px solid #eee; }...fixed div{ border: 1px solid #eee; }...sticky div{ border: 1px solid #eee; }.../css-positioning.html https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow
width=device-width, initial-scale=1.0"> Document /* 此处为基本的展示样式，可以忽略不看...width=device-width, initial-scale=1.0"> Document /* 此处为基本的展示样式，可以忽略不看...在上述动图中可以很清晰地看到，每次加载的一段内容后，上一段内容的最后一个内容块儿底部是没有下划线的，这就非常得不友好了 接下来就来介绍一个css小技巧来解决上述问题的尴尬 解决方案 这里可以用到css的...width=device-width, initial-scale=1.0"> Document /* 此处为基本的展示样式，可以忽略不看...总结 简单总结一下本文介绍的css小技巧有什么「优点」： 使得项目代码更加简洁 不会像传统的处理方法那样有多余的类名 能适应动态改变的元素 希望这个小技巧对你们有所帮助，如果还有别的更巧妙的方法，可以评论告诉我哈
"width=device-width, initial-scale=1.0"> Documenttitle> /* 此处为基本的展示样式，可以忽略不看...width=device-width, initial-scale=1.0"> Documenttitle> /* 此处为基本的展示样式，可以忽略不看...body> html> 我们来看看容器向下滚动后会出现什么情况： 在上述动图中可以很清晰地看到，每次加载的一段内容后，上一段内容的最后一个内容块儿底部是没有下划线的，这就非常得不友好了 接下来就来介绍一个css...小技巧来解决上述问题的尴尬 解决方案 这里可以用到css的**「兄弟选择器」**，即 element1 + element2，其表示的是选择 element1 之后的处于同一层级的所有 element2...width=device-width, initial-scale=1.0"> Documenttitle> /* 此处为基本的展示样式，可以忽略不看
图片.png 当鼠标聚焦时输入框变色 css相关,鼠标点击输入域后出现有颜色的边框 原理：css伪类之input输入框鼠标点击边框变色效果 伪类元素的使用：:focus 一：当输入框获得焦点时...: 50px auto; width: 400px;} .inp { width: 200px; height: 30px; } .inp:focus { outline:none; border: 1px..."> .focusInput {border:1px solid #99CC33;} function focusInput... .look {background:#e6e6e6;border:1px...输入框怎么使其后面的button也变色 以摩拜单车为例，参考链接：http://www.w3school.com.cn/jquery/event_focus.asp 本专题记录平时项目中一些最基础简单的实现代码和容易忽略的细节
css重构之旅 >前言： 今年我大一,马上就要大二了。从高三毕业暑假到大学的这一年马上过去，马上迎来大二生活.学习前端也有将近一年了。...一昧去追求那些视觉的效果和相对高端和新颖的技术，反而忽略了最基础的布局技巧。 回味 2017年3月，百格教育的手机端网站，是我接到的第一个公司外包的项目。...因为在解决问题和bug的过程中，是你进步最快的过程（我觉得没有之一，一） 时隔三个月 时隔三个月，今天5月29号，这次我跟主任合作，我觉得我学到了很多很多，也意识到了自己的问题， 一昧去追求那些视觉的效果，反而忽略了最基础的布局技巧...{ width:50%; border:1px solid #81cfa2 ; float:left; } #header_right { width:49%; border:1px.../div> 重构布局 移动端重构页面布局8大方法：http://www.divcss5.com/html5/h20001.shtml 昨天晚上读了张鑫旭的CSS
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
