webkit

一、背景 在园子里浪迹有很长一段时间了，里面遇到了很多大神，学习了很多知识，也帮助我解决很多现实工作的问题……非常感谢各位园友们的分享。说来惭愧，在园子这么久，很少发布博文。主要原因是自己有点懒，其他的客观原因也就不说了，每个人都有自己当时的想法。结果现在就有一种“我虽在江湖，但江湖没有我的传说”的尴尬，本着“迟到比不到好”的思想，就想着在这里记录一下自己平凡的学习成长历程，也希望能帮助园友们避免我踩过的坑。 之前在逛园子的时候，就发现有些博主的主题很好看，查找了一些攻略，根据自己的喜好，简单的修改了主题样式以及添加了一些功能。如果你想定制自己的博客，可以跟我一起，需要有css基础。 二. 定制自己的博客 1、准备工作 先在博客主页依次点击“ 管理 ”=》“ 设置 ”，下面找到“ 申请JS权限 ”，等待审核，审核通过之后才能，定制的主题才能成功。同时在博客皮肤那里选择博客园提供的皮肤。我没有像园子里面的大神直接自定义一套css样式，我觉得站在巨人的肩上，一样也可以摘到自己的星星。于是我选择了我觉得合适的皮肤[“SimpleBlue”]，每个人的爱好不一样，你可以选择你喜欢的皮肤进行修改，不过下面的一些样式可能需要做一些修改，具体看你想要怎么展示。 自定义主题样式操作，对于你不满意的元素，你可以在该页面按F12调出Debug工具，然后对该元素的css进行修改，调整满意之后

TouchSlide（PC端插件http://www.superslide2.com/demo.html#effect1） 可用于javascript触屏滑动特效插件，移动端滑动特效，触屏焦点图，触屏Tab切换，触屏多图切换等 方法引用（本次用轮播图为例）： Js引入： <script src="js/TouchSlide.1.1.js"></script> CSS样式： body, p, input, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form { margin : 0 ; padding : 0 ; list-style : none ; vertical-align : middle ; font-weight : normal ; } img { border : 0 ; margin : 0 ; padding : 0 ; } .focus { width : 100% ; height : 140px ; margin : 0 auto ; position : relative ; overflow : hidden ; } .focus .hd { width : 100% ; height : 11px ; position : absolute ; z-index : 1 ; bottom : 5px ;

https://segmentfault.com/a/1190000013325778 1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？ 用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽 3 CSS选择器有哪些？哪些属性可以继承？ CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel="external"]）、伪类选择器（a:hover, li:nth-child） 可继承的属性：font-size, font-family, color 不可继承的样式

Cascading Style Sheet（层叠样式表、级联样式表） px与屏幕分辨率有关 css样式表推荐的书写顺序： 显示属性（display、list-style、position、float、clear) 自身属性（width、height、margin、padding、border、background） 文本属性（color、font、text-decoration、text-align、vertical-align、white-space、othertext、content)。 边偏移 top：定义元素相对于其父元素上边线的距离。 right：定义元素相对于其父元素右边线的距离。 bottom:定义元素相对于其父元素下边线的距离。 left:定义元素相对于其父元素左边线的距离。 例如： top:auto/长度值/百分比 层叠定位属性 z-index h1和p元素之间默认会保留间隙，浏览器在标记上应用默认的上下边界 为标题指定一个负的下边距 边距可以是负值，填充不可以是负值 span可以单独设置样式 行间距（行高）可以用line-height line-height可以不用单位，有单位的话，span将会继承实际的行距，而不会继承比例。 hr水平线的样式：基于Mozilla的李岚清使用background-color定义线的颜色，IE用color定义 图片边框：img {

HTML方向 调用系统功能 使用 <a> 能快速调用移动设备的 电话/短信/邮件 三大通讯功能，使用 <input> 能快速调用移动设备的的 图库/文件 。 这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被 移动端浏览器 忽略。 <!-- 拨打电话 --> < a href = "tel:10086" > 拨打电话给10086小姐姐 </ a > <!-- 发送短信 --> < a href = "sms:10086" > 发送短信给10086小姐姐 </ a > <!-- 发送邮件 --> < a href = "mailto:young.joway@aliyun.com" > 发送邮件给JowayYoung </ a > <!-- 选择照片或拍摄照片 --> < input type = "file" accept = "image/*" > <!-- 选择视频或拍摄视频 --> < input type = "file" accept = "video/*" > <!-- 多选文件 --> < input type = "file" multiple > 忽略自动识别 有些 移动端浏览器 会自动将数字字母符号识别为 电话/邮箱 并将其渲染成上述 「调用系统功能」 里的 <a> 。虽然很方便却有可能违背需求。 <!-- 忽略自动识别电话 --> < meta