CSS深入理解之absolute_技术问答

首页免费课 CSS深入理解之absolute 问答

CSS深入理解之absolute

                
                张鑫旭
            页面重构设计

                    查看讲师更多课程 
                    张鑫旭讲师的其他课程
                
CSS深入理解之border
中级·56799
免费课程
                                
CSS深入理解之padding
中级·52483
免费课程
                                
CSS深入理解之margin
中级·55942
免费课程
                                
CSS深入理解之z-index
中级·40881
免费课程
                                
CSS深入理解之relative
中级·47919
免费课程
                                
CSS深入理解之vertical-align
中级·39336
免费课程
                                
                难度中级
            
                时长 2小时24分
            
                学习人数
            
综合评分9.57
                            214人评价
                        查看评价
                                9.8
                                内容实用
                            
                                9.4
                                简洁易懂
                            
                                9.5
                                逻辑清晰

全部评论问答未解决精华

速去逮一只猫

服气！果然更吊更爆更流弊！

0 6-2 天使的翅膀

2016-08-05

qq_wuli咕咕_03625035

啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊老师说话声音真难听

1 3-1 无依赖的absolute定位

2016-08-03

小游2015

完全覆盖我的观念，以前用fixed固定再用body padding-top方法不行。现在老师这个方法对我帮助很大

1 8-2 慕课网-绝对定位整页布局演示

2016-08-01

红豆玉米

看来还得学习before after

0 7-4 高度自适应的九宫格效果

2016-07-30

Nehpets

完结撒花~~~
真的是大神，学到很多东西，特别是看老师的博客，简直是个宝库！

0 8-2 慕课网-绝对定位整页布局演示

2016-07-30

Nehpets

看不懂的同学去问答里看，本节CSS代码全注释，评论里写不下

2 7-4 高度自适应的九宫格效果

2016-07-30

Nehpets

核心代码
.container {
display: inline-block; /*使容器具有包裹性 */
position: relative; /*限制cover层的范围，用老师的话说就是天使爆裂范围到此为止*/
}

.cover {
position: absolute; /*天使爆裂起手式*/
left: 0; top: 0; bottom: 0; right: 0; /*大招全开，天使爆裂！cover层占满整个容器 */
background-color: rgba(1,128,255,.3);/* 设置cover层透明色 */
}

24 7-2 无固定width/height容器内的绝对定位元素拉伸

2016-07-30

frgo_03360772

老师，我要把你在慕课上的所有课都看一遍，哼，穿越雾霾，大气层，银河宇宙太阳系，也要看！！！！！！

1 6-2 天使的翅膀

2016-07-30

frgo_03360772

老师出几期js的课程吧~~~

2 3-3 折翼天使表现特性一：去浮动

2016-07-30

frgo_03360772

大爱老师的画风！！！！！！

2 2-1 别把我和relative栓在一起

2016-07-29

frgo_03360772

例题的js好猛！！

21 1-3 absolute和float高尔基

2016-07-29

Nehpets

@johnwayne
元素设置absolute之后，
1.会脱离文档流形成“悬空”效果
2.设置absolute的元素仍然可以有margin
想象一下，这时候元素就相当于一个小飞碟，“悬浮”在文档流所在平面的上方，margin就相当于小飞碟四周用来控制方向的喷射器。
小飞碟(元素)想往下移动，就开动上方的喷射器(设置margin-top)，往上喷气(margin-top为正值)，小飞碟(元素)就往下走了，这个道理大家都懂的
想想宇航员太空行走的样子吧！噗噗噗，那个小喷头，就相当于在改变宇航员自身的"margin"值

24 4-1 图片图标绝对定位覆盖

2016-07-29

Nehpets

补充一下楼上说的
absolute的破坏性是对图片的absolute化。图片设置absolute后，图片就从标准文档流中脱离出来，没有东西可以继续支撑容器的高度，容器自然就坍塌了。好像把房子的柱子挪到房子外边，房子果断就塌了
absolute的包裹性是对容器的absolute化。容器设置absolute后，容器变为了 inline-block，容器本身没有设置宽度和高度的话，那么容器的宽高就等于内容的宽高，表现结果就是容器把内容包裹起来。

59 1-4 absolute的包裹性

2016-07-29

虢嘉

if语句的判断condition始终返回的都是一个布尔值，如果condition返回的不是布尔类型值，JS会自动调用内置的转型函数Booleaan()将其转换为布尔值，例如这儿的this.absolute的数据类型是变量（任何非null对象都会转换为布尔值true）将会被转换为true。
这儿就是在判断：this.absolute==true,明显true==true,执行第一个声明，然后其值被赋值false,再次点击的时候（this.absolute作为全局变量还存在内存中），判断this.absolute==true,明显false!=true，执行第二个声明，然后其被赋值true

1 1-2 absolute的破坏性

2016-07-27

小狗会飞

还是js有意思

0 3-2 折翼的天使

2016-07-26

首页上一页 23 24 25 26 27 28 29 下一页尾页

开始学习

课程须知: 虽说是深入，实际更适合鲜肉小伙伴

老师告诉你能学到什么？: absolute基本特性的感性认知。absolute可能的理解误区纠正。absolute诸多高级技巧的应用实例。absolute在移动web布局中的大放异彩。

微信扫码，参与3人拼团

热搜

最近搜索清空

CSS深入理解之absolute