-
absolute和float的相同特性： 1.包裹性 2.破坏性查看全部
-
1.绝对定位方向是对立（如：left vs right,top vs bittom）的时候，结果是满屏铺展，这种效果可以和width/height相互替代，但要IE7+浏览器支持。 2.当尺寸限制（whith/height）、拉伸（如：left vs right,top vs bittom）以及margin:auto同时出现时，就会有绝对定位元素的绝对居中效果。但要IE8+支持。 3.当尺寸限制（whith/height）>拉伸（如：left vs right,top vs bittom） 3.查看全部
-
对于position为absolute和fixed的元素，同时设置left、right和width，即可由margin:auto水平居中； 同理，top、bottom、height即可设置垂直居中。查看全部
-
1.无依赖绝对定位下的相对定位——外层父元素不使用相对定位，直接对里面的元素使用absulute定位，然后使用margin来精确定位，实现相对定位的效果。 2.注释<!-- -->可以用来消除两个标签之间的空格，保证两个元素之间完美的贴合。(同时保持代码可读性)查看全部
-
1.在父元素没有position：relative 的情况下, 元素posiiton：absolute会超越overflow 2.父元素有position：relative以及overflow:hidden时，posiiton：absolute没用，超出div部分不显示查看全部
-
元素是block那么absolute之后依然是block排列,inline时absolute后依然inline排列.查看全部
-
浮动和绝对定位同时出现，浮动无效查看全部
-
绝对定位是什么？ 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会冗余查看全部
-
absolute与整体布局 1. body降级, 子元素升级 升级的子div(假设类名为page)满屏走起： .page { position: absolute; left: 0; top: 0; right: 0; bottom: 0 } 绝对定位受限于父级，因此，page要想愉快地拉伸，需要： html, body { height: 100%; } 2. 各模块-头尾、侧边栏(PC端)各居其位 header, footer { position: absolute; left: 0; right: 0; } header { height: 48px; top: 0; } footer { height: 52px; bottom: 0; } aside { width: 250px; position: absolute; left: 0; top: 0; bottom: 0 } 3. 内容区域想象成body . content { position: absolute; top: 48px; bottom: 52px; left: 250px(如果侧边栏有); overflow: auto; //这里的overflow: auto是为了让中间内容区超过宽度后可以滚动 } 此时的头部尾部以及侧边栏都是fixed效果，不跟随滚动。避免了移动端position: fixed实现的诸多问题。 4. 全屏覆盖与page平级 . overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.5); z-index: 9; } <div class= " page " ></div> <div class= " overlay "></div>查看全部
-
.overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: #000; opacity: .5; filter: alpha(opacity=50); }查看全部
-
opacity: .5; filter: alpha(opacity=50); 透明度查看全部
-
父元素div relative 子元素div absolute 并设定宽高和margin:auto left top right bottom=0可以自动居中查看全部
-
实现9宫格 高度自适应布局： 外面的盒子:.page{ position:absolute; left:0;righr:0;bottom:0;top:0; } .list{ float:left; height:33.3%;width:33.3%;position:relative; }查看全部
-
实现满屏的自适应效果通常方法：.overlay{position:absolute; width:100%;height:100%; left:0;top:0; } .overlay{position:absolute; right:0;bottom:0; left:0;top:0; } width:50% 等同于：right:50% ie7以上查看全部
-
不换行的话：1.width:100%; 2可以在remark那里加上css{ white-space:nowrap;}强制不分行查看全部
举报
0/150
提交
取消