之前写了几个项目,css也遇到了几个问题,在这里,我还是希望回顾和思考我以前遇到的问题。一下是我的总结
1.div高度崩塌问题高度无法自适应,即当div内部元素使用浮动时,父类div的高度为0;
解决:
(1)为父类设置固定高度,但这样会使父类失去自适应高度的功能。
(2)为父类也设置浮动。
(3)为父类css增加overflow;auto;
2.文字与图片对齐问题,文字和图片不在同一高度。
解决:
对文字和图片设置vertical-align:top;或是vertical-align:middle。
3.网页边距留有空白问题
解决:对所有HTML标签进行重置,即设置css
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0; margin: 0;
}
4.清除浮动
解决:
(1)对浮动元素的下一个兄弟元素css设置为clear:both;
(2) 对浮动元素的父元素设置css:display:block;zoom:1;overflow:hidden;
(3) 对浮动父元素设置
#test{zoom:1;}
#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}
5.对连续的字符串进行自动换行
解决:对元素进行设置css:word-wrap:break-word;
6. 对溢出的字符串进行转化省略号
解决:对元素设置css:
width:150px;
white-space:nowrap;//使文本溢出边界不换行强制在一行内显示
overflow:hidden;//对溢出的文本进行截断隐藏
text-overflow:ellipsis;//文本显示为省略号
7. 对鼠标箭头设置成手型
解决:对元素设置css:cursor:pointer;
8. 对文本文字进行垂直居中
解决:对文字设置行高:line-height;
9.对内联元素的宽高进行设置
解决:只需对内联元素设置成块状元素。如设置:display:block;或float 或position等
今天暂时到这,明天继续。。