Crazier_Z

摘要： html5新增标签 mark　标记 meter　表示度量 progress　进度条 ruby　注释 rt　对ruby元素内容的解释 rp　当浏览器不支持ruby元素的时候显示的内容 time　表示一个时间点 datalist：配合input使用，并且通过input的list属性和datalist的i 阅读全文

摘要： 多列布局 -webkit-column-count: 3; /* 设置分成几列 */ -webkit-column-width: 300px; /* 当列宽*列数乘积大于盒子总宽，会自动调整列数 */ -webkit-column-gap: 60px; /* 调整列之间的宽度 */ 声明字体 @fo 阅读全文

摘要： 过渡 transition: all 2s; /* 设置哪些属性可以有过渡效果 all：所有的属性 */ /*注意：并不是所有的属性都可以过渡*/ transition-property: left, width; transition-duration: 5s; /* duration durin 阅读全文

摘要： 如果一个盒子display是flex，那么这个盒子就称为伸缩容器。 伸缩容器下面的子元素称为伸缩项。 flex-flow是一个综合属性，它包含了flex-direction、flex-wrap两个小属性。 flex-direction：用来调整主轴方向的 row：所有的伸缩项在一行显示（水平方向显示 阅读全文

摘要： background-size background-size: 100%; /* 其实只是设置背景图的宽度等于盒子宽度的100% */ background-size: 100% 100%; /* 背景宽度 = 盒子宽度 背景高度 = 盒子高度 */ contain：包含 必须保证盒子可以完全包含 阅读全文

摘要： IE怪异盒模型 正常情况下，width和height设置的都是内容区的大小。 但是在IE怪异盒模型下，width和height设置的就是盒子的大小。 box-sizing box-sizing: border-box; /* width和height设置的就是整个盒子的大小 */ box-sizin 阅读全文

摘要： 边框圆角 border-radius: 50%; 这里的50%是谁的50%？ 其实是正方形边长的50% border-radius: 10px 20px 15px 5px; /* 左上角圆角的半径 右上角圆角的半径 右下角圆角的半径 左下角圆角的半径 */ border-radius: 50% 50 阅读全文

摘要： text-align-last：针对文本的最后一行，设置对齐方式。 text-shadow：设置文本阴影 text-shadow: 12px 12px 5px red, /** 水平距离 垂直距离 模糊度 颜色**/ -20px -20px 5px #0ff; /** 可以设定多组效果 **/ 多行 阅读全文

摘要： CSS定位的分类 1、静态定位　默认情况（static）下所有的元素都是静态定位的 2、相对定位　relative 3、绝对定位　absolute 4、固定定位　fixed CSS定位——相对定位 相对定位的参考点在哪里？ 参考点：在自身原来的位置（左上角的点） 特点：“形影分离，老家留坑” 相对定 阅读全文

摘要： 如果想要对网页进行布局，那么必须使用浮动。 浮动的特性 脱标（脱离标准文档流） 脱标之后所有元素都是平等的，已经没有行级元素与块级元素之分。 float与display有什么区别？ 它们俩的本质是不一样的。 display是改变元素的性质，这时候依然存在行级元素和块级元素。 但是float浮动脱标之 阅读全文