Web前端开发中遇见的问题(css)


(1)margin-top和margin-bottom不能正常显示:

父盒子中的子盒子使用margin-top不管用,需要在子盒子上加

{height:0;overflow:hidden}

(2)父盒子没有设置高度,子盒子都都设置了浮动,此时需要清除浮动

方法一:再加一

个子元素,其css设置clear:left|right|both;

方法二:给父元素设置:

.clearfix::after{

content:”,

height:0;

line-height:0;

clear:both;

display:block;

visibility:hidden;

}

.clearfix{zoom:1;}

(3)几个隐藏的占位问题

overflow:hidden;元素隐藏,超出部分占i原来位置;

display:none;元素隐藏,元素占原来位置;

visibility:hidden;元素隐藏,但是占用原来位置;

visibility:visible;

(4)opacity设置半透明效果

opacity:0.5;

filter:alpha(opacity=50);//兼容IE

(5)类名定义问题:

类名不能以数字开头或者以纯数字开头定义类名;

类名不推荐(不允许)使用汉字定义类名;

不能以特殊符号或者以特殊符号开头定义类名(_除外);

不要使用标签名定义类名

(6)设置font-family:”“;要用”“括起来。可以一次设置多个字体,字体与字体之间使用逗号隔开。

防止某些浏览器不识别某些字体,会按设置的字体顺序查找,找到能显示的字体。

(7)font属性连写中,必须有font-size和font-family

(8)vertical-align:baseline/top/middle/bottom;

只适用于图片和表格

(9)只有定位的元素才能设置z-index值

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 4,738评论 0 1
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 6,602评论 0 8
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,719评论 32 459
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 5,916评论 0 6

友情链接更多精彩内容