搜索
首页web前端css教程前端开发面试题总结之—CSS3

相关知识点

布局、 浮动、 盒子模型、 弹性和模型、 选择器优先级、 居中定位、 兼容性、 hack写法......

题目&答案

  • 如何理解CSS的盒子模型?
    每个HTML元素都是长方形盒子。 (1)盒子模型有两种:IE盒子模型、标准W3C盒子模型;IE的content部分包含了border和pading。 (2)标准W3C盒模型包含:内容(content)、填充(padding)、边界(margin)、边框(border)。

  • link和@import的区别?

    (1)link属于XHTML标签,而@import是CSS提供的。
    (2)页面被加载时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载。
    (3)import只在IE 5以上才能识别,而link是XHTML标签,无兼容问题。
    (4)link方式的样式权重高于@import的权重。
    (5)使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
  • CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?CSS 3新增伪类有哪些?

    id选择器(# myid)
    类选择器(.myclassname)
    标签选择器(p、h1、p)
    相邻选择器(h1 + p)
    子选择器(ul < li)
    后代选择器(li a)
    通配符选择器( * )
    属性选择器(a[rel = "external"])
    伪类选择器(a: hover, li: nth - child)
    可继承: font-size font-family color, UL LI DL DD DT;
    不可继承 :border padding margin width height ;
    优先级就近原则,样式定义最近者为准,载入样式以最后载入的定位为准。
    优先级为:
       !important >  id > class > tag  
       important 比 内联优先级高
    CSS3新增伪类举例:
    p:first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素。
    p:last-of-type  选择属于其父元素的最后<p>元素的每个<p>元素。
    p:only-of-type  选择属于其父元素唯一的<p>元素的每个<p>元素。
    p:only-child    选择属于其父元素的唯一子元素的每个<p>元素。
    p:nth-child(2)  选择属于其父元素的第二个子元素的每个<p>元素。
    :enabled、:disabled 控制表单控件的禁用状态。
    :checked  单选框或复选框被选中。
  • 如何居中p,如何居中一个浮动元素?
    给p设置一个宽度,然后添加margin:0 auto属性

    p{
        width:200px;
        margin:0 auto;
     }
  • 如何居中一个浮动元素
    确定容器的宽高,如宽500、高 300的层,设置层的外边距

     .p { 
      Width:500px ; height:300px;//高度可以不设
      Margin: -150px 0 0 -250px;
      position:relative;相对定位
      background-color:pink;//方便看效果
      left:50%;
      top:50%;
    }
  • 经常遇到的浏览器的兼容性有哪些?原因、解决方法是什么?

    (1)png24为的图片在IE6浏览器上出现背景,解决方案是做成PNG8。
    (2)浏览器默认的margin和padding不同,解决方案是加一个全局的*{margin:0;padding:0;}来统一。
    (3)IE6双边距bug:块属性标签float后,又有横行的margin情况下,在IE 6显示margin比设置的大。
    (4)浮动ie产生的双边距问题:块级元素就加display:inline;行内元素转块级元素display:inline后面再加display:table。
          .bb{
           background-color:#f1ee18;        /*所有识别*/
          .background-color:#00deff\9;      /*IE6、7、8识别*/
          +background-color:#a200ff;        /*IE6、7识别*/
          _background-color:#1e0bd1;        /*IE6识别*/
          }
  • 常用Hack的技巧:

    (1)IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;
    (2)Firefox下,只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
    (3)IE下,even对象有x,y属性,但是没有pageX,pageY属性;
    (4)Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。解决方法是条件注释,缺点是在IE浏览器下可能会增加额外的HTTP请求数。
    (5)Chrome 中文界面下默认会将小于12px的文本强制按照12px显示,可通过加入 CSS属性-webkit-text-size-adjust: none;来解决。
    (6)超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不再具有hover和active了,解决方法是改变CSS属性的排列顺序:
    L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}
  • 列出display的值,说明它们的作用。position的值里,relative和absolute定位原点是?

    display的值:
    block 像块类型元素一样显示。
    none 缺省值。像行内元素类型一样显示。
    inline-block 像行内元素一样显示,但其内容像块类型元素一样显示。
    list-item 像块类型元素一样显示,并添加样式列表标记。
    relative和absolute定位原点:
    absolute:生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。
    relative:生成相对定位的元素,相对于其正常位置进行定位。
  • 为什么要初始化CSS样式?

    因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。
    最简单的初始化方法就是:* {padding: 0; margin: 0;} (笔者不建议这样)
    淘宝的样式初始化: 
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
    body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
    h1, h2, h3, h4, h5, h6{ font-size:100%; }
    address, cite, dfn, em, var { font-style:normal; }
    code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
    small{ font-size:12px; }
     ul, ol { list-style:none; }
    a { text-decoration:none; }
    a:hover { text-decoration:underline; }
    sup { vertical-align:text-top; }
    sub{ vertical-align:text-bottom; }
    legend { color:#000; }
    fieldset, img { border:0; }
    button, input, select, textarea { font-size:100%; }
    table { border-collapse:collapse; border-spacing:0; }
  • CSS是怎样定义权重规则的?

    以下是权重的规则:标签的权重为1,class的权重为10,id的权重为100,以下例子是演示各种定义的权重值:
    /*权重为1*/
    p{
    }
    /*权重为10*/
    .class1{
    }
    /*权重为100*/
    #id1{
    }
    /*权重为100+1=101*/
    #id1 p{
    }
    /*权重为10+1=11*/
    .class1 p{
    }
    /*权重为10+10+1=21*/
    .class1 .class2 p{
    } 
    如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现。
  • 如何理解表现与内容相分离?

    表现与结构相分离简单的说就是HTML中只有标签元素 表现完全是由CSS文件控制的。
  • 如何定义高度为1px的容器?

    p{
    heigh:1px; 
    width:10px; 
    background:#000; 
    overflow:hidden
    } 
    IE 6下这个问题是默认行高造成的,overflow:hidden | zoom:0.08 | line- height:1px这样也可以解决。
  • 如何解决IE 6的3px问题?

    _zoom:1;  margin-left: value; _margin-left: value-3px;
  • Firefox下文本无法撑开容器的高度,如何解决?

    清除浮动 .clear{ clear:both; height:0px; overflow:hidden;}
  • 怎么样才能让层显示在Flash之上呢?

    解决的办法是给Flash设置透明属性
    <param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />
  • cursor:hand在FF下不显示小手,如何解决?
    cursor; pointer;

  • 在IE中内容会自适应高度,而FF不会自适应高度,怎么办?

    在要自适应高度的层中加一个层,样式为
    .clear{clear:both;font-size:0px;height:1px},
    这样解决有一个小小的问题,高度会多一个像素。还有一种解决方法,给当前层加上一个伪类。
    #test:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
  • 用纯 CSS 创建一个三角形的原理是什么?

    把上、左、右三条边隐藏掉(颜色设为 transparent)
    #demo {
      width:0;
      height: 0;
      border-width: 20px;
      border-style: solid;
      border-color: transparent transparent red transparent;
    }
  • 如何设计一个满屏“品”字布局?

    简单的方式:
      上面的p宽100%,
      下面的两个p分别宽50%,
      用float或inline使其不换行。
  • 怎么让Chrome支持小于12px 的文字?

    body{-webkit-text-size-adjust:none}
  • 前端页面有哪三层构成,分别是什么?作用是什么?

    最准确的网页设计思路是把网页分成三个层次,即:结构层、表示层、行为层。
    网页的结构层(structural layer)由HTML或XHTML之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P 标签表达了这样一种语义:“这是一个文本段。”
    网页的表示层(presentation layer)由CSS负责创建。 CSS对“如何显示有关内容”的问题做出了回答。
    网页的行为层(behavior layer)负责回答“内容应该如何对事件做出反应”这一问题。这是JavaScript语言和DOM主宰的领域。
  • ::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。

    单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。
    伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的,用于区分伪类和伪元素。但是伪类兼容现存样式,浏览器需要同时支持旧的伪类,比如:first-line、:first-letter、:before、:after等。
    对于CSS2之前已有的伪元素,比如:before,单冒号和双冒号的写法::before作用是一样的。
    提醒,如果你的网站只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全。
  • 现在HTML5中css3可以写出一个旋转的立方体,请写出要用到的CSS属性。

    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(30deg) rotateX(10deg);
    -webkit-animation:  rot 4s linear infinite;
  • 介绍一下 Sass 和 Less 是什么?它们有何区别?

    Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写,而且更容易阅读。Sass语法类似与Haml,属于缩排语法(makeup),用意就是为了快速写Html和Css。
    Less一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js)。
    区别:
    (1))Sass是基于Ruby的,是在服务端处理的,而Less是需要引入less.js来处理Less代码输出Css到浏览器,也可以在开发环节使用Less,然后编译成Css文件,直接放到项目中,也有Less.app、SimpleLess、CodeKit.app这样的工具,也有在线编译地址。
    (2)变量符不一样,less是@,而Scss是$,而且变量的作用域也不一样,后面会讲到。
    (3)输出设置,Less没有输出设置,Sass提供4中输出选项:nested, compact, compressed 和 expanded。
    (4)Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持。

    常见ie6的浏览器兼容bug(3-5个)?

  • 文字本身的大小不兼容。

    同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff 下实际占高17px,上留白1px,下留白3px,opera下就更不一样了。解决方案:给文字设定 line-height 。确保所有文字都有默认的 line-height 值。
  • IE6吞吃现象。

    上下两个p,上面的p设置背景,却发现下面没有设置背景的p 也有了背景,这就是吞吃现象。对应上面的背景吞吃现象,还有滚动下边框缺失的现象。解决方案:使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。
  • IE6注释bug

    注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案,ie6的这个bug 下,大家会在页面看到猪字出现两遍,重复的内容量因注释的多少而变。
    解决方案:用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。
  • img 下的留白,如下代码:

    <p>
    <img src=“1.jpg” />
    </p>
    把p的border打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,要消除必须这样写
    <p>
    <img src=”1.jpg” /></p>
    后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案:给img设定 display:block。
  • 失去line-height

    <p style=”line-height:20px”><img />文字</p>,很遗憾,在ie6下单行文字 line-height 效果消失了。原因是<img />这个inline-block元素和inline元素写在一起了。
    解决方案:让img 和文字都 float起来。
  • clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层,这样有问题,不仅仅是ff和op下失去margin效果,ie下某些margin值也会失效。

    <p style=”background:red;float:left;”>dd</p>
    <p style=”clear:both;margin-top:18px;background:green”>ff</p>
  • ie 下overflow:hidden对其下的绝对层position:absolute或者相对层 position:relative无效。

    解决方案:给overflow:hidden加position:relative或者position: absolute。
    另,ie6支持overflow-x或者overflow-y的特性,ie7、ff不支持。

更多前端开发面试题总结之—CSS3 相关文章请关注PHP中文网!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
揭开屏幕读取器的神秘面纱:可访问的表格和最佳实践揭开屏幕读取器的神秘面纱:可访问的表格和最佳实践Mar 08, 2025 am 09:45 AM

这是我们在形式可访问性上进行的小型系列中的第三篇文章。如果您错过了第二篇文章,请查看“以:focus-visible的管理用户焦点”。在

将框阴影添加到WordPress块和元素将框阴影添加到WordPress块和元素Mar 09, 2025 pm 12:53 PM

CSS盒子阴影和轮廓属性获得了主题。让我们查看一些在真实主题中起作用的示例,以及我们必须将这些样式应用于WordPress块和元素的选项。

使用智能表单框架创建JavaScript联系表格使用智能表单框架创建JavaScript联系表格Mar 07, 2025 am 11:33 AM

本教程演示了使用智能表单框架创建外观专业的JavaScript表单(注意:不再可用)。 尽管框架本身不可用,但原理和技术仍然与其他形式的建筑商相关。

创建一个具有可满足属性的内联文本编辑器创建一个具有可满足属性的内联文本编辑器Mar 02, 2025 am 09:03 AM

构建内联文本编辑器并不是微不足道的。 该过程首先要使目标元素可编辑,并在此过程中处理潜在的语法异常。 创建您的编辑器 要构建此编辑器,您需要动态修改内容

使您的第一个自定义苗条过渡使您的第一个自定义苗条过渡Mar 15, 2025 am 11:08 AM

Svelte Transition API提供了一种使组件输入或离开文档(包括自定义Svelte Transitions)时动画组件的方法。

使用GraphQL缓存使用GraphQL缓存Mar 19, 2025 am 09:36 AM

如果您最近开始使用GraphQL或审查了其优点和缺点,那么您毫无疑问听到了诸如“ GraphQl不支持缓存”或

比较5个最佳的PHP形式构建器(和3个免费脚本)比较5个最佳的PHP形式构建器(和3个免费脚本)Mar 04, 2025 am 10:22 AM

本文探讨了Envato Market上可用的PHP表单构建器脚本,比较了其功能,灵活性和设计。 在研究特定选项之前,让我们了解PHP形式构建器是什么以及为什么要使用一个。 PHP形式

在node.js中使用multer上传并上传express在node.js中使用multer上传并上传expressMar 02, 2025 am 09:15 AM

该教程通过使用node.js,express和multer构建文件上传系统来指导您。 我们将介绍单个和多个文件上传,甚至演示在MongoDB数据库中存储图像以进行以后的检索。 首先,设置您的projec

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),