weixin_43700362的博客

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

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

1 不显示 display：none 2 设置为透明 opacity：0 3 移出浏览器 比如margin-left：3000px，或者相对定位 left：3000px 4 设置此元素的优先级最低 z-index:-999; 5 设置此元素的父元素宽高都为0 6 不可见 visibility:hidden 7 把此元素移出父元素，设置父元素 overflow:hidden 8 将此元素的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) 直译为“块级格式化上下文”。指页面中的渲染区域，并且拥有一套渲染规则，它决定了其子标签如何定位，以及与其他标签的相互关系和作用。 如何生成BFC 1 根元素（比如html） 2 float的值为left或者right 3 overflow的值为hidden或者scroll或者auto 4 display 的值为inline-block...

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