随笔分类 -  CSS

摘要：CSS改变了网页的设计主要体现在两方面：（1）使人们可以轻松地改变各种元素的样式，比如字体、颜色、背景颜色等等。（2）使人们可以轻松滴改变网站原有的布局，如三列布局的网站，我们只需改动一点点代码就能改变这三列从左到右的顺序。 之前的几篇CSS随笔，其实都是讲述第（1）点的。对于第（2）点，CSS又是如何去为我们提供这种便利的呢？ CSS2布局的原理：通过指定box相对于父亲容器、其他容器、浏览器窗口的位置来定位的。而平时我们所见的float，其实严格意义上来讲不是布局。它是在CSS1中添加新来的，源于netscape浏览器。float 从netscape1开始，float便用来定义图片< 阅读全文

摘要：float的历史： 最早是Netscape 1引入的， <img src="b5.gif" align="right"/>。后面由HTML 2.0正式引入。能应用float的元素： 以前我们只能对image和table应用float，如今CSS允许我们对任何元素应用float，包括image,p,list等等。float中的margin: 被应用float后的元素，与它临近的元素不会有margin collapse现象。containing block ： 被float的对象，它的containing block为靠它最近的块级元素祖先。 阅读全文

摘要：图1 盒模型 CSS中的盒子模型，我们都知道其组成结构。但是，在使用它时总觉得难以驾驭。 X轴方向： 定律： 1）width指的是盒子中内容的宽度，而不是盒子的宽度。 2）在普通流（ normal flow ）中，块级元素盒子的宽度一定等于该盒子的父容器的width。 3）X轴方向的属性：margin-left, border-left, padding-left, width, padding-right, border-right, margin-right。 其中只有margin-left,margin-right,width可以设置为auto。 X轴方向使用auto： 1）设置三个属. 阅读全文

摘要：<ul> <li>list item one</li> <li>list item two</li> <li>list item three</li> <li>list item four</li></ul>list-style-type： list-style-type:none;list-style-image: 示例：<style type="text/css"> ul{ list-style-image:url(bullet.png); 阅读全文

摘要：hr标签，相信大家都能熟悉，我们一般用它来产生横线的效果。我们可以对它定义“颜色”、“高度”、“宽度”、“边框”等样式。 在此只讨论“颜色”和“边框”对于不同版本浏览器的兼容性。颜色： 火狐、IE7+= ：通过background-color来指定。 IE6-= ：通过color指定。 方案：要为hr指定颜色，同时使用background-color和color。边框： IE7+= ：如不指定border:none，那么浏览器默认会为hr加上一定宽度的边框。 IE6-= ：浏览器默认不会为其加上边框。 方案：显示申明border:none。完整的兼容代码如下：<style type=&q 阅读全文

摘要：对于h1和p，浏览器自动会为他们加上margin-top和margin-bottom。 <h1> Obama says Warren Buffett is right about taxes </h1> <p > CANNON FALLS, Minnesota (Reuters) - Small-town Americans probably don't make as much money as Warren Buffett, but they pay more of their income in taxes, President Barack 阅读全文