菜单

css常见问题

2018年11月15日 - Bootstrap

 这周上了Bootstrap框架、flatUl框架还有快切框架,框架很好的简化了我们程序员的代码量,同时也得于咱重增长应用曾写好之各种css和js样式,能简单、快速、解决兼容性问题让我们发出重多精力放在web前端开发上;

bootstrap首先提供了一个搭架子框架,叫
960栅格式manbetx2.0手机版布局,其布局格式如下:
    1. 12列划分
        1. 每个栅格栏左右茶余饭后10px;
        2. 每个栅格60px;
        2. 列跟列次距离20px;
        3. 可用部分940px;
    2. 16列划分
        1. 每个栅格间隙10;
        2. 每个栅格40px;
    3. 24列划分
        1. 横列占5px;
        2. 每个栅格30px;
        3. 可用部分950px;
    4. 我们采取之响应式布局用的凡xs

CSS+DIV是网站正式(或称“WEB标准”)中常用之术语之一,通常为证明和HTML网页设计语言中之表格(table)定位法的分别,因为XHTML网站设计标准中,不再采取表格定位技术,而是使用css
div的方贯彻各种定位。应用使用DIV+CSS编码时老轻易犯一些左。本文列举了片周边的荒唐:

bootstrap还给我们提供了扳平多元之零部件,排版、代码、按钮、图片、表格、表单、标题、导航条、分页、标签等等,让我们好不用写大量代码,优化我们时刻分配。
flatul框架是依据bootstrap一个框架,提供了更助长的图标与对应组件
快切框架是境内顶尖web前端工程师开发同暂缓框架,该框架在某些地方更加靠近于我们国内开发者的惯及需,潜力十分酷。

  1. 自我批评CSS是否科学

 

  检查一下有管拼写错误、是否忘结尾的 } 等。可以用CleanCSS来检查
CSS的拼写错误。CleanCSS本是吗CSS减肥的工具(css压缩),但也能检查有拼写错误。

css优先级

  1. 规定错误产生的岗位

1. 内嵌>内联=外联(内联和外联依靠顺序来判定)
3. 选择器关系:id>元素>类选择器>
4. 性能选择器>类选择器

  假如错误影响了总体布局,则可逐个去div块,直到删除某个div块后出示恢复正常,即可确定错误有的职务。

   依据CSS权重值(4栽)来判定优先级
    
    1. 称谓选择器   a  b  c  d
    2. 内嵌   1  0  0  0
    3. id选择器  0  1  0  0
    4. 类选择器  0  0  1  0
    5. 属性、伪类   0  0  1  0
    6. 伪元素 、元素 0  0  0  1
    7. 没干的所有值全部为0
    8. 留意:让所有权重值失效的指令:!important
    

  1. 采用border属性确定出错元素的布局特性

  使用float属性布局一不小心就会见错。这时也素添加border属性确定因素边界,错误原因就是水落石出(也为弯产生,了解什么打消css浮动)。

  1. float元素的父元素不可知指定clear属性

  MacIE下要针对float的要素的父元素使用clear属性,四周的float元素布局就见面混杂。这是MacIE的名的bug,倘若不知底即便会走弯路。

  1. float元素务必指定width属性

  很多浏览器在亮不指定width的float元素时见面时有发生bug。所以不管float元素的情节如何,一定要是吧其指定width属性。

  另外指定元素时尽量用em而休是px做单位。

  1. float元素不能够指定margin和padding等性能

  IE在显示指定了margin和padding的float元素时有bug。因此不用对float元素指定margin和padding属性(可以以float元素内部嵌套一个div来安装margin和padding)。也得以应用hack方法为IE指定非凡的值。

  1. float元素的肥瘦之与如小于100%

  假如float元素的大幅度的同刚是100%,某些古老的浏览器将未克健康显示。因此请求保管宽度的同小于99%。

  1. 是否重设了默认的体?

  某些性能如margin、padding等,不同浏览器会发出两样的说。因此最好好于开发前先是以不折不扣的margin、padding设置为0、css列表样式设置也none等。

  1. 是不是忘了描写DTD-DOCTYPE声明?

  假如无论什么调不同浏览器显示结果还是不同等,那么好检查一下页面开头是休是忘了写下面这行DTD:

相关文章

标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图