CSS总结

2016.04.21 11:20 bizhongbio 552 10

一、在 HTML 中使用 CSS

查看我之前写过的文章 在 HTML 中使用 CSS

二、CSS 书写规范

  • 位置属性(position,top,right,bottom,left,z-index,display,float 等)
  • 大小(width,height,padding,margin 等)
  • 文字系列(font,line-height,letter-spacing,color,text-align 等)
  • 背景(background,border 等)
  • 其他(animation,transition 等)

三、CSS 盒子模型

css-summary-1

3.1 W3C 的标准 Box Model(标准 W3C 盒子模型)

3.2 IE 传统下 Box Model(IE 盒子模型)

W3C 盒子模型的范围包括 content、padding、border、margin,并且 content 部分不包含其他部分;IE 盒子模型的范围也包括 content、padding、border、margin,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 padding。

四、font-size 单位

常用的有以下几种:

  • px:相对长度单位,相对于显示屏幕分辨率而言(像素单位);
  • em:相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。em 的值并不是固定不变的,em 会继承父级元素的字体大小。例如:body 里设置 font-size: 100%; 则 16px = 1em; 12px = 0.75em; 10px = 0.625em;。body 里设置 font-size: 62.5%; 16px * 62.5% = 10px; 12px = 1.2em; 10px = 1em;;
  • rem:CSS3 相对长度单位,相对于 HTML 根目录(除 IE8 及更早版本外,所有浏览器均已支持 rem)。
  • pt:磅(1pt = 1/72 in),标准印刷上常用的单位,一般用于页面打印排版。

绝对长度单位:in(英寸)、cm(厘米)、mm(毫米)、pt(磅)、pc(12 点活字 1pc = 12 点)。

五、a 伪类

LVHA:a:hover 必须置于 a:link、a:visited 之后才有效,a:active 必须置于 a:hover 之后才有效。

六、CSS Hack

CSS Hack 由于不同厂商的浏览器,比如 IE、Safari、Mozilla Firefox、Chrome 等,或者是同一厂商的浏览器的不同版本,如 IE6/7。对 CSS 的解析认识完全不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的 CSS,让它能够同时兼容不同的浏览器。能在不同的浏览器中也能得到我们想要的页面效果。

CSS Hack 的目的是使 CSS 代码兼容不同的浏览器,利用 CSS Hack 为不同版本的浏览器定制编写不同的 CSS 效果。

CSS Hack 有三种表现形式:CSS 类内部 Hack选择器 HackHTML 条件注释 Hack

6.1 CSS 类内部 Hack(属性前缀法)

例如 IE6 能识别下划线 _ 和星号 *,IE7 能识别星号 *,但不能识别下划线 _,IE6~IE10 都认识 \9,但 Firefox 前述三个都不能认识。

6.2 选择器 Hack(选择器前缀法)

例如 IE6 能识别 *html .class{},IE7 能识别 *+html .class{} 或者 *:first-child + html .class{}。

6.3 HTML 条件注释 Hack(IE 条件注释法)

针对所有 IE:<!––[if IE]><!––代码––><![endif]––>,针对 IE6 及以下版本:<!––[if lt IE 7]><!––代码––><![endif]––> 等等,这类 Hack 不仅对 CSS 生效,对写在判断语句里面的所有代码都会生效。

在标准模式中

  • – 减号是 IE6 专有的 Hack;
  • \9 IE6/IE7/IE8/IE9/IE10 都生效;
  • \0 IE8/IE9/IE10 都生效,是 IE8/9/10 的 Hack;
  • \9\0 只对 IE9/IE10 生效,是 IE9/10 的 Hack;
  • IE7 可以辨别 * 和 !important。

七、BFC 模型(Block Formatting Contexts)

块级格式上下文,一个独立的块级渲染区域,只有 Block-level Box 参与。 浮动元素和绝对定位元素、非块级盒子的块级容器(inline-blocks,table-cells,table-caption)以及 overflow 值不为 visiable 的块级盒子,都会为他们创建新的 BFC(块级格式上下文)。

在 BFC 中,盒子从顶端开始垂直地一个接一个地排列。

浮动元素和绝对定位元素不与其他盒子产生外边距折叠是因为元素会脱离当前的文档流,违反了两个 margin 是邻接的条件的同时,又因为浮动和绝对定位使元素为它的内容创建新的 BFC。

  • 块级元素会扩展到与父元素同宽,所以块级元素会垂直排列
  • 垂直方向上的两个相邻 DIV 的 maigin 会重叠,而水平方向的不会(此规则并不完全正确)
  • 浮动元素会尽量接近往左上方或右上方
  • 为父元素设置 overflow: hidden; 或浮动父元素,则会包含浮动元素

八、margin 边界叠加问题

边界的高度等于两个发生叠加的边界的高度中的较大者。

解决 margin 边界叠加

  • 外层 padding:padding: 1px;(或外层 padding 代替 margin)
  • 内层透明度边框:border: 1px solid transparent;
  • 内层绝对定位:position: absolute;
  • 外层 DIV:overflow: hidden;
  • 内层 DIV:float: left; display: inline;
  • 外层 DIV:zoom: 1;

九、position 属性值

  • absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。(整个元素飘出文档流,而且元素自身的物理空间也同时消失。)
  • fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。
  • relative:生成相对定位的元素,相对于其正常位置进行定位。(物理空间依然存在,相对定位不影响其他相邻的元素。)
  • static:默认值,没有定位。元素出现在正常的流中。(忽略 top、right、bottom、left 或者 z-index)
  • inherit:规定应该从父元素继承 position 属性的值。

十、左边固定右边自适应

十一、右边固定左边自适应

十二、两边固定中间自适应

十三、中间固定两边自适应

十四、不换行,文本超出指定宽度后省略号代替

十五、水平居中

  • margin: 0 auto; 与 text-align: center;
  • 相对定位 position: relative; 与负的边距 margin-left

更多方法:六种实现元素水平居中

十六、垂直居中

十七、清除浮动

十八、隐藏元素

CSS 总结,未完待续(To be continued)。

感谢你的阅读,本文版权归 双鱼bizhongbio 所有,转载时请注明出处。
注明出处格式:双鱼bizhongbio(https://bizhongbio.github.io/article/css-summary/

上一篇:
下一篇:

分享到

相关文章

10条评论

  1. 4
    404 2016.04.22 15:08

    不错,不错!

  2. 路人 2016.05.10 10:16

    确实不错,这个要实话实说!

  3. 游客 2016.05.12 10:18

    到此一游!

  4. 游客 2016.05.13 16:55

    博文值得拜读。受益了!

  5. 分歧者 2016.05.16 09:44

    研究研究,学习学习。

  6. H
    Hodor 2016.05.23 09:37

    Copy that.

  7. 游客 2016.05.26 14:34

    常来看看,受益匪浅。

  8. 游客 2016.06.03 09:52

    看看您的博客!

  9. 游客 2016.07.01 09:04

    我就是随便看看!

  10. S
    sfantree 2016.07.12 09:39

    学长博客好多干货,学习了

发表评论