CSS那些事!这个篇幅是我特意开的,不是因为帮助小菜之类的,而是在多人的团队配合中各种命名冲突的规范让人蛋疼. css这个东西只要不是新的离谱都会写,但是每个人的命名风格,方法,都不同 有人喜欢驼峰,有人觉得-不错,有的人觉得_很方便,最后有的英文命名,有的干脆拼音....囧 http://www.cnblogs.com/LoveOrHate/category/682181.html 然后没有统一的格式,造成的结果...我爆炸了... 当然经常和团队合作的也就不用看了 这些文章我是专门找啊找,找…

一直以来我的CSS 的 class命名都是比较随意,有时采用驼峰式.有时采用下划线,好像没有什么统一的标准,想到什么英文单词就拿过来用,这对于自己瞎写的小项目无伤大雅,遇到冲突的问题可稍加调整改变即可. 今天,我学习并掌握了一种新的class命名规范,觉得它更加科学更加稳健.在此总结. 关注分离 class 的命名要遵循关注分离.松耦合的原则,同时注重易于理解 下面的代码展示了一些简单的 class 命名规范 ```html   ``` css .news {} .news-list {} .n…

css的命名冲突目前有几种解决方法: 1.命名约定 人为的制定一下命名规则以避免冲突,例如前缀,嵌套等 2.CSS in JS 在JavaScript中写CSS,使用工具编译为css,最常见的是styled-components 3.使用编译工具改变css类名 最常见的是CSS Modules 4.HTML5的style scoped 可以部分解决css重名问题,缺陷很多 1. CSS Modules CSS Modules只转换 class 和 id 选择器.在 js 中 styles 就像一…

css 命名冲突 & solution 类似这样,为了解决模块间可能存在的 css 命名冲突问题,需要单独提供给模块开发者一套模块开发环境:同时,文档上要有如何使用的规范说明. CSS 建议: 框架,模块,禁用全局的标签样式: 所有的样式,使用唯一命名的 class 定义: 3 模块的 js 业务逻辑处理时,尽量避免使用 class 选择器,推荐 H5 的自定义属性: ... xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!…

css_scoped 与 css_module 我们知道,简单的class名称容易造成css命名重复,比如你定义一个class: <style> .main { float: left; } </style> 如果别人刚好也定义了一个className:.main,你的float:left就会影响到它. 所以Vue中发明了css_scoped,其原理就是在class名称后加上一个data属性选择器: <style scoped> .main { float: left;…

2.浮动(float) 浮动(float)特点:1.元素会左移.右移,直到触碰到容器为止.    2.设置浮动元素,仍旧处于标准文档流. 3.当元素没有设置宽度值,而设置了浮动属性,元素的宽度随着内容的变化而变化. 4.当元素设置浮动属性后,会对相邻元素产生影响,相邻元素特指紧邻后面元素. 清除浮动的常用方法:1.1.clear属性:常用 claer:both; clear:left; 或者 clear:right; 1.2.同时设置width:100%(或固定宽度)+overflow:hidd…

p.s:这是我在学习中总结出来知识,如有不对,请多包涵.谢谢. CSS样式:行内样式,内部样式,外部样式,他们的优先级是:行内,内部,外部,遵循就近原则. 一.HTML+CSS布局分为三大类,一是流式布局,二是浮动布局,三是绝对定位布局. 1.流式布局 流式布局,如同水经过不同通道,呈现出不一样的方式.流式布局也是如此.流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整,主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上…

1.两个div左边的固定宽度右边的自动填充的css <div id="main" style="width:98%;"> <div id="left" style="float:left;width:200px;border:1px solid red;height:100px;"> </div> <div id="right" style="height…

一.内边框padding和外边框margin属性缩写 内外边框有四个属性:padding-top,padding-right,padding-bottom,padding-left;margin-top,margin-right,margin-bottom,margin-left.将其简写,就是把四个属性合并成一个padding和margin即可. 内外边框根据上右下左的顺时针方向可以罗列以下4种简写方式 property:value1;表示所有边都是一个值value1. property:va…

网上搜索得到: It changes the position because the position is based on the popover's dimansions and select2 changes that. The proper way would be to style select2 (check their documentation) and then change the positionning. If you want a quick fix for pos…