css position属性引申

日期:2016-2-23 13:51 | 标签: CSS position | 阅读:520

首先,抛出问题: 说说你对css中position属性的了解。

position属性值

参考w3c介绍
总共有5个可选值:

  1. absolute:相对于除static定位以外的第一个父元素进行定位。
  2. fixed:相对于浏览器窗口进行定位。
  3. relative:相对于正常流定位。
  4. static:默认值,无定位,出现在正常工作流中。
  5. inherit:继承自父元素 其中1,2,3可以使用top\right\bottom\left进行设置,只是相对的元素不同,fixed旧版本IE不支持,这个也得注意下。

css定位

说到定位就不得不谈盒子模型,其把每个元素看作为一个矩形,涉及到的四个对象是

  1. content 内容
  2. margin 外边距(可以为负值)
  3. border 边框
  4. padding 内边距
    盒子的宽高可以设置为内容的宽高与外边距外延的宽高,可以使用css3中的 box-sizing 属性
    box-sizing: content-box|border-box|inherit;
    
    盒子类型最基本的两类:块级模型与行级模型。 当然,还有许多基于这两种模型的衍生,如:inline-block、table、list ...

定位模式

CSS2中3种定位模式:normal,float和absolute。

  1. normal flow:正常流
    指没有指定定位为absolute、fixed且没有浮动的元素。其垂直边距会发生叠加,取较大的值。
  2. float:浮动流
    先根据正常文档流定位,然后从文档流中拿出来放到左/右边,上下文中的其他内容将流动到浮动元素的某一边。
  3. absolute:绝对定位
    从正常文档流中移除,根据它的包含块进行定位。

containing block

在浏览器生成显示的页面的时候,每一个框都有一个定位,这个定位受其包含块的影响,不过它不被包含块所限制,而且可能会溢出到包含块之外,元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。
具体计算方法,见如下我挖的图: 包含块

Block formatting context

其是一个独立的渲染区域, 它规定了盒子内部如何布局,并且与这个区域外部毫不相干。

生成BFC的几种情形

布局规则

这篇文章说的还行。
http://melonh.com/css/2014/01/10/the-magic-bfc.html

margin collapse

根据BFC的布局规则:属于同一个BFC的两个相邻盒子的margin会发生重叠,那么怎么解决重叠呢?
答案很简单:将这两个相邻的盒子移动到不同的BFC,参见生成BFC的几种情形
追求更全面的答案,可参考:问题与对策:CSS的margin塌陷(collapse) ,其中撑开父div使用给父div加border的方法很不错。

baseline

涉及到base-line的主要有两个属性:line-height与vertical-align。

writting-mode

css3属性,用来定义文字书写方向。取值:

原来write-mode自IE5.5就开始支持了,而且有这么多妙用,参考:
http://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode/

direction

之前都没有在项目中用过这个属性,后来看了writting-mode相关文章之后,想起是不是和这个重复了,后来发现是两回事,一个专注于文字,一个专注于内联元素块,如:input,button,此外,给span元素的display属性设置为inline-block也在在该范围。
具体参考: http://www.zhangxinxu.com/wordpress/2016/03/css-direction-introduction-apply/

unicode-bidi

该属性用于设置文本的方向。
参考:http://www.w3school.com.cn/cssref/pr_unicode-bidi.asp

总结

大部分属性自己都用过,却没有关注知识点之间的联系以及更深层次的原理,看到winter关于面试的文章,给自己敲了警钟:零碎的知识系统性的组织起来才有意义,系统性的学习才能事半功倍。

参考

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式