• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 面试时可能被问到的一些CSS问题

面试时可能被问到的一些CSS问题

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含面试,CSS问题等相关知识,佚名 希望在学习及工作中可以帮助到您

仅以此篇缅怀那些笔试100次,问100次的CSS问题。

问:

  CSS选择符有哪些?哪些属性可以继承?优先级?内联和important哪个优先级高?

选择符

1 通配选择符(*) 表示页面内所有元素的样式 *{font-size:12px;margin:0;padding:0;}
2 类型选择符(body、div、p、span等) 网页中已有的标签类型作为名称的选择符 div{width:10px;height:10px;}
3 群组选择符(,) 对一组对象同时进行相同的样式指派 a:link,a:visited{color:#fff;}
4 层次选择符(空格) 包含选择符对某对象中的子对象进行样式指派 #header top{width:100px;}
5 id选择符(#) id选择符具有唯一性,在页面中不能重复使用 #header{width:300px;}
6 class选择符(.) 可以在页面中重复使用 .title{width:300px;}
7 IEhack选择符(_、*、\0、\9\0;) 兼容不同的浏览器 .title{_width:50px;*height:30px;}

 

 

 

 

可继承的属性


优先级的四大原则

原则1:继承没指定的牛B

demo1:


</style> </p> <p><span class="class3">我是多大字号?</span> <!-- 运行结果:.class3{ font-size: 12px; }-->

demo2:


</style> </p> <p><div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号?</span> </p>
</div> <!--运行结果:.class3{ font-size: 12px; }-->

原则2:#ID > .class > 标签

demo1:


</style> </p> <p><span id="id3" class="class3">我是多大字号?</span> <!--运行结果:#id3 { font-size: 25px; }-->

原则3:越具体越牛B

demo1:


</style> </p> <p><div class="class1">
<p class="class2"> <span class="class3">我是多大字号?</span> </p>
</div> <!--运行结果:.class1 .class2 .class3{font-size: 25px;}-->

原则4:标签#ID > 标签.class

demo1:


</style></p> <p><span id="id3">我是多大字号?</span>
<span class="class3">我是多大字号?</span> <!--运行结果:span#id3{font-size:18px} | span.class3{font-size:18px}-->

最后:当原则之前冲突的时候,原则1 > 原则2 > 原则3 > 原则4

 

!important

IE6到底认不认识!important???

  答:认识,但是有一个小bug。

例如:


</style></p> <p><div id=“ida” class=“classb”>!important测试:18px</div>

加入!important


</style></p> <p><div id=“ida” class=“classb”>!important测试:12px</div>

IE6 BUG:


</style></p> <p><div class=“classA”>!important测试:12px</div>

原因和办法:

  这里在ie6下是12像素的字,而其他浏览器下是18px的字。

  但是当我们把样式改一下,!important放在后面,即.classb{ font-size: 12px;font-size: 18px !important; },那么ie6下和其他浏览器一样也是18px的字。

 

您可能想查找下面的文章:

  • 关于HTML面试题全部汇总
  • 面试时可能被问到的一些CSS问题
  • HTML标签语义化(含H5)
  • 网页设计师如何应聘网页设计职位
  • 「从硅谷回国,我没有任何犹豫」: 专访 Airbnb 中国设计经理 Vivian Wang
  • 成功入职谷歌后,说说我是如何通过2次面试并收到 Offer 的
  • 超详细的 2018 年设计师面试指南
  • 成功跳槽后,我想和你分享这3个经验
  • 作品集准备好了吗?来看高手为你准备的12个作品集设计技巧
  • 我们邀请了搜狐的UE设计组长,教你应聘UE 设计师!

相关文章

  • 2018-08-23如何搭建Web端布局框架?来看滴滴设计团队的超全经验总结!
  • 2018-08-23写给新手的APP结构指南:首页相关(下)
  • 2017-09-22JavaScript利用URL向后台传入中文参数乱码问题解决之道
  • 2017-08-06引入CSS的方式有哪些?link和@import的有何区别应如何选择
  • 2017-08-06sitemesh教程-页面装饰技术原理及应用
  • 2018-08-23从四大维度,全方位剖析APP应该如何设计好「分享功能」
  • 2017-08-06从image/x-png谈ContentType(s)
  • 2018-08-23Facebook 产品设计师:如何提高自己的设计审美?
  • 2018-08-23超人气教程!3分钟教你学会渐变新玩法(2)
  • 2018-08-23小米新品的海报背景,用这个神器可以一键生成!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 如何做图标改版设计?来看58 App的实战案例!
    • 紧跟趋势!聊聊C4D 在电商设计中的实战运用
    • 从“免费试用”模块设计反思UI的设计思路
    • 网易资深视觉设计师:如何系统优化APP?
    • 正在疯狂流行的等轴测图标,千万不要错过
    • 高手的后期课堂!聊聊人像磨皮的基础原理
    • Web设计师如何制作Retina显屏设备的图片
    • 像鲶鱼一样的活着!成为设计师10年后的经验心得
    • 想做出中国风的字体设计?我总结了4个规律!
    • 腾讯实战案例!如何用服务设计打造未来银行?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有