随笔分类 - HTML and CSS
摘要：1.同行等高。2.宽度自动调节（table-layout:fixed;）。3.处理垂直居中又是神器参考链接：http://www.blueidea.com/tech/web/2008/6257.asphttp://www.cnblogs.com/StormSpirit/archive/2012/10...
阅读全文
摘要：1.父元素display:flex之后成为伸缩容器，子元素（除了position:absolute或fixed）无论是display:block或者display:inline，都成为了伸缩项目。2.可以固定一个伸缩项目的宽度，另一个伸缩项目自适应。3.伸缩项目之间的空白自适应。4.可以很方便进行水...
阅读全文
摘要：注：以下内容只适用于chrome页面宽高:document.body.clientWidth/Height（不包括margin）document.body.offsetWidth/Height（不包括margin）document.body.scrollWidth/Height（包括margin）t...
阅读全文
摘要：1.单行内容的居中.middle-demo-1{height: 4em;line-height: 4em;overflow: hidden;}2.父元素未设置高度，内容居中.middle-demo-2{padding-top: 24px;padding-bottom: 24px;}3.子元素有固定高...
阅读全文
摘要：1.content area 围绕着文字的一种box，高度由font-size和font-family决定。在chrome控制器里，你用鼠标志向某个内敛元素，显示的高度值。2.inline box的高度由line-height决定，一半的line-height在content area的上面，另一半...
阅读全文
摘要：http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html上集《CSS深入研究:display的恐怖故事解密(1) - display-inline》已经把display的属性列表拉出来溜了，发现在这个属性恐怖面貌其实都是脆弱...
阅读全文
摘要：http://www.qianduan.net/css-regions.htmlhttp://alistapart.com/article/crosscolumn2http://www.sampsonresume.com/labs/img-in-middle/http://galjot.si/css-exclusionshttp://www.w3.org/TR/css3-exclusions/#wrap-flow-propertyhttp://css-tricks.com/examples/FloatBoth/http://www.interoperabilitybridges.com/css
阅读全文
摘要：1.草珊瑚的css基础2.草珊瑚的常见移动网站布局3.草珊瑚的前端项目的布局部分，交互部分，通信部分4.草珊瑚的常见CSS经验技巧
阅读全文
摘要：1.百分比设置宽高，内外边距2.宽和margin的百分比，依据父元素的宽度定标准3.图片百分比定宽高，依据图片原来的宽高比，进行自适应。4.使用固定宽高比的透明图片，可以方便实现子元素定宽高布局5.使用字体大小vw单位，另加窗口变化的z-index:1来实现重绘6.由于当前浏览器对于vw的控制不好，对于字体，还是弄成px单位定高，宽度自适应。字体自适应，得用js依据比例控制。7.绝对定位以百分比，依据父元素的宽高。总结，父元素定宽高，子元素有参考，文本定高宽度自适应。如果想对未知宽高比图片进行统一宽高比，请用固定宽高比透明图片。
阅读全文
摘要：很基础。inline-block元素，左右间隙去除，去掉代码的空白字符。上下间隙去除，设置vertical-align属性。svn与githubgithub是国际性的，并且名声不错，功能好多。适用于复杂性项目。svn能干的事情，github都能干。反之，不一定成立。svn在国内有code.taobao.org，适合新手进行自己项目的代码管理。当前时间，网页上显示utf-8格式的文件，会有中文乱码问题。上手容易性，svn占优。
阅读全文
摘要：网上找了很多php服务端的WebSockets例子，https://github.com/Flynsarmy/PHPWebSocket-Chat这个链接是正确的。
阅读全文
摘要：浮动本来是用在文字环绕图片，现在却被用来排版，替代很久以前的表格式排版。清除浮动两种方式，一种是在包裹浮动元素的大框加:after，<style type="text/css">.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {display: inline-block;} /* for IE/Mac */ </style><!-- main stylesheet ends, CC
阅读全文
摘要：Width,height,position,float,padding,margin,z-index Width问题 Width是盒子的content的宽度，与padding无关。 双div策略，外部div用来设置width和margin以及float，内部div用来设置padding。 Float元素问题 设置float之后，块级元素的实际宽度变成width大小。 并列的div，都是float:left属性，则竖直方面不侵犯。 两个并行的块级元素，第一个设置float:left，第二个没设置。第二个的内容包含第一个的内容。 当第一个设置float:le...
阅读全文
摘要：题目在这，解决方案也是其一http://www.rainweb.cn/article/304.html这里的解决方案是，绝对定位，然后根据鼠标移动事件，进行大小控制。<!DOCTYPEhtml><html><head><metacharset="utf8"/><title>鼠标停留当前区域变大</title><styletype="text/css">div{background:#CCCCCC;}#first{float:left;width:100px;height:
阅读全文
摘要：0.默认块级元素会自动向右伸展，块级元素设置width属性后，盒子所占屏幕宽度是width+padding+border+margin 1.标准DOM流里，相邻块级元素之间的竖直距离不是margin-bottom和margin-top的总和，而是两者中的较大者。2.父子关系的盒子，子盒子的margin以父块的content作为参考。（如果子元素的高度超过父盒子的height值，IE和Firefox出现不同效果） 3.当一个盒子设置了float属性，表面它摆脱了标准流，它的弟弟盒子会取代它的位置。但是它的弟弟盒子的content会围绕整个哥哥盒子。4.设置浮动的盒子只影响弟弟元素，不影响哥哥元素
阅读全文
摘要：输入的交互设计，与select标签的不同，与autocomplete不同，每个web组件有不同的交互效果，原生的input type="text"就是输入框了，想输入就输入什么，也能上传二进制数据（photo，audio，video）。为了方便你输入，出现autocomplete。 也有纯鼠标点点，也为了防止你输入范围外的数据，出现了<select>选择标签。 comboBox，则是select和autocomplete的结合，你只能输入指定范围的数据，不想输入，也能鼠标点点。类似的有DatePicker，也就是日期组件了。 上面都是小数据输入了，可能就是一句话
阅读全文
摘要：增加了视频标签，但可惜的是，firefox浏览器支持的视频格式没有流行的rmvb，avi格式。增加了音频标签，但可惜的是，firefox浏览器支持的音频格式没有流行的mp3格式。 增加了canvas标签，意味着，可以在网页里面画画。这个做网页游戏可能用到。webstorage，里面的localstorage挺好，Sessionstorage也挺好，相比cookie好多了。会有大用处的。还有个websocket特性，这个也很好，非常好，网页前后端通信于是开始跟桌面程序差不多了。
阅读全文
摘要：HTML4属性绑定例子：<imgid="logo"data-bind="attr:{src:imageSource,alt:imageAlt}"/><script>varviewModel=kendo.observable({imageSource:"http://www.kendoui.com/image/kendo-logo.png",imageAlt:"KendoLogo"});kendo.bind($("#logo"),viewModel);</script
阅读全文
摘要：varviewModel1=newkendo.data.ObservableObject({field1:"value1",field2:"value2"});varviewModel2=kendo.observable({field1:"value1",field2:"value2"});这两段代码效果一致，kendo.data.ObservableObject和View-Model可以互换使用。因为所有View-Model继承于kendo.data.Observable对象。Objectkendo.data.O
阅读全文
摘要：Model View View-Model是一种设计模式来帮助开发者更好地对数据层Model和视图层View进行分层。View-Model层 负责 暴露Model层和View层交互的数据。Kendo MVVM是一种MVVM的实现，当然可以跟Kendo 组件(widgets)和数据源(datasource)进行无缝结合。 首先，我们要创建一个View-Model对象，View-Model对象根据你的Model数据产生。具体做法就是，传入一个JS对象到Kendo.observable方法。 varviewModel=kendo.observable({name:"JohnDoe"
阅读全文
