<sup id="sjju3"><noscript id="sjju3"></noscript></sup>
    <big id="sjju3"></big>

  • <blockquote id="sjju3"></blockquote>
    <blockquote id="sjju3"></blockquote>

      <td id="sjju3"></td>

      <big id="sjju3"></big>
        <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
      1. 浅谈CSS中盒模型的理解

          发布时间:2019-02-19 15:40:12   作者:一只菜鸟攻城狮啊   我要评论

        这篇文章主要介绍了浅谈CSS中盒模型的理解,小编觉得挺不错?#27169;?#29616;在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

        今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下

        ( 摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助 )

        1.基本的盒模型知识

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

        为了方便大家理解?#32479;?#35797;,我写了一个小Demo放上来方便大?#39029;?#35797;

        <!DOCTYPE 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>Document</title>
            <style>
                /* 显示盒模型   */
                /* 盒模型计算规则
                元素框的总宽度 = 元素(element)的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度;
                元素框的总高度 = 元素(element)的height + padding的上下边距的值 + margin的上下边距的值 + border的上下宽度。
                元素的总宽度 = 元素(element)的width + padding的左边距和右边距的值 + border的左右宽度;
                元素的总高度 = 元素(element)的height + padding的上下边距的值 + border的上下宽度。
                */
            .box{
                /* 高度和宽度 */
                height: 100px;
                width: 100px;
                background-color: yellow;
                /* 边框的宽度 */
                border: 10px solid green;
                /* 内边距 */
                padding: 10px;
                /* 外边距*/
                margin: 100px;
            }
            /* 此处引入子div只是为了显示content的区域 */
            .child{
                height: 100%;
                width: 100%;
                background-color: red;
            }
            </style>
        </head>
        <body>
            <div class="box">
                <div class="child"></div>
            </div>
        </body>
        </html>

        运行结果如下图:

        大家可以尝试更改一下其中的高度宽度,内边距外边距的值来更加直观的感受盒模型

        2.盒模型的合并

        当两个盒模型进行合并时,需要注意一下:

        当两个上下方向相邻的元素框垂直相遇时,外边距会合并,合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值 ,如图:

        当然外边距合并其实也?#20889;?#22312;的意义,如下图:

        特别注意: 只有普通文档流中块框的垂直外边距才会发生外边距合并。?#24515;?#26694;、浮动框或绝对定位之间的外边距不会合并。

        3.box-sizing属性介绍

        box-sizing属性是用户界面属性里的一种,之所以介绍它,是因为这个属性跟盒子模型有关,而且在css reset中有可能会用到它。

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

        (1) content-box ,默?#29616;擔?#21487;以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。

        即我们所说的标准盒模型

        总宽度=margin+border+padding+width

        (2) border-box , 设置的width值其实?#27973;齧argin外的border+padding+element的总宽度。盒子的width包含border+padding+内容

        即我们所说的怪异盒模型

        总宽度=margin+width

        很多CSS框架,都会对盒子模型的计算方法进行简化。

        (3) inherit , 规定应从父元素继承 box-sizing 属性的值

        关于border-box的使用:

        1 一个box宽度为100%,又想要两边?#24515;?#38388;距,这时候用就比较好

        2 全局设置 border-box 很好,首先它符?#29616;本酰?#20854;次它可以省去一次又一次的加加减减,它还有一个关键作用——让有边框的盒子正常使用百分比宽度。

        4.?#23548;?#24320;发中常遇到的问题

        margin越界(第一个子元素的margin-top和最后一个子元素的margin-bottom的越界问题)

        以第一个子元素的margin-top 为例:

        ?#22791;?#20803;素没有边框border时,设置第一个子元素的margin-top值的时候,会出现margin-top?#23548;?#22312;父元素上的现象,解决方法有四个:

        (1)给父元素加边框border (副作用)

        (2)给父元素设置padding值  (副作用)

        (3)父元素添加 overflow:hidden (副作用)

        (4)父元素加前置内容生成。(推荐)

        以第四种方法为例:

        .parent {
             width : 500px;
             height : 500px;
             background-color : red;       
        }
        .parent : before {
             content : " ";
             display : table;
        }
        
        .child {
             width : 200px;
             height : 200px;
             background-color : green;
             margin-top : 50px;
        }
        <div class="parent">
            <div class="child"></div> 
        </div>

        好啦,目前就这些,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

        相关文章

        • css 盒模型 文档流 几种清除浮动的方法实例详解

          这篇文章主要介绍了css 盒模型 文档流 几种清除浮动的方法实例详解,需要的朋友可以参考下
          2018-09-10
        • 详解CSS3伸缩布局盒模型Flex布局

          这篇文章主要介绍了详解CSS3伸缩布局盒模型Flex布局的相关资?#24076;?#23567;编觉得挺不错?#27169;?#29616;在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
          2018-08-20
        • 详解CSS 怪异盒模型和标准盒模型

          这篇文章主要介绍了详解CSS 怪异盒模型和标准盒模型,小编觉得挺不错?#27169;?#29616;在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
          2017-12-22
        • css3 盒模型以及box-sizing属性全面了解

          下面小编就为大家带来一篇css3 盒模型以及box-sizing属性全面了解。小编觉得挺不错?#27169;?#29616;在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
          2016-09-20
        • CSS使用盒模型实例讲解

          下面小编就为大家带来一篇CSS使用盒模型实例分析。小编觉得挺不错?#27169;?#29616;在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
          2016-07-20
        • 解析CSS的box model盒模型及其内的子元素布局控制

          盒模型是CSS控制布局的主要方式之一,尤其是内部的元素排列控制,这里我们将来解析CSS的box model盒模型及其内的子元素布局控制,需要的朋友可以参考下
          2016-07-01
        • 图文讲解CSS的Box Model盒模型中的边距

          盒模型在Web页面布局中很重要,而对边距的把控是掌握盒模型的关键,下面我们就来以图文讲解CSS的Box Model盒模型中的边距
          2016-06-21
        • CSS3弹性盒模型flex box快速入门心得(必看篇)

          下面小编就为大家带来一篇CSS3弹性盒模型flex box快速入门心得(必看篇)。小编觉得挺不错?#27169;?#29616;在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
          2016-05-24
        • CSS弹性盒模型flex在布局中的应用详解

          下面小编就为大家带来一篇CSS弹性盒模型flex在布局中的应用详解。小编觉得挺不错?#27169;?#29616;在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
          2016-05-24
        • 几个CSS3的flex弹性盒模型布局的简单例子演示

          这篇文章主要介绍了几个CSS3的flex弹性盒模型布局的简单例子演示,flex布局是迄今为止最强大的web布局方式,需要的朋友可以参考下
          2016-05-12

        最新评论

        2018白小姐一肖中特马
        <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
        <big id="sjju3"></big>

      2. <blockquote id="sjju3"></blockquote>
        <blockquote id="sjju3"></blockquote>

          <td id="sjju3"></td>

          <big id="sjju3"></big>
            <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
          1. <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
            <big id="sjju3"></big>

          2. <blockquote id="sjju3"></blockquote>
            <blockquote id="sjju3"></blockquote>

              <td id="sjju3"></td>

              <big id="sjju3"></big>
                <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
              1. 足彩奖金计算公式 广东象棋 陕西快乐10分开奖直播 云鼎娱乐场投注 广西快乐十分同步直播 白小姐一肖一码欺欺准待 今日青海11选5开奖结果 qq游戏有十三水 新疆25选7开奖池多少钱 赛马会工作证 智诚合买大厅 新疆11选5中奖助手 上海快三在线稳定计划 竞彩篮球让分胜负8乘9 黑龙江36选711月7日