weixin_43700362的博客

情况一：小盒子 大盒子宽高都已知的情况使用padding或者margin或者 给小盒子设置绝对定位 大盒子设置相对定位情况二：小盒子宽高已知 大盒子宽高未知给小盒子设置绝对定位 大盒子设置相对定位小盒子：left:50%;top:50%;此时，小盒子的左上角在中间点的位置，所以，需要小盒子往左移本身宽度的一半，往上移动本身高度的一半margin-left:负的小盒子的宽度一...

相对定位position:relative1 相对于自己原来的位置进行定位2 如果只加了相对定位，没有加具体的位置，那么，对这个元素没什么影响3 配合left，right,top,bottom使用4 提升层级 z-index 只用在加了定位的元素上应用：想把下面的盒子盖住上面盒子的话，给上面盒子设置position:relativez-index:-99；定位 优先级结合使用...

1 不显示 display：none2 设置为透明 opacity：03 移出浏览器 比如margin-left：3000px，或者相对定位 left：3000px4 设置此元素的优先级最低 z-index:-999;5 设置此元素的父元素宽高都为06 不可见 visibility:hidden7 把此元素移出父元素，设置父元素 overflow:hidden8 将此元素的f...

jpg优点：色彩丰富 文件小缺点：有损压缩，反复保存图片质量下降明显适用场景：色彩丰富的图片 渐变图像gif优点：文件小 支持动画 透明 无兼容性问题缺点：只支持256种颜色适用场景：色彩简单的logo/icon/动图png优点：无损压缩 支持透明 简单图片尺寸小缺点： 不支持动画 色彩丰富的图片尺寸大适用场景：logo/icon/透明webp优点： 文件小 支持有损和...

圣杯布局三栏布局 左右两栏宽度固定 中间一栏宽度自适应 比如左宽300px 右宽200px 中间宽度为100%。1 写结构，注意顺序 中—左---右2 中间一栏宽度设置设置为100%（必须写），3 给左中右三栏设置浮动4 给左侧加margin-left：-100%，让左侧盒子移动到第一行最左边的位置5 给右侧盒子设置margin-left:-200px(右侧盒子的宽度)，让右侧盒子移...

等高布局一：以三栏登高布局为例，第一栏宽30%，第二栏宽40%，第三栏宽30%。1 几栏就写几个容器，分别为爷爷，爸爸，儿子的关系（暂时宽度都设置为100%）。2 使用相对定位，把爸爸向左侧移动30%，漏出爷爷的30%。3 使用相对定位，把儿子向左侧移动40%，漏出爸爸的40%。4 在儿子里面写左中右三栏，给此三栏设置浮动，让他们在同一行显示。5 使用相对定位，把第三栏定位到和爷爷漏出...

一 小高度问题在ie6及以下版本，会有小高度问题（即height很小的时候，仍会显示很高）。解决办法：给此元素设置：font-size:0;line-height:0;overflow:hidden;二 双边距的问题在ie6及以下版本，给这个元素设置浮动，在设置margin-left,最左侧的元素会出现双倍的margin-left值。解决办法给元素设置_display:inl...

定义BFC(Block formating context) 直译为“块级格式化上下文”。指页面中的渲染区域，并且拥有一套渲染规则，它决定了其子标签如何定位，以及与其他标签的相互关系和作用。如何生成BFC1 根元素（比如html）2 float的值为left或者right3 overflow的值为hidden或者scroll或者auto4 display 的值为inline-block...

浮动产生的问题：子元素脱离文档流不占位，父元素的高度撑不起来，下面的元素会往上移动。解决办法：1 ，给浮动元素的父元素设置高度（但是不灵活）2，给浮动元素的父元素设置overflow:hidden/scroll/auto （常用）溢出隐藏，父元素要知道子元素是否溢出，浮动元素也参与计算3,在浮动元素的后面加一个空的块元素（二者是兄弟元素，非父子元素）。给这个空的块元素设置clear:...