发表于： 2018-10-29 20:54:36
1 727
今天完成的事情：
什么是层叠上下文（STACKING CONTENT）
在一个层叠上下文，所有的元素根据规则从下到上排列，分成了七个等级：
1、背景和边框 — 形成层叠上下文的元素的背景和边框。 层叠上下文中的最低等级。
2、负z-index值 — 层叠上下文内有着负z-index值的子元素。
3、块级盒 — 文档流中非行内非定位子元素。
4、浮动盒 — 非定位浮动元素。
5、行内盒 — 文档流中行内级别非定位子元素。
6、z-index: 0 — 定位元素。这些元素形成了新的层叠上下文。
7、正z-index值 — 定位元素。层叠上下文中的最高等级
不使用z-index的情况，也是默认的情况，即所有元素都不用z-index时，堆叠顺序如下（从下到上）
- 根元素（即HTML元素）的background和borders
- 正常流中非定位后代元素（这些元素顺序按照HTML文档出现顺序）
- 已定位后代元素（这些元素顺序按照HTML文档出现顺序）
- 正常流中非positoned element元素，总是先于positioned element元素渲染，所以表现就是在positioned element下方，跟它在HTML中出现的顺序无关。
- 没有指定z-index值的positioned element，他们的堆叠顺序取决于在HTML文档中的顺序，越靠后出现的元素，位置越高，和position属性无关。
浮动
浮动元素会脱离文档流进行左浮或者右浮，直到碰到父级元素或者其他的浮动元素。
为什么清除浮动：浮动会导致父元素高度坍塌，因为浮动脱离文档流，浮动以后不占文档流的位置，撑开的父元素高度肯定会坍塌。
清除浮动的方法
1.父级div给出固定的高度。手动定义height，这样就解决了父级元素获取不到高度的问题。
3.overflow，设置overflow：hidden。
2.额外标签，添加一个新的标签，如div，或者br，并且设置标签的属性clear：both；清除浮动，让父级能自动获得高度。
上面是比较简单的
display:none
（2）display: none;不占据空间，把元素隐藏起来，所以动态改变此属性时会引起重排（改变页面布局），可以理解成在页面中把该元素删除掉一样。
（3）display: none;不会被子孙继承，但是其子孙是不会显示的，毕竟都一起被隐藏了。
（4）transition无效。
（1）元素会被隐藏，但是不会消失，依然占据空间，隐藏后不会改变html原有样式。
（2）visibility: hidden会被子孙继承，子孙也可以通过显示的设置visibility: visible;来反隐藏。
（3）visibility: hidden;不会触发该元素已经绑定的事件。
（4）visibility: hidden;动态修改此属性会引起重绘。
（5）transition无效。
opacity:0;filter：alpha(opacity=0-100;
（1）opacity:0;filter：alpha(opacity=0-100;只是透明度为100%,元素隐藏，依然占据空间,隐藏后不会改变html原有样式。（2）opacity:0;filter：alpha(opacity=0-100;会被子元素继承,且子元素并不能通过opacity=1，进行反隐藏。
（3）opacity:0;filter：alpha(opacity=0-100;的元素依然能触发已经绑定的事件。
4、各种隐藏
{ visibility: hidden; / 占据空间，无法点击 / }
{ opacity: 0; filter:Alpha(opacity=0); / 占据空间，可以点击 / }
{ position: absolute; top: -999em; / 不占据空间，无法点击 / }
{ position: relative; top: -999em; / 占据空间，无法点击 / }
{ position: absolute; visibility: hidden; / 不占据空间，无法点击 / }
{ height: 0; overflow: hidden; / 不占据空间，无法点击 / }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); / 不占据空间，可以点击 */ }
明天计划的事情：复习基础
遇到的问题：
收获：
返回列表
评论