当设置一个绝对高度不是我们的期望时，我们会通过百分比设置一个相对高度。但为什么有时设置height为100%时，元素却不能撑满整个浏览器窗口的高度，为什么没有效果呢？ W3C的规范:百分比的高度在设定时需要根据这个元素的父元素容器的高度。那么如果你把一个div的高度设定为height:50%; 它的父元素的高度为1000px，这个div的高度就是500px。 那如果它的父元素也是百分比定义的，或者没有定义，那具体的高度是怎么算的？那就要一直向上找，直到找到一个绝对高度用来计算。如果找 ...

css总定义margin, padding等值时可以用以下格式： margin 属性，这个属性接受任何长度单位、百分数值甚至负值。 任何长度单位：可以是像素、英寸、毫米或 em。 可以设置为 auto。更常见的做法是为外边距设置长度值。 百分数是相对于父元素的 width 计算的。 margin: top right bottom left 值复制 有时，我们会输入一些重复的值： p {margin: 0.5em 1em 0.5em 1em;} ...

如何让图片垂直居中？这是一个常见的需求。网上看了一圈，收录一下最佳实践。来自百度知道。 原理是利用vertical-align来实现垂直，绝对行高的是由行内最高的元素的值。 HTML代码： <div><span></span><img src="1.jpg" alt="test image"/></div> HTML中空元素<span></span&g ...

CSS中的定位position理解 页面元素定位，浮动，以及z-index的属性的使用是页面设计中经常使用。正确使用它们可以设计出层次感十足的页面。但是往往在使用中确常有疑惑： 1. 定位时left,top,right,bottom如何设置，设置多大的值为好？百分比设置效果如何？响应式页面中如何使用？ 2. 如何正确设置z-index？z-index设置什么情况下设置无效？ 3.float,static,和定位之间的层次关系？ 4. 在相对定位(position:r ...

我们对css的box model的概念理解起来很直观很“容易”，但总是在实际使用时会遇到这样那样莫名其妙的问题，常见的就是为什么最终不是我们定义设置的宽度和高度，最终导致我的div为什么看不见了或者我的排版为什么都乱掉了？ 1.如果一个div不设置width（即width的值为默认值auto）而设置padding时，div会内缩。 2.如果一个div设置了width和padding就会使得width增大。 对于一个不常使用css和html的我，写到UI时就常 ...

学习display属性，常用的block;inline;none理解比较容易，但有时也常看到其他的属性值使用。 Display属性值列表： 值 描述 none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元 ...

http://stackoverflow.com/questions/9437584/what-does-webkit-min-device-pixel-ratio-2-stand-for http://stackoverflow.com/questions/16030041/media-query-pixel-density-and-max-width-together http://stackoverflow.com/questions/15975432/webkit-min- ...

CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。 简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然， ...

方法1： <input type=text style="border-style:none"> 方法2： 给input设置border:none;但在iE6下不行，还有边。应该将 border:none; 换成border:0; 这是ie6 的兼容性问题 或者<input type="text" name="sample" border="0"/> 方法3： ...

个人觉得CKEditor中block的功能非常有用，所以希望使block功能默认就是enabled.效果如下： 于是查询了下设置方法。如下： config.startupOutlineBlocks = true; 如果在config中设置可以这样写： CKEDITOR.replace( 'content-editor', { //省去其他配置 startupOutlineBlocks:true ...