面试题收集

本文详细介绍了CSS盒模型的组成及两种模型的区别,包括标准模型和IE模型。此外,还探讨了如何通过CSS设置这两种模型,以及如何使用JavaScript获取盒模型的宽和高。最后,讲解了边距重叠的概念及BFC(块级格式化上下文)的解决方案。

1.如何理解标签语义,它有哪些好处?

标签语义化就是给某块内容用上最恰当合适的标签,HTMl标签语义化,简单来说,就是让标签有含义,给某块内容用上一个最恰当最合适的标签,使页面有良好的结构,页面元素有含义,不论是谁都能够看懂这块内容是什么,并且有利于搜索引擎。 标签语义化的好处:1. HTML结构清晰 2. 代码可读性较好 3. 无障碍阅读 4. 搜索引擎可以根据标签的语言确定上下文和权重问题 5. 移动设备能够更完美的展现网页(对css支持较弱的设备) 6. 便于团队维护和开发

 

2.css的盒模型有那些?

CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。

  下面本文章将会从以下几个方面谈谈盒模型。

  • 基本概念:标准模型 和IE模型
  • CSS如何设置这两种模型
  • JS如何设置获取盒模型对应的宽和高
  • 实例题(根据盒模型解释边距重叠)
  • BFC(边距重叠解决方案)

 

基本概念

盒模型的组成大家肯定都懂,由里向外content,padding,border,margin.

盒模型是有两种标准的,一个是标准模型,一个是IE模型。

 

 从上面两图不难看出在标准模型中,盒模型的宽高只是内容(content)的宽高,

而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。

 

css如何设置两种模型

这里用到了CSS3 的属性 box-sizing

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

 

JS获取宽高

通过JS获取盒模型对应的宽和高,有以下几种方法:

为了方便书写,以下用dom来表示获取的HTML的节点。

1.  dom.style.width/height 

  这种方式只能取到dom元素内联样式所设置的宽高,也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话,通过这种方法是获取不到dom的宽高的。

 2. dom.currentStyle.width/height 

  这种方式获取的是在页面渲染完成后的结果,就是说不管是哪种方式设置的样式,都能获取到。

  但这种方式只有IE浏览器支持。

 3. window.getComputedStyle(dom).width/height

  这种方式的原理和2是一样的,这个可以兼容更多的浏览器,通用性好一些。

 4. dom.getBoundingClientRect().width/height

  这种方式是根据元素在视窗中的绝对位置来获取宽高的

 5.dom.offsetWidth/offsetHeight

  这个就没什么好说的了,最常用的,也是兼容最好的。

 

边距重叠

什么是边距重叠

如下图,父元素没有设置margin-top,而子元素设置了margin-top:20px;可以看出,父元素也一起有了边距。

上图的代码

 

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .demo{
            height:100px;
            background: #eee;
        }
        .parent{
            height:200px;
            background: #88f;
        }
        .child{
            height:100px;
            margin-top:20px;
            background: #0ff;
            width:200px;
        }
    </style>
</head>
<body>
    <section class="demo">
        <h2>此部分是能更容易看出让下面的块的margin-top。</h2>
    </section>
    <section class = "parent">
        <article class="child">
            <h2>子元素</h2>
            margin-top:20px;
        </article>
        <h2>父元素</h2>
            没有设置margin-top
    </section>
</body>
</html>

复制代码

 

边距重叠解决方案(BFC)

首先要明确BFC是什么意思,其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”

BFC的原理

  1. 内部的box会在垂直方向,一个接一个的放置
  2. 每个元素的margin box的左边,与包含块border box的左边相接触(对于从做往右的格式化,否则相反)
  3. box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠
  4. bfc的区域不会与浮动区域的box重叠
  5. bfc是一个页面上的独立的容器,外面的元素不会影响bfc里的元素,反过来,里面的也不会影响外面的
  6. 计算bfc高度的时候,浮动元素也会参与计算

 怎么取创建bfc

  1. float属性不为none(脱离文档流)
  2. position为absolute或fixed
  3. display为inline-block,table-cell,table-caption,flex,inine-flex
  4. overflow不为visible
  5. 根元素

应用场景

  1. 自适应两栏布局
  2. 清除内部浮动 
  3. 防止垂直margin重叠

看一个垂直margin重叠例子

代码

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .top{
            background: #0ff;
            height:100px;
            margin-bottom:30px;
        }
        .bottom{
            height:100px;
            margin-top:50px;
            background: #ddd;
        }
    </style>
</head>
<body>

    <section class="top">
        <h1>上</h1>
        margin-bottom:30px;
    </section>
    <section class="bottom">
        <h1>下</h1>
        margin-top:50px;
    </section>

</body>
</html> 

复制代码

 

 效果图

 用bfc可以解决垂直margin重叠的问题

关键代码

复制代码

<section class="top">
        <h1>上</h1>
        margin-bottom:30px;
    </section>

    <!-- 给下面这个块添加一个父元素,在父元素上创建bfc -->
    <div style="overflow:hidden">
        <section class="bottom">
            <h1>下</h1>
            margin-top:50px;
        </section>
    </div>

复制代码

 

效果图 

3.css兼容性的问题?

对于某些支持受限的属性,针对不同的浏览器添加相应的前缀,比如-webkit-、-o-、-moz-。

不同浏览器默认的内外边距不同的问题 ;

不同浏览器关于高度问题:设置hight:auto;或设置overflow:hidden; 

div嵌套p时,出现空白行问题:div中显示<p>文本</p>,ff、oprea、Chrome:top和bottom都会出现空白行,但是在ie下不会出现空白行。

解决:设置p的margin:0px,再设置div的padding-top和padding-bottom。

ul标签默认值的问题 : ul标签在ff中默认是有padding值的,而在ie中只有margin有值

 解决: 定义ul{margin:0;padding:0;}就能解决大部分问题 

4.css的选择符有哪些,优先级如何计算,哪些属性可以继承?

哪些可以继承呢
可以的有 font-size font-family color  
不可以的有 border padding margin background-color width height等


优先级算法计算的问题:

在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。
选择符Specificity值列表:规则:
1. 行内样式优先级Specificity值为1,0,0,0,高于外部定义。
如:<div style=”color: red”>sjweb</div>
外部定义指经由<link>或<style>标签定义的规则;
2.!important声明的Specificity值最高;
3.Specificity值一样的情况下,按CSS代码中出现的顺序决定,后者CSS样式居上;
4.由继续而得到的样式没有specificity的计算,它低于一切其他规则(比如全局选择符*定义的规则)。
算法:当遇到多个选择符同时出现时候
按选择符得到的Specificity值逐位相加,
{数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}
就得到最终计算得的specificity,
然后在比较取舍时按照从左到右的顺序逐位比较。
实例分析:
1.div { font-size:12px;} 分析:  1个元素{ div},Specificity值为0,0,0,1 
2.body div p{color: green;} 分析:3个元素{ body div p },Specificity值为0,0,0,3   
3.div .sjweb{ font-size:12px;} 分析:  1个元素{ div },Specificity值为0,0,0,1 1个类选择符{.sjweb},Specificity值为0,0,1, 0 最终:Specificity值为 0,0,1,1
4.Div # sjweb { font-size:12px;} 分析:  1个元素{ div },Specificity值为0,0,0,1 1个类选择符{.sjweb},Specificity值为0,1,0, 0 最终:Specificity值为 0,1,0,1 5.html > body div [id=”totals”] ul li > p {color:red;} 分析: 
6个元素{ html body div ul li p}  Specificity值为0,0,0,61个属性选择符{ [id=”totals”] }      Specificity值为0,0,1,0 2个其他选择符{ >  > }            Specificity值为0,0,0,0 最终:Specificity值为 0,0,1,6   
用!important可以改变优先级别为最高,其次是style对象,然后是id > class >tag ,另外在同级样式按照申明的顺序后出现的样式具有高优先级

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值