-
1、外层父元素不使用相对定位,直接对里面的元素使用absulute定位,然后使用margin来精确定位,实现相对定位的效果。2、添加空格,取消空格与<i>间的空格查看全部
-
<div> 这里写一个字符,让他居中,比图空格,text-align:center 跟一个图片,用absolute,然后margin 负宽度的一半即居中显示图片 </div>查看全部
-
CSS3的属性 box-shadow: 10px 10px 3px rgba(0,0,0,0.35); CSS属性选择器 例:input[type=button]{} JavaScript新语法: 例:var button=getElementById("button") button.onclick=function(){}意思是变量button的onclick事件执行函数查看全部
-
absolute作用在内部元素时,会把元素拉出文档流,相当于父元素中没有该元素,因此会坍缩. absolute作用于父元素时,会使自身变成行内元素(即不会独占一行),如果未将宽高写死,则由内部元素撑起其宽高. css中:当float与absolute共存时,float将失效查看全部
-
绝对定位元素的绝对居中查看全部
-
有依赖绝对定位是什么? top left right bottom 两个 单个 top left right bottom 与 width height 相互替代性(IE7+) position:absolute; left:0; top:0; width:50%; 等同于: position:absolute; left:0; top:0; right:50%; 相互支持性 1.容器无需固定width height值,内部元素亦可拉伸; 2.容器拉伸,内部元素支持百分比width height值。 相互合作性 width height设置尺寸更大 position:absolute; top:0; left:0; right:0; width:50%; 的实际宽度是50%而不是100%。 当尺寸限制、拉伸和margin:auto同时出现,就有绝对定位元素的绝对居中效果(IE8+) absolute与整体布局 1.body降级,子元素升级 子div(class:page)满屏,不限父级 .page{position:absolute;left:0;top:0;right:0;bottom:0;} html,body{height:100%;} 2.各模块-头尾、侧边栏各居其位 header,footer{position:absolute;left:0;right:0;} header{height:?px;top:0;} footer{header:?px;bottom:0;} aside{width:?px;position:absolute;left:0;top:0;bottom:0;} 内容区域想象成body .content{position:absolute;top:?px;bottom:?px;left:?px;overflow:auto;} 备注:此时各个模块都是fixed效果,不跟随滚动。内容区域具有滚动效果。 3.全屏覆盖与page平级 .overlay{position:absolute;top:0;right:0;bottom:0;left0;z-index:9;} <div class="page"></div> <div class="overlay"></div>查看全部
-
绝对定位是什么? absolute与float关系 具有相同的特性 1.包裹性 2.破坏性 absolute与relative关系 对立、分离 无依赖absolute是什么? 不影响其他布局的绝对定位下的相对定位之王 父级无relative,自身无top、right、bottom、left 1.脱离文档流 2.去浮动 3.位置跟随 absolute 的元素是inline/ inline-block 位置不变,依然inline显示 注:chrome浏览器的特殊性:chrome浏览器对于absolute的元素,页面渲染完成后,再次修改display 属性,浏览器是不会再进行渲染的,所以这种情况下,先默认给图片设置display:block; 注:IE7浏览器中,任何元素绝对定位后都会变成inline-block水平,可以在元素外套一层空div解决 4.可以不受overflow限制 现在父级设置overflow:hidden时,按钮超出部分也不会被隐藏 无依赖绝对定位实践 配合margin的精确定位 1.支持负值定位 2.兼容IE6 图片图标定位实践 无依赖绝对定位,本身设置margin来定位 注:位置跟随,可以用注释消除行内元素换行所带来的空格 下拉框定位实践 居中、边缘定位实践 居中:利用跟随性,前面元素里有一个 并且text-align:center。 边缘:使用fixed(特殊的绝对定位),具有跟随性。 星号出现位置和溢出实践 脱离文档流 动画尽量作用在绝对定位元素上 具有层级关系 1.只有一个绝对定位元素,不用z-index,自动覆盖普通元素 2.有两个绝对定位元素,不用z-index,控制DOM流顺序(后来居上)决定 3.有多个,需要z-index:1控制 4.非弹框类的绝对定位元素的z-index>2,z-index会冗余查看全部
-
overflow:auto 可以实现内容区的滚动效果查看全部
-
内容区想象成body查看全部
-
绝对定位受限于父容器查看全部
-
为什么父容器需要设置position relative查看全部
-
当尺寸限制,margin auto 和拉伸同时存在时,将出现绝对定位效果查看全部
-
left50%和width的50%具有同样 的效果?查看全部
-
阻碍absolute定位的原因查看全部
-
absolute 有个隐藏属性 就是 将元素转换为 内联块元素 这里给图片的包裹容器div加上absolute的话 容器就变成了内联块元素 没有宽度的时候内容撑开宽度 而不是原来的默认独占一行查看全部
举报
0/150
提交
取消