构架CSS基础样式库

作者: 前端知识  发布:2019-09-14

打印 print.css

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

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

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

1、如何调试 IE 浏览器

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

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标签的样式
  • 修复拖动元素添加拖动的光标

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

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

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

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

字体图标 iconfont.css

iconfont都已经很熟悉了,是一种把图标放入自定义字体中,然后使用字体图标来替代普通图标的技术,使用起来方便灵活。iconfont.css包含内容以及调整部分 •提供网页中66个最常用的字体图标 •可搭配form.css`按钮组件使用 金沙澳门官网网址 1

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

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

什么是基础库

我认为基础样式库 始终 能帮我们解决开发时遇到的一些基础性问题:

  • 如浏览器样式不统一,需要重置样式;
  • 如基础表单样式过于难看不易操作,需要优化其样式;
  • 如布局样式需要重复编写,需要一套稳定复用的解决方案;
  • 如一些样式的浮动,对齐操作,需要统一管理起来进行多次复用;
  • 如常见的CSS动画效果,需要统一起来管理方便复用;
  • 如一些常用的图标,需要一套可复用的字体图标;
  • 如需要打印,提供一套更为合理的打印样式

基础库初衷和未来方向:

  • 最大程度减少开发难度
  • 提供简洁高效开发体验
  • 趋于模块化样式构建规范
  • 做为未来UI组件库核心基础
  • 始终站在巨人肩上

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中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异,并且你可以更容易地进行自己的测试。

为什么要做基础库

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

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

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

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

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

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

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

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="fn-text-ellipsis">文字那是相当的长</div>

1
<!-- 文字溢出显示省略号 --> <div class="fn-text-ellipsis">文字那是相当的长</div>

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有效还对判断句里的所有代码都生效。

后续的扩展

CSS基础样式库只是前端解决方案中最小的一个分支,其实我们还可以完善更多的内容来帮助解决前端开发中所有的问题,就犹如下面这个表格。

分层

结构层 表示层

行为层

html css

js

基础库

normal/grid/utils/scss扩展/

jquery/base/seajs/

组件

元件/静态组件

ui组件/业务组件

模块

html/css/js(基础库 组件)

后续会持续跟进完善内容,致力于让前端开发变得更简单,高效,稳定,也让我们的工作生活变的像Koala一样,每天拥有18个小时的睡眠时间~

至此《关于CSS Reset 那些事》的系列文章已经完结了,感谢大家关注Alsiso,后续也会以这种方式来分享学习成果与方法。

  • 关于CSS Reset 那些事(一)之 历史演变与Normalize.css
  • 关于CSS Reset 那些事(二)之 Normalize.css 源码解读
  • 关于CSS Reset 那些事(三)之 Normalize-zh.css 出炉

    1 赞 1 收藏 评论

金沙澳门官网网址 2

使用示例

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

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

使用示例

<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>

前言


先来回顾一下前几章节,我们都说了哪些内容:

  1. CSS Reset 历史 与 Normalize.css 介绍
  2. Normalize.css 源码解读
  3. Normalize-zh.css 出炉

围绕着CSS Reset这个话题我们已将讲了3章节,从中了解到CSS Reset的作用,Normalize.css的优势,以及它是如何帮我修复跨浏览器的兼容性问题的;

这一章节内容会弱化CSS Reset的主题,不是因为这章节与CSS Reset无关了,而是因为我们要基于它去扩展更多的内容,来帮助我们解决实际开发中更多的问题。

现在回到我们这一章节的标题,将它做下补充:

《关于CSS Reset 那些事(四)之 基于CSS Reset 构架CSS基础样式库》

动画库 animate.css

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

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

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

样式重置方案 normal.css

Normalize.css不仅统一了样式,还保留元素的可辨识性,这是我们应该继承和发扬的优点,normal.css也会参考借鉴Normalize.css所有优势,不过为了让其更简洁,让开发者更容易上手,我选择对它进行瘦身,比如移除一些不会用到的元素标签hgroup,将一些元素进行分模块管理,比如html5.cssform.css等,方便按需求灵活引用。

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

  • 字体约定62.5%,方便单位转换
  • 统一元素的内外边距
  • 设置全局字体,修复表单元素不继承父级font的问题
  • 添加链接基本样式
  • 移除列表元素的默认标识
  • 移除元素默认边框
  • 移除链接默认的下划线
  • 移除单元格间距让其边重合
  • 修复th不继承text-align,默认左对齐
  • 重置标题,采用自定义
  • 把所有斜体标签默认扶正
  • 统一引用标记
  • 统一上标和下标

本文由金沙澳门官网发布于前端知识,转载请注明出处:构架CSS基础样式库

关键词: 金沙澳门官网

上一篇:网页字体设置你了解吗
下一篇:没有了