随笔分类 - css3
摘要：1.如何让层在flash上显示？ 方法： <param name="wmode" value="transparent" /> /*设置flash的wmode值为transparent或opaque*/ 2.如何使用标准的方法在页面上插入flash？ 方法： <object id="flash-sh
阅读全文
摘要：1.如何清除图片下方出现几像素的空白间隙？ 清除浮动，方法请参考第9条 /*通常出现这样的情况都是由于没有清除浮动而引起的，所以Debug时应第一时间想到是否有未清除浮动的地方*/ 方法1： img{display:block;} 方法2： img{vertical-align:top;} /*除了
阅读全文
摘要：1.如何在IE6及更早浏览器中定义小高度的容器？ 方法： #test{overflow:hidden;height:1px;font-size:0;line-height:0;} /*IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高*/ 2.如何解决IE6,7block元素转换成
阅读全文
摘要：注意：尽可能减少对CSS Hack的使用。Hack有风险，使用需谨慎 1.条件 Hack（用于选择IE浏览器及IE的不同版本） 语法： <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> <keywords> if条件共包含6种选择方式：
阅读全文
摘要：1.em：相对长度单位，em会继承父级元素的字体大小。 2.rem：相对长度单位。相对于根元素(即html元素)font-size计算值的倍数 3.px：绝对单位，页面按精确像素展示。 4.英寸（Inches）。绝对长度单位。1in = 2.54cm = 25.4 mm = 101.6q = 72p
阅读全文
摘要：!important CSS1 提升指定样式条目的应用优先权。 /*comment*/ CSS1 CSS中的注释 /* 这里是注释内容 */ @import CSS1/3 指定导入的外部样式表及目标媒体。该规则必须在样式表头部最先声明 @charset CSS2 在外部样式表文件内使用。指定该样式表
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title
阅读全文
摘要：1. 三维坐标系（里面的值不能省略，没有就写 0 ） x 轴：水平向右 注意：x 右边是正值，左边是负值 y轴： 垂直向下 注意：y 下面是正值，上面是负值 z轴：垂直屏幕 注意： 往外面是正值，往里面是负值 主要知识点： 3D位移：translate3d（x,y,z） 3D旋转：rotate3d（
阅读全文
摘要：1. 制作动画 先定义动画，再使用（调用）动画 使用 keyframes(关键帧)定义动画（类似定义类选择器） @keyframes 动画名称{ 0%{ width:100px; } 100%{ width:200px; } } 动画序列： 1. 0% 是动画开始，100%是动画完成，这样的规则就是
阅读全文
摘要：Document 会旋转的盒子 会缩放的盒子： 1 2 3 4 5 动画
阅读全文
摘要：1.transform（转换）可以实现元素的位移，旋转，缩放等效果（可以简单理解为变形） 移动：translate 旋转：rotate 缩放：scale 2. 2D 转换之移动 translate 可以改变元素在页面中的位置，类似定位。 语法： transform：translate(x,y); 或
阅读全文
摘要：1.盒子模型（box-sizing） CSS3 中可以通过 box-sizing 来指定盒模型，有两个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。 可分为两种情况： 1. box-sizing：content-box 盒子大小为 width
阅读全文
摘要：1、属性选择器 属性选择器，可以根据元素特定的属性来选择元素，这样就不用借助 类 或者 id选择器。 E [ att ] 选择具有 att 属性的 E 元素 例如：input [ value ] E [ att = 'val' ] 选择具有 att 属性且属性值等于 val 的 E元素 E [ at
阅读全文
摘要：1. 鼠标样式 cursor default： 小白（箭头）默认 pointer：小手 move：移动 text：文本 not-allowed：禁止 2. 轮廓线（表单外发光）outline 给表单添加 outline:0; 或者 outline:none; 可以去掉默认蓝色边框 3. 防止拖拽文本
阅读全文
摘要：1.圆角边框 border-radius border-radius 属性用于设置元素的外边框圆角 语法：border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形，数值设置宽或高的一半，或者 50%； 矩形，数值设置高度的一半 2.盒子阴影 box-shadow b
阅读全文
摘要：1、问题：div中的图片间隙（出现在IE6及更低版本中） 描述：在 div 中插入图片时，图片会将 div 下方撑大三像素 解决方法：将 < img > 转换为块级元素，给 < img >添加声明：_display：block； 2、问题：双倍浮向（双倍边距） 描述：当 IE6 及更低版本浏览器在解
阅读全文
摘要：开启弹性盒模式： display：flex / inline-flex； inline-flex 行内弹性盒 1、设置 flex 缩放的 限定值 min-width 最小值 min-width：280px 最小宽度不能小于280px max-width 最大值 max-width：1280px 最大
阅读全文
摘要：div::before ，在 div 内容的前面加一个伪元素 常用于处理 相邻父子元素外边距重叠问题 div::after，在div内容的后面添加一个伪元素 常用于处理 标签浮动，高度塌陷问题 :before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好 :befo
阅读全文
摘要：<style> .box{ width: 400px; height: 400px; background: gold; } .box1{ height: 100px; width: 100px; background: palegreen; margin-top:50px; } .box2{ height: 100px; width: 100px; background: palevioletr
阅读全文
浙公网安备 33010602011771号