webkit

CSS3+HTML5几乎可以毫无顾忌的使用，然后浏览器端考虑webkit内核的就差不多了。 1 2 3 4 <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-title" content="测试APP"> 第一个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览，在ios上，用户将网页添加到主屏后，再从主屏幕打开这个网页，可以隐藏浏览器的地址栏和下面的toolbar； 第二个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览； 第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式，其值有三个：default、black、black

在很多网站上我们都看到input输入框显示提示文字，让我们一起来看看如果在input输入框中显示提示文字。我们只需要在<input>标签里添加：placeholder="提示文字即可"，那么如果要修改提示文字的样式呢？可以这样设置css样式： <! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title > input输入框提示文字 </ title > < style > /* 修改提示文字的颜色 */ input::-webkit-input-placeholder { /* WebKit browsers */ color : red ; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color : red ; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ color : red ; } input:-ms-input-placeholder { /* Internet Explorer 10+ */ color : red ; } </ style > </ head > < body > < input type ="text" placeholder =

“ 常说 ，要认识一个人①，大概了解一下背景，然后见面时打招呼讲什么语言规矩范礼②，她回应了，声音很好听，你会继续选择③用选择什么语气对待？而且又怎么漂亮，相信自己不会拒绝④的，来预先处理⑤好情绪，好让彼此能有一个新的开始⑥，给生活一个甜美的谜底吧⑦”--晚安，EmilyChen！ （一）CSS简介 CSS（Casadaing Style Sheet）层叠样式表，她的使命是把结构和表现分离，让HTML文件变小，提高加载速度，提升用户体验。 （二）语法及其规范 【1】语法 外联样式表 内部样式表 行内元素表<style="color:red;" 【2】规矩 层叠性（样式冲突即后来居上，“长江后浪推前浪，前浪死在沙滩上”） 继承性（子承父业，“龙生龙凤生凤，老鼠生的小孩会打洞”） 优先级（选择器权重计算的数位之间没有进制，比如“10个a赶上一个类”的说法不存在） 地位 身份 0 继承、* 1 元素、伪元素 10 类、伪类、属性 100 id 1000 style=""行内 无穷 !important 【3】规范 Ⅰ建议遵循以下顺序： 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式） 自身属性：width / height / margin /

单行溢出 单行溢出，超出部分以省略号（…）的形式显示。前提必须有宽度。 实例代码： HTML： CSS: 效果图： 样式说明： 参数 说明 overflow:hidden 文本溢出隐藏 text-overflow: ellipsis 以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 white-space:nowrap 禁止文本自动换行。 多行溢出 多行溢出，超出部分以省略号（…）的形式显示。WebKit内核适用于移动端。 实例代码： HTML： CSS： 效果图： 样式说明： 参数 说明 display: -webkit-box 将对象作为弹性伸缩盒子模型显示 -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 -webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property） overflow:hidden 文本溢出隐藏 text-overflow: ellipsis 以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 来源： oschina 链接： https://my.oschina.net/u/4408413/blog/4463434

  前端不可不学的浏览器渲染机制，阿里年年问，去一个栽一个。听说百度也在考这个，你还不准备学吗？ 首先你要了解浏览器渲染的顺序：   1.构建dom 树   2.构建css 树   3.构建渲染树   4.节点布局   5.页面渲染 什么是dom 树？   浏览器将HTML解析成树形的数据结构，简称DOM。   DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。 解析树的根节点是Document对象。 那我们就可以这样操作 dom 树： < html > < head > < title > never-online'swebsite </ title > < script > functionchangedivText ( strText ) { varnodeRoot = document ; //这个是根结点 varnodeHTML = nodeRoot . childNodes [ 0 ] ; //这个是html结点 varnodeBody = nodeHTML . childNodes [ 1 ] ; //body结点 varnodeDiv = nodeBody . childNodes [ 0 ] ; //DIV结点