CSS深入理解系列课程笔记

最近在学习的慕课网的课程，张鑫旭大神出品

课程地址：http://www.imooc.com/u/197450/courses?sort=publish

下面是在学习过程中记录的笔记

float浮动

BFC-Block formatting context块级格式化上下文。

浮动是魔鬼，浮动的破坏性只是单纯为了实现文字环绕效果而已。

清除浮动的两种方法：

1. 浮动元素后插入clear: both;

2. 让父元素BFC/haslayout

   BFC/haslayout 通常声明：

   1. float: left/right
   2. position: absolute/fixed
   3. overflow: hidden/scroll
   4. display: inline-block/table-cell
   5. width/height/zoom: 1

推荐的清除浮动的方法：

// .clearfix应用在包含子元素的父级元素上
.clearfix:after {
 	content: '';
 	display: block;
 	height: 0;
 	overflow: hidden;
 	clear: both;
}
.clearfix{ 
	*zoom: 1;
}

// 对于伪元素的更好的方法
.clearfix:after {
	content: '';
	display: table;
	clear: both;
}
.clearfix {
  *zoom: 1;
}

absolute绝对定位

absolute和float就是传说中同父异母的兄弟。

absolute和float一样具有破坏性。

独立的absolute可以摆脱overflow的限制，无论是滚动还是隐藏。

绝对定位可以清浮动：绝对定位生效时，浮动肯定是无效的。独立的absolute（父级不设置relative）仍位于原来的位置，但不占据尺寸（浮于各元素上方），可以用margin来调整位置。

动画尽量作用在绝对定位元素上。

绝对定位方向是对立的时候，结果不是瞬间移动，而是身体的爆裂拉伸。

position: absolute; left: 0; top: 0; width: 50%;
等价于
position: absolute; left: 0; top: 0; right: 50%;

实现一个距离右侧200像素的全屏自适应的容器层：

position: absolute; left: 0; right: 200px;

relative相对定位

限制作用（relative对absolute的限制）：

1. 限制定位（父级relative，子元素absolute受限）
2. 限制z-index层级（父级relative设置了z-index，子元素absolute设置层级无效）
3. 限制在overflow下的嚣张气焰（overflow: hidden对绝对定位元素无效果）

relative除了限制同源属性值，其自身也具有定位属性。

1. 相对自身
2. 无侵入（不会影响其他元素的布局）

margin-top: -100px;
// 影响下面的元素向上100px
position: relative;
top: -100px;
// 不影响，下面元素不变

relative定位中top由于bottom，left优于right。

relative可以提高上下文层级。

relative的最小化影响原则：尽量降低relative属性对其他元素或布局的潜在影响。

1. 尽量避免使用relative（absolute定位不依赖于relative）
2. relative最小化（将需要绝对定位的元素用一个relative的空div包起来）

padding

padding会影响元素的尺寸，但是width: auto或box-sizing为border-box的时候，元素尺寸不变。

对于inline水平元素：水平padding影响尺寸，垂直padding不影响尺寸（但是会影响背景色占据空间）。

padding百分比均是相对于宽度计算的。

利用padding轻松实现一个正方形div{padding:50%}。

inline元素的padding百分比值：

1. 同样相对与宽度计算
2. 细节有差异
3. padding会断行

overflow

overflow基本属性值：

1. visible（默认）
2. hidden
3. scroll
4. auto
5. inherit

无论什么浏览器，默认滚动条均来自，而不是。如果想要去除页面默认滚动条，只需要html{overflow: hidden}。

BFC块级格式上下文：页面之结界，内部元素再怎么翻云覆雨都不会影响外部。

父元素overflow:hidden可以使内部浮动无影响。

resize拉伸属性依赖于overflow（不能是visible）。

z-index

特性：

1. 支持负值
2. 支持CSS3 animation动画
3. 在CSS2.1时代，需要和定位元素配合使用（relative,absolute,fixed,sticky）

三大原则：

1. 后来居上
2. 谁大谁上
3. 祖先优先

每个层叠上下文和兄弟元素独立（只会影响自己的子孙），每个层叠上下文是自成体系的。

7阶层叠水平：

1. 最小化影响原则
2. 不犯二准则：对于非浮层元素，避免设置z-index值，z-index不要超过2
3. 组件层级计数器：通过JS获取body下子元素的最大z-index值
4. 可访问隐藏属性：z-index负值元素在层叠上下文的背景之上，其他元素之下

• ← Previous Post
• Next Post →