html盒子模型子元素怎么水平占满父元素_立下flag）每日10道前端面试题18 关于【盒模型】十问...

最新推荐文章于 2024-09-12 00:57:06 发布

丁当响

最新推荐文章于 2024-09-12 00:57:06 发布

阅读量113

点赞数

文章标签： html盒子模型子元素怎么水平占满父元素

本文链接：https://blog.csdn.net/weixin_31995251/article/details/112358323

版权

第一问：什么是盒模型？

可以说，页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距(margin)、边框(border)、填充(padding)、内容(content)。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。

但是，盒模型有标准盒模型和IE的盒模型。如果你打出来这两种，

第二问：两者的区别是什么？

我们先来看两张图：

标准的(W3C)盒模型：

IE盒模型：

第三问：怎么设置这两种模型呢？

很简单，通过设置 box-sizing:content-box(W3C)/border-box(IE)就可以达到自由切换的效果。

第四问JS怎么获取和设置盒模型的宽高呢，你能想到几种方法

第一种：

dom.style.width/height

这种方法只能获取使用内联样式的元素的宽和高。

第二种：

dom.currentStyle.width/height

这种方法获取的是浏览器渲染以后的元素的宽和高，无论是用何种方式引入的css样式都可以，但只有IE浏览器支持这种写法。

第三种：

window.getComputedStyle(dom).width/height

这种方法获取的也是浏览器渲染以后的元素的宽和高，但这种写法兼容性更好一些。

第四种：

dom.getBoundingClientRect().width/height

这种方法经常使用的场所是，计算一个元素的绝对位置(相对于视窗左上角)，它能拿到元素的left、top、width、height 4个属性。

第五问：什么是边距重叠？什么情况下会发生边距重叠？如何解决边距重叠？

边距重叠：两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。

父子关系的边距重叠：



<section class="box" id="fat">
  <style type="text/css">#fat {background-color: #f00;overflow: hidden;
      }#fat .child {margin-top: 10px;height: 100px;background-color: blue;
      }   style>
  <article class="child">article>
section>

同级关系的重叠：


<section class="fat">
  <style type="text/css">.fat {background-color: #ccc;
      }.fat .child-one {width: 100px;height: 100px;margin-bottom: 30px;background-color: #f00;
      }.fat .child-two {width: 100px;height: 100px;margin-top: 10px;background-color: #345890;
      }style>
  <div class="child-one">div>
  <div class="child-two">div>
section>

解决方法就是生成BFC

第六问：什么是BFC？

BFC的基本概念–BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。

第七问：那么BFC的原理是什么呢？

内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定。(完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠(塌陷)，与方向无关。)
每个元素的左外边距与包含块的左边界相接触(从左向右)，即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界)
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

第八问：BFC由什么条件创立?

float属性不为none
position属性为absolute或fixed
display属性为inline-block、table-cell、table-caption、flex、inline-flex
overflow属性不为visible(- overflow: auto/ hidden;)

总结：pdfo

第九问：BFC的使用场景有哪些呢

可以用来自适应布局。


    <section id="layout">
        <style media="screen">#layout{background: red;
          }#layout .left{float: left;width: 100px;height: 100px;background: #664664;
          }#layout .right{height: 110px;background: #ccc;overflow: auto;
          }style>
        <div class="left">div>
        <div class="right">div>
        
    section>

可以清除浮动：(塌陷问题)


<section id="float">
    <style media="screen">#float{background: #434343;overflow: auto;
      }#float .float{float: left;font-size: 30px;
      }style>
    <div class="float">我是浮动元素div>
section>

解决垂直边距重叠：

<section id="margin">
    <style>#margin{background: pink;overflow: hidden;
        }#margin>p{margin: 5px auto 25px;background: red;
        }#margin>div>p {margin: 5px auto 20px;background: red;
        }style>
    <p>1p>
    <div style="overflow:hidden">
        <p>2p>
    div>
    <p>3p>
    
section>

第十问清除浮动的方法(最常用的4种)

这时候很多人会想到新建标签clear：both和float 方法，但是这两种方法并不推荐使用！

什么是clear：both

clear：both：本质就是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来

额外标签法(在最后一个浮动标签后，新加一个标签，给其设置clear：both；)(不推荐)

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>.fahter{width: 400px;border: 1px solid deeppink;
    }.big{width: 200px;height: 200px;background: darkorange;float: left;
    }.small{width: 120px;height: 120px;background: darkmagenta;float: left;
    }.footer{width: 900px;height: 100px;background: darkslateblue;
    }.clear{clear:both;
    }style>
head>
<body>
    <div class="fahter">
        <div class="big">bigdiv>
        <div class="small">smalldiv>
        <div class="clear">额外标签法div>
    div>
    <div class="footer">div>
body>
html>

如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。

优点：通俗易懂，方便

缺点：添加无意义标签，语义化差

不建议使用。

父级添加overflow属性(父元素添加overflow:hidden)(不推荐)

通过触发BFC方式，实现清除浮动

.fahter{
    width: 400px;
    border: 1px solid deeppink;
    overflow: hidden;
}

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

不推荐使用

使用after伪元素清除浮动(推荐使用)


.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
 
<body>
    <div class="fahter clearfix">
        <div class="big">bigdiv>
        <div class="small">smalldiv>
        
    div>
    <div class="footer">div>
body>

优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

推荐使用

使用before和after双伪元素清除浮动


 .clearfix:after,.clearfix:before{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;
}
 
 <div class="fahter clearfix">
        <div class="big">bigdiv>
        <div class="small">smalldiv>
    div>

 <div class="footer">div>

优点：代码更简洁

缺点：用zoom:1触发hasLayout.

推荐使用

浮动父元素

img{
  width:50px;
  border:1px solid #8e8e8e;
  float:left;
}
<div style="float:left">
  <img src="images/search.jpg"/>
  <img src="images/tel.jpg"/>
  <img src="images/weixin.png"/>
  <img src="images/nav_left.jpg"/>
div>

这种方式也不推荐，了解即可。如果有不对的地方欢迎留言交流与补充