整理一下CSS最容易躺枪的二十规则,大家能躺中几条?

更新日期: 2017-11-13 阅读: 3.7k 标签: css

整理一下css最容易躺枪的二十规则,大家能躺中几条?


转载:api中文网

  

一、float:left/right 或者 position: absolute 后还写上 display:block?


二、认为布局就是 Float,所有的地方都是 Float,全家都是 Float!


三、认为 px 是一个绝对单位(px 是相对单位)整个页面都是 px,全家都是 px;


四、查看源码,满屏都是 div 的就不多说了吧……;


五、段落不会用 P 只会用 br 和 div;


六、多 class 症(病入膏肓的表现就是几乎每个元素上都有不止一个 class);


七、情绪化命名:.sb、#sb_box 、lj.png;


八、人民币符号:¥少一横.


九、给非定位元素定义了z-index堆叠级别;


十、不用h1、h2等标题标签,这是经常被忽略的html标签使用的语义性,标题用h1..h6是有层次的,而且对页面的抓取也有很大的影响,大家多注意吧;


十一、从一开始写页面就用一个长长的css reset把所有的浏览器默认样式统统干掉了;


十二、反正css就那么点东西,布局的时候不是position,就是float。可是你告诉我为毛在移动端你也不用css3;


十三、闭合浮动的时候,都是先定义好一个.clear样式,然后加空div;


十四、p标签包含div;


十五、不会用或乱用 B / I / S / U 之类在 html5 中重新定义过的标签;


十六、真的在address标签里写家庭住址信息或者其他地址信息;


十七、完全把main, section, article, aside等当成div来用了;


十八、搞不拎清 PNG 的分类,认为 PNG24 支持透明,不知道 PNG8 也支持 α 透明;


十九、混淆 INPUT 的 disabled 属性和 readonly 属性;


二十、为了让 Chrome 这个脑残支持小于12px 的文字,在 html 设置 -webkit-text-size-adjust:none;


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/100

相关推荐

css完美解决网页在iphoneX的头部刘海显示问题

css完美解决iphonX白条,网站扩展到整个屏幕,CSS Shapes中有个CSS属性名为shape-outside实现元素滚动自动环绕iPhone X刘海

HTML/CSS中的空格处理_如何保留页面中的空格

在html中内容中的多个空格一般会被视为一个,连续的多个空格符被自动合并了,同时内容前后的空格也会被清除。HTML空格保留的方式、CSS空格保留的方式。

css自动省略号...,通过css实现单行、多行文本溢出显示省略号

网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示。

css中 出现height为100%失效的原因及解决方案

我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用。这是由于:%是一个相对父元素计算得来的高度,要想使他有效,我们需要设置父元素的height。

工作中常用且容易遗忘的css样式整理,建议收藏

单行文本的溢出显示省略号(一定要有宽度),中英文自动换行,设置placeholder的字体样式,不固定高宽 div 垂直居中的方法,IOS 页面滑动卡顿,设置滚动条样式

深入理解letter-spacing,word-spacing的对比区别

word-spacing 属性增加或减少单词间的空白(即字间隔)。 letter-spacing 属性增加或减少字符间的空白(字符间距)。

你知道我们平时在CSS中写的%都是相对于谁吗?

编写CSS的时候,经常会用到百分比赋值(%)实现自适应。像我们最常使用的流式布局设计模式,基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题

CSS3 clip-path 用法介绍

clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。

css禁止选中文本_兼容实现禁用选择功能

有时候,我们需要使页面内容不可选择。首先想到的是一个css属性:user-select。user-select有两个值:none:用户不能选择文本 ,text:用户可以选择文本

CSS 解析原理_你知道浏览器CSS是如何解析吗?

作为前端,我们每天都在与CSS打交道,那么CSS的原理是什么呢? 浏览器渲染过程分为了两条主线:其一,HTML Parser 生成的 DOM 树;其二,CSS Parser 生成的 Style Rules ;

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!