css+div小知识点

0.body里设置一个div包含所有的div,并把最外层的这个div命名为container,设置margin:0;padding:0;

1.先搭结构,在写样式,比如:最外面一个div,里面在套多少个div,左浮动,右浮动...

2.切图原则:图片越小越好(加载速度快)

3.块级元素经常通过左右浮动来进行水平排列

(1)为了保证在各个浏览器中,多个div在同一行水平排列而不会出现交叉部分,可以把每一个div都设置一个float:left的属性

(2)水平居中的属性

margin:0 auto; //上下为0,左右自动

(3).news a:link,.news a:visited{color:#666;text-decoration:none;}

.news a:hover{text-decoration:underline;}

(4)把溢出div框的部分隐藏

overflow:hidden

Q&A

1.问题:用filebug查看,出现元素的css样式被划掉

分析:子元素的权限不够(定义子元素时没有带着父元素)

解决:.a{background-color:red}-->.news a{background-color:red}//带着父元素就可以了

(4)引入背景图片,并水平方向重复(repeat-x背景图片水平方向重复)

#foot{width:100%;height:310px;background:url(/images/foot_bg.png) repeat-x #898989;}

背景图片不铺是:no-repeat

(5)a链接水平排列

li{float:left}

(6)把a标签变块级元素并水平排列

a{width:20px;height:20px;display:block;float:left} //可以用来显示并排的小图标

(7)css精灵 一些图标可以合并为一张图,比起传统的切图,加载速度更快

(8)出现某个div没有显示背景颜色,可能是它前面的div没有设置高度或者宽度.

(9)一般情况下,上面的div浮动后,下面的div就会占据它的位置,为了清除这种影响,可以使用clear:xxx这个属性,xxx代表both,left,right...,表示清除上面对象左右浮动对我的影响,左浮动,右浮动对我的影响

技巧:当浮动了很多元素之后,突然需要另起一行时,可以制作一个空白的div标签,为其设置clear:both;属性,清除上面div左右浮动对自己造成的影响.

(10)文本居中对齐

text-align:center

(11)内边距:加了内边距,div会增加内边距的宽度或高度,父div应该减去相应的内边距的宽度或高度,不然可能会出现div下掉的情况

(12)行高(行间的距离) line-height:xxpx;