前端CSS公用样式与一些解决方案

前端开发需要几个浏览器 软件前端开发思维导图 关于前端开发需要的主要技能

html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; }//这些样式大家应该都明白这样是把原先的选择器自带的外填充和内填充去掉归0,[color=Red]也许有人还在用“*”通配符,但是这样是有缺点的会让代码变得冗余,尤其是子父级嵌套关系越深越麻烦,建议大家要尽量减少使用[/color],建议多使用通用样式,可能选择器还比较少,但是我日常用到的选择器就这么些,如果大家有用到 pre fieldset blockquote 等选择器可以写到里面。

img { border: 0 none; vertical-align: top; } //img 图片标签的样式,目的都是一个让浏览器里默认图片是没有边框的,还有ie6里图片底部出现的空白间隔消失掉。有的爱用 display:block; border: none;但是这样写的话,都会有这样或那样的缺点,display: block; 这样写的话 你要让图片左右居中于一个盒子内的时候 你怎么办? margin: auto; 这样吗?但是你要让外面的盒子有一个实际的宽度,如果是换成 vertival-align: top; 或是 vertival-align: middle; 的话那么这个实际的宽度就不必写了,只用加一个 text-align: center; 图片也不用加外填充了。至于 border: 0 none; 这里要写 0 再加一个 none,只是因为在写文本框 input 的时候,发现在不同的 windows 系统外观下,光写border:none或是border:0; 都不行,文本框的边框还是在的,所以就必须写 border: 0 none; 如果只用在img上还是可以写成 border: none; 但是写 input 的时候,要边框没有的时候还是要写 border: 0 none;
ul, li { list-style-type: none; }//这个容易理解,就是去掉ul,li的默认样式,就是前面自带的一些圆点、小方块之类的小修饰,当然可以自己自定义小图片修饰,也可以留着。

button { cursor: pointer; }//button 这个按钮的鼠标触发属性是默认的箭头,在用户体验上不是特别好,所以把鼠标触发的属性改成了小手。
i, em, cite { font-style: normal; }//可有可无,个人习惯,装饰的标签时有时会用到这些选择器 由于他们都有文字的默认属性,所以去掉了,在用到的时候不至于出问题。
body { background: #fff; color: #363636; line-height: 1.2; }//body 写背景色 是因为有的 windows 系统外观会把浏览器背景色也改成别的色,所以为了不会问题,就加上背景白色了,然后再加上文字颜色,字体大小和字体前面已经写了。

a:focus { outline: none; }//点击链接时出现的虚线框消失,就是消除焦点。

//着重说明一下.clear里的 !important 问题
因为我们在写子级盒子浮动的时候 肯定会写到 float: left; margin或是 padding,还有 width 等等,在 .clear的属性里把尽可能会发生冲突的属性加了!important,浏览器就会把这些属性的优先级排到最前,并且ie6也是支持读取!important的,ie6浏览器只要读到相同的属性,以最后的属性为优先级,但是他是对于在同一样式内的,而不是同一样式内的属性他就不会以最后的属性为优先了

互联网前端开发面试提问 前端开发需要做 前端开发软件前十

» 本文来自:前端开发者 » 《前端CSS公用样式与一些解决方案》
» 本文链接地址:https://www.rokub.com/5572.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!