• 什么是盒子模型？IE盒模型与Chrome盒模型的区别？box-sizing的用法

    所有的HTML元素可以看作盒子，它包括四部分组成。每个元素在页面中占位大小 = content + padding + margin + border。

     

    1）Margin(外边距)清除边框外的区域，外边距是透明的。

    2）Border(边框)围绕在内边距和内容外的边框。

    3）Padding(内边距)清除内容周围的区域，内边距是透明的。

    4）Content(内容)盒子的内容，显示文本和图像。

     W3C盒模型和怪异盒模型的区别？

    标准盒模型（W3C）内容大小等于content大小。padding和border不被包含在定义的width和height之内。盒子的实际宽度=设置的width+padding+border

    IE盒模型（怪异盒模型）内容大小等于content + padding + border的总和。padding和border被包含在定义的width和height之内。盒子的实际宽度=设置的width（padding和border不会影响实际宽度）

     

    box-sizing可以设置盒子的类型

    box-sizing: content-box || border-box || inherit

    box-sizing:border-box，为IE盒模型（怪异盒模型）。

    box-sizing:content-box，为标准盒模型（W3C盒模型）例如：Firefox/Chrome。

    box-sizing:inherit，规定应从父元素继承 box-sizing 属性的值

    一般默认浏览器使用标准盒模型。

    例子：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.       .box1{
    10.         height:150px;
    11.         width:150px;
    12.         padding: 50px;
    13.         margin: 100px;
    14.         border: solid 5px green;
    15.         background-color: brown;
    16.         box-sizing: content-box; 
    17.       }
    18.       .box2{
    19.         height:150px;
    20.         width:150px;
    21.         padding: 50px;
    22.         margin: 100px;
    23.         border: solid 5px green;
    24.         background-color: black;
    25.         box-sizing: border-box;
    26.       }
    27.       .box3{
    28.         height:50px;
    29.         width:50px;    
    30.         padding: 10px;
    31.         border:1px solid red;
    32.         background-color: green;
    33.         box-sizing: inherit;
    34.       }
    35.  
    36.       .box4{
    37.         height:50px;
    38.         width:50px;    
    39.         padding: 10px;
    40.         border:1px solid red;
    41.         background-color: green;
    42.         box-sizing: inherit;
    43.       }
    44.     style>
    45. head>
    46. <body>
    47.     <div class="box1">
    48.         <div class="box4">div>
    49.     div>
    50.     <div class="box2">
    51.         <div class="box3">div>
    52.     div>
    53. body>
    54. html>

     

  • 相关阅读:
    解决若依框架多次list查询时,分页失效问题
    MongoDB基础之文档DML操作
    如何进行小程序关键词优化与长期维护？
    HCIA-HarmonyOS Application Developer 课程大纲
    leetcode做题笔记134. 加油站
    [GN] 车300笔试记
    QT 绘画功能的时钟
    sqli-labs/Less-46
    力扣刷题记录162.1-----127. 单词接龙
    Ant Design of React组件引用及路由跳转
  • 原文地址：https://blog.csdn.net/qq_36507046/article/details/127335616