12.26~12.30工作日志

Posted 2020-08-26

2016.12.26/27

1.writing-mode: vertical-rl;在电脑显示有效果，在手机端无效

  解决办法：改为 -webkit-writing-mode: vertical-rl;

 

2.div设置inline-block之后，如果没有设置固定宽高，div内的内容将正常显示，div缩为一个点？？？？？？？？？

 

 

3.设置float的元素最好设置好宽度，便于控制

 

4.document.getElementsByClassName（classname）获取的是数组数组！！！！就算获取的只有一个元素，也是得到一个只有一个元素的数组，必须加上[0]才能访问数组中的元素。。。。。

 

2016.12.28

1.CSS3里面加入了一个“-webkit-font-smoothing”属性。

 

     它有三个属性： 

 

     none        ------ 对低像素的文本比较好 

     subpixel-antialiased    ------默认值 

     antialiased           ------抗锯齿很好 

2.iconfont显示是黑框说明文件没有加载，引入文件地址要正确！！！！！！！！！！

3.移动端没有鼠标滑过事件，对普通标签如div加伪类hover、focus、active等并不会有相应效果，解决办法，将内容放置在a标签内，a标签设置inline-block属性即可

4.媒体查询@media，如果和普通样式放在同一个CSS文件中，必须放在相应通用样式的下    面，否则，CSS代码从上向下执行时，通用样式会将媒体查询样式覆盖掉；更为方便的方法是将所有媒体查询的内容单独放在了一个CSS文件中，在head中引用顺序为先通用后媒体

2016.12.29

1.由于em单位是相对于父元素的比例，在层层嵌套的结构中计算比较麻烦，可以改用rem单位，相对于html根元素的比例

2.小苹果html服务器. 用于移动端测试页面

http://www.xbole.com/

3.chrome默认最小字体12px，当设置的字体比12px小时，依旧以12px显示

4.border-image

以下写法在手机和safari中不兼容，图片不显示

{

border:1em solid transperent;

border-image: url(image/Group.png) 35 25 round;

}

改为

{

border-width: 1em;

border-style: solid;

border-image: url(image/Group.png) 35 25 round;

}

即可正常显示

 

2016.12.30

1.icon-font使用步骤：

   ①将相应的css文件和字体文件放入项目所在文件夹

   ②HTML文件头部引用该css文件

   ③在需要引用icon字体的标签中加入class=“icon”,以及相对应的字体的类名

 

2.meta

http://www.tuicool.com/articles/A7j2QjF

   http://www.cnblogs.com/esshs/articles/157588.html

 

3.html head头标签

http://fex.baidu.com/blog/2014/10/html-head-tags/