当前位置:Gxlcms > html代码 > 重构不完全教程集之一_html/css_WEB-ITnose

重构不完全教程集之一_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:67人阅读

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

html标签

  • HTML5 标签列表
  • All HTML5 Tags

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

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

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

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

盒模型

box-sizing详解

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

  • border-box表示设置的 width/height 包括 padding 和 border
  • content-box表示不包括 padding 和 border
  • 不论是border-box还是content-box都不包括margin

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

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

选择器

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

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

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

  • 深入解析CSS样式层叠权重值
  • CSS 选择器

重置

css重置分为归零重置及纠正重置

  • 归零重置的代表为: Eric Meyer’s “Reset CSS” 2.0
  • 纠正重置代表为: normalize.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),一类是灵活的(如实现一个左边栏固定的布局,可以使用的技术就多了)。相对来说可灵活使用的则更需要掌握各种实现方案的利弊

  • MDN CSS reference
  • codrops CSS reference
  • css 101

单位

css3新增了rem单位及vw系列单位。rem单位是以html的字体大小为相对计算的,而vw则是以视窗大小的

  • rem详解
  • vw

居中

包括水平及垂直居中,除了常规的水平居中 text-algin:center 、 margin-left:auto;margin-right:auto 和垂直居中 vertical-align:middle , line-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 来调整

  • Centering in CSS: A Complete Guide
  • object-fit

布局

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

  • Learn CSS Layout ,中文版 学习css布局 。一步步学习布局,适合入门
  • 深入了解flex
  • flex完全指南:三大版本对比
  • 960网格布局 :网格布局的开创者,知道原理其余的各种网格布局也就没问题了
  • layout gala :强烈推荐,float布局精髓

z-index

  • The stacking context ,影响z-index的因素
  • 深入理解CSS中的层叠上下文和层叠顺序
  • The Z-Index CSS Property: A Comprehensive Look ,文章比较老,涉及到ie7-的一些z-index bug

line-height

  • 深入理解CSS中的行高 ——简版
  • 深入理解css 行高 ——ppt详细版
  • css行高line-height的一些深入理解及应用

BFC

  • MDN BFC ,新建BFC的条件
  • Understanding Block Formatting Contexts in CSS ,中文版 理解CSS中的块级格式化上下文
  • 关于Block Formatting Context--BFC和IE的hasLayout
  • css 101: BFC
  • 重提CSS中外边距折叠问题

兼容

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

人气教程排行