快捷搜索:
来自 新京葡娱乐场网址 2019-09-12 04:43 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

【新京葡娱乐场网址】构架CSS基础样式库

栅格系统 grid.css

借鉴了Bootstrap的一套响应式流式栅格布局系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

对栅格系统的样式命名进行重新组织,简化和移除工具代码,只保留核心布局样式。

简洁即是高效率。

grid.css包含内容以

  • .ui-grid-container(固定宽度)和.ui-grid-fluid(100%宽度)用于包裹.ui-row
  • .ui-grid-container(固定宽度)通过媒体查询来实现响应式宽度
  • .ui-row用于包裹一组.ui-col-1.ui-col-12
  • xs,sm,lg通过媒体查询来实现响应式
  • .ui-col-xs-* 超小屏幕 手机 (<768px)
  • .ui-col-sm-* 小屏幕 平板 (≥768px)
  • .ui-col-* (默认)中等屏幕 桌面显示器 (≥992px)
  • .ui-col-lg-* 大屏幕 大桌面显示器 (≥1200px)
  • 支持列嵌套,必须包裹在.ui-row行中
  • 简化代码,不支持列偏移,列排序

5、reset.css和normalize.css分别是做什么的?为什么推荐使用nomalize.css?

reset.css:是将所有的浏览器的自带样式重置掉,这样更易于保持各浏览器渲染的一致性。
normalize.css:它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的样式。
nomalize.css的优势:

  1. Normalize.css 保护了有价值的默认值
    Reset通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果。相比之下,Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时,Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
  2. Normalize.css 修复了浏览器的bug
    它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点,Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
  3. Normalize.css 不会让你的调试工具变的杂乱
    使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链,如下图所示。在Normalize.css中就不会有这样的问题,因为在我们的准则中对多选择器的使用时非常谨慎的,我们仅会有目的地对目标元素设置样式。
  4. Normalize.css 是模块化的
    这个项目已经被拆分为多个相关却又独立的部分,这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分(比如表单的一般化)。
  5. Normalize.css 拥有详细的文档
    Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异,并且你可以更容易地进行自己的测试。

项目地址

通过对以往开发中遇到问题的总结,以及对CSS基础库的需求进一步细化,当我们明确的知道需要什么了以后,从参考业内最优秀的CSS框架,到提取出能够解决我们实际问题的代码;从以往的开发经验中整理出最高效复用的方案,再到一次次的“取之精华去之糟粕”; 最终这篇文章有了产出:

项目名称:Koala – 更简洁高效的基础样式库 项目版本:alpha(内部测试与学习参考使用) 项目地址: 项目交流:New issue

欢迎大家Fork代码,提出问题与意见,一起进行学习交流 ~

最后再说明一点:当前版本并不是正式生产版,所以还不能完全应用到项目中,目前仅供学习参考使用,部分的细节完善和优化还在进行中,如果你有意见和问题,欢迎随时联系:chyi722到163.com

3、列举几种 浏览器兼容问题

display:inline-block;
对块级元素设置这个属性的时候,IE67是不支持的,需要如下语句:
*display:inline;
*zoom:1;

opacity:0.8;常用CSS3属性调节透明度,这个不被IE8以下支持。所以需要:
filter: "alpha(opacity=60)"; /* IE 8 /
filter: alpha(opacity=60); /
IE 4-7 */
zoom: 1;

<min-height>在IE7以下不兼容,需要给其固定宽度。

Box-sizing在IE67不支持。

使用示例

<div class="animated fadeIn"> 淡入效果 </div

1
2
3
<div class="animated fadeIn">
    淡入效果
</div

4、针对兼容、多浏览器覆盖有什么看法?渐进增强优雅降级是什么意思?

一般来讲,如果有超过一定百分比的人数使用某个浏览器,我们在设计页面时候就要考虑到此浏览器的兼容问题。主要就是IE678,火狐和谷歌浏览器。先尽量写代码,如果月到一些问题可以用审查工具去看具体哪有问题,配合CANIUSE的网站查询兼容情况,再酌情进行修改。

渐进增强:是指在渲染的时候先以低版本的基础页面为主,保证基本功能,之后再针对高版本浏览器中的功能属性渲染,改进等。

优雅降级:与上者刚好相反,是指直接渲染网站所有功能,再对低版本的浏览器进行兼容。

动画库 animate.css

CSS3的动画让网页变的更加有活力,所以这里引入一套CSS3动画库,可以通过简单的引用类名的方式在你的项目中实现最常见的动画效果。

animate.css 包含内容以及调整部分

  • 弹跳
  • 闪烁
  • 摇动
  • 淡入 (up,down,left,righ)
  • 淡出
  • 滑入 (up,down,left,righ)
  • 滑出

6、IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用?

IE盒模型的宽度是:
宽度(width)=边框(border) 内边距(padding) 内容宽度(content)
标准盒模型的宽度是:实际内容的宽度。
IE678下使用标准盒模型在文档声明里写上<doctype>即可。
这是一个CSS3属性<box-sizing:border-box>的作用是固定盒模型的宽度,使得padding无法将盒模型撑开,也是就使用IE盒模型。

打印 print.css

可以优化打印出的网页更适合浏览,并且加快打印速度,节省打印机耗材。

print.css 包含内容以及调整部分

  • 修复打印时的背景和文字颜色
  • 删除所有的阴影效果
  • 标注超链接,并显示URL链接

1、如何调试 IE 浏览器

高版本的IE(7以上)存在开发者工具,可以直接使用调试。
可以安装虚拟机再安装不同版本的IE去调试
在CSS中使用border: 1px solid red;和outline:1px solid red;显示盒模型调试
用IETest调试,模拟不同版本的IE浏览器

使用示例

<button type="button" class="ui-btn">默认</button>

1
<button type="button" class="ui-btn">默认</button>

2、什么是CSS hack?在 CSS 和 HTML里如何写 hack?在 CSS 中 ie6、ie7的 hack 方式?

CSS hack:由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
CSS hack一般有3种表现形式CSS内部hack、选择器hack、及HTML头部引用(if IE)hack。
CSS内部hack:主要针对内部hack;比如IE6能识别下划线“”和“”,IE7能识别“”但不能识别下划线,而Firefox两个都不认识。background:#ff0; /* for all browsers /_background:#f00; / for ie6/background:#f0f; /* for ie6~7 /background:#00f9; / for ie6~10 */

选择器hack:比如IE6能识别HTML.class{},IE7能识别 HTML.class{}或者.first-child html.class{}。等等html .class{}/* for IE6 / html .class{}/* for IE7 /:first-child html .class{}/* for IE7 */

HTML头部引用:针对所有IE:<![endif]-->这类hack不仅仅对CSS有效还对判断句里的所有代码都生效。

使用示例

<div class="ui-grid-fluid"> <div class="ui-row"> <div class="ui-col-8">.ui-col-8</div> <div class="ui-col-4">.ui-col-8</div> </div> </div>

1
2
3
4
5
6
7
8
<div class="ui-grid-fluid">
 
<div class="ui-row">
      <div class="ui-col-8">.ui-col-8</div>
      <div class="ui-col-4">.ui-col-8</div>
  </div>
 
</div>

使用示例

<button class="ui-btn"><b class="iconfont">~</b>提交</button>

1
<button class="ui-btn"><b class="iconfont">~</b>提交</button>

辅助工具 utils.css

提供最常用的功能类class,命名使用fn-前缀来进行区别表示,如果在项目中能够灵活复用这些类,那将大大提升开发效率。 utils.css 包含内容以及调整部分

  • 浮动元素与清楚浮动元素

垂直与水平滚动

元素显示类型

元素与文本隐藏

文本不换行

文本强制换行

文本溢出显示省略号

文本左右对齐

文本垂直对齐

常用符号(关闭,箭头,下三角等)

自适应两端对齐

未知高度垂直居中

列表平铺

CSS 基础库的产出


为什么要做基础库

我上一章节的末尾抛出了几个问题:

1.假设你要做一个游戏单页面,网页上并不存在表单内容,那么你就要移除一些冗余的代码,开始自定义Normalize.css样式来满足自己的需求。

2.假设你要做一份文案策划的网页,包含很多文字排版时,此时Normalize.css也许并不完全适合你,因为它的默认字体设置和排版布局可能不能满足你的要求。

3.假设你要做一个企业类型的网站,并考虑跨浏览器兼容性,网站包含内容元素也很丰富,那么你可以选择使用Normalize.css来统一你的浏览器样式,但是它仅仅帮助我们解决了样式统一的问题是不够的,你是不是还要设计一套布局系统,来解决该网站的布局问题呢?

从以上几个问题可以看出,在构建大型网站的时候,我们可以把Normalize.css作为基础样式,然后根据不同的页面需求,进行添加样式覆盖它。

但是这只是我们的第一步,关于网页开发中更多的基础解决方案还有很多,比如刚刚说的布局系统,或许你还会用到很多常用的CSS问题解决方法,如浮动和清除浮动,自适应两端对其等等。

那么下一节,我们就来分析一下CSS 基础库到底包含什么内容?

HTML5元素 html5.css

html5.css主要是用于解决html5新元素在旧浏览器中的不识别,并且修复一些元素存在的隐性问题。

但是为什么不把html5.css这部分内容直接放入normal.css,而是考虑将其进行分模块管理呢? 是为了考虑一部分人在页面中已经使用了像html5shiv的解决方案来兼容低版本浏览器,所以这里就体现出了分模块的灵活性,拆分为一个独立的css文件,需要时再进行使用。

不过这里默认使用@import "html5.css"进行导入只是为了预览调试,请在实际使用中将代码拷贝合并至normal.css,或者使用yuicompressorGrunt进行压缩合并后再使用。

html5.css 包含内容以及调整部分

  • 修复HTML5新元素不能正确显示的问题
  • 修复progress元素的对其问题
  • 修复没有controls属性的audio显示出来
  • 修复hidden属性不起作用的问题
  • 修复svg元素overflow不正常的问题
  • 统一mark标签的样式
  • 修复拖动元素添加拖动的光标

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:【新京葡娱乐场网址】构架CSS基础样式库

关键词: