重构不完全教程集之一

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载

“无上甚深微妙法,百千万劫难遭遇,我今见闻得受持,愿解如来真实义。” ——《开经偈》

html标签

ie8- 不支持html5新增标签,可通过引入js来实现:html5shiv

<!--[if lt IE 9]>
    <script src="http://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<![endif]-->

或按实际使用手写js兼容,document.createElement

<!--[if lt IE 9]>
<script type="text/javascript">
   document.createElement('header');
   ...
</script>
<![endif]-->

最后重置下html5标签的css默认样式:

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

css入门

盒模型

box-sizing详解

盒模型可通过box-sizing: border-box | content-box设置,默认值为content-box,ie8+支持。

  • border-box表示设置的width/height包括paddingborder
  • content-box表示不包括paddingborder
  • 不论是border-box还是content-box都不包括margin
  • outline不影响盒子大小

对应上图,如果是默认的话,则width为605px,如是border-box的话则为605+24+103+30=673px。

常配合百分比单位使用,尤其应用在移动端。如width:100%;padding:10px;,如果不设置为border-box,则实际宽度为100%+40px,不符合我们的预期要求。

选择器

css的选择器是从后往前查询,所以层级越深,效率越低,一般建议最多不超过4层。

css选择器包括:通配符*选择器,class选择器,id选择器,元素选择器,属性选择器,伪类选择器,伪元素选择器,最后

css选择器权重原则:!important > 行内样式 > id > 类/属性/伪类 > 元素/伪元素;权重相同的按照样式表中出现的顺序,后面的覆盖前面的

重置

浏览器都有自己的默认样式,各个浏览器的默认样式可参考:浏览器默认样式参考指南

所以为了消除浏览器的默认样式,以达到各个浏览器一致表现就出现了css重置,总得来说css重置分为归零重置及纠正重置

如果你想省事的话直接引入normalize.css,然后再进行部分归零重置;如果深入研究可以把两个揉合一起,可参考sandal reset

属性详解

属性大概分为下面几类:

  • 显示:display,visibility,overflow等
  • 位置:position,float,clear,z-index,transform等
  • 大小:width,height,margin,padding,border,outline,box-sizing等
  • 文字: font系列,color,text系列等
  • 背景:background系列,gradient系列等
  • 修饰:border-radius,box-shadow,opacity,appearance,filter,clip等
  • 布局:flex,grid等
  • 动画:transition,animation等

从使用上大概分为两类,一类是死板的(如设置文本颜色只能用color),一类是灵活的(如实现一个左边栏固定的布局,可以使用的技术就多了)。相对来说可灵活使用的则更需要掌握各种实现方案的利弊

单位

  • px:绝对单位,
  • em:相对单位,相对于最近父级元素的font-size
  • %:相对单位(padding/margin的百分比单位以width为基准)
  • rem:相对单位,相对于根元素html的font-size,css3新增
  • vw、vh、vmin、vmax:相对单位,相对于视窗宽/高,css3新增
  • rem详解
  • vw

居中

包括水平及垂直居中,除了常规的水平居中text-algin:centermargin-left:auto;margin-right:auto和垂直居中vertical-align:middleline-height: height(单行文字垂直的line-height等于height),还有postition方法,首先设置top:50%;left:50%,再通过margin-left:-width/2;margin-top:-height/2,或css3的transform: translate(-50%, -50%)调整居中,最后还有为布局而生的flex方法。另:对于img或video还有最新的object-position来调整

布局

在flex出现之前,布局不外乎float,position,还有少量的inline-block及table;而现在有了flex和grid,更是如虎添翼。

z-index

line-height

BFC

CSS3 学习

兼容

浏览器兼容分为两部分:浏览器是否支持;如何针对浏览器写hack。支持情况可以通过can i use查询,而针对各种浏览器写hack可以使用browser hacks

注:该系列将会汇总在github上的重构优秀教程合集

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端资源

利用CSS设置图片黑白/灰色效果

为了形成对比,我把图片引入两次,其中一个添加了一个class g ,用来给它设置样式。

13500
来自专栏前端资源

原生JavaScript获取元素的margin外边距

最近想找一个可以获取元素高度(包括外边距margin)的方法,原生JS的实现方法一直没有找到,不过有一个方法可以获取元素的边距,记录一下:

17500
来自专栏前端资源

各大网站CSS初始化代码集合

我们可以借鉴各大网站是初始化代码,写一个适合自己的 reset.css 文件,可以大大提高工作效率,减少不必要的麻烦。

9200
来自专栏前端资源

常见文件的mine type类型及获取方法

前面提到Kangle 服务器添加 mine type 文件类型,但是网上给出的文件类型难免没有那我全面,往往我们正需要的网上却没有。

8400
来自专栏前端资源

li、img等元素设置inline-block后的空白间距问题

关于使用 inline-block 来代替 float 的讨论也挺多的,最常见的就是使用 inline-block 来代替 float 进行布局。

8500
来自专栏前端资源

input placeholder属性的样式修改

有时需要修改placeholder的文字颜色,需要用使用 input::-webkit-input-placeholder 选中,然后进行样式设置

6400
来自专栏前端资源

利用正则批量清理Teleport Ultra/Pro冗余代码

Teleport 是一款非常优秀的网站离线浏览工具(即网站整站下载工具),但该软件下载的网页文件里会包含大量冗余代码(如:tppabs),手动去修改工作量很大。

10200
来自专栏前端资源

CSS选择器 低版本IE浏览器的兼容

CSS 后代选择器很好用,让我们的工作变的更方便。但是 IE8 及以下对很多后代选择器并不兼容。

5900
来自专栏前端资源

解决老版本IE不兼容rgba的问题

rgba 的含义,r 代表 red ,g 代表 green ,b 代表 blue ,红绿蓝是三原色。所有颜色都可以由这三种颜色拼合而成。a 代表透明度。

6800
来自专栏前端资源

IE版本判断代码 if IE 6

在项目中,经常会遇到IE浏览器的兼容问题,IE678简直是前端工程师的噩梦,每个版本的IE浏览器都会有比较大的差异。

7400

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励