精华内容
下载资源
问答
  • css 盒子模型理解

    2018-06-03 16:37:20
    下面是自己积累和总结的关于css盒子模型的知识^_^,希望初学者有用。一、css盒子模型概念CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距...

    盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局。下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用。

    一、css盒子模型概念

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

    图中最内部的框是元素的实际内容,也就是元素框,紧挨着元素框外部的是内边距padding,其次是边框(border),然后最外层是外边距(margin),整个构成了框模型。通常我们设置的背景显示区域,就是内容、内边距、边框这一块范围。而外边距margin是透明的,不会遮挡周边的其他元素。

    那么,元素框的总宽度 = 元素(element)的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度;

    元素框的总高度 = 元素(element)的height + padding的上下边距的值 + margin的上下边距的值 + border的上下宽度。

    二、css 外边距合并(叠加)

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

    比较容易理解,所以在页面中有时候遇到实际情况是需要考虑这个因素的。当然外边距合并其实也有存在的意义,如下图:

    需要注意的是:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

    css reset 中也会经常用到

    * {
      margin : 0;
      padding : 0;
    }

     

    三、box-sizing属性介绍

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

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

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

      即总宽度=margin+border+padding+width

    (2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容

        即总宽度=margin+width

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

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

    关于border-box的使用:

    1 一个box宽度为100%,又想要两边有内间距,这时候用就比较好
    2 全局设置 border-box 很好,首先它符合直觉,其次它可以省去一次又一次的加加减减,它还有一个关键作用——让有边框的盒子正常使用百分比宽度。

     

    四、实际开发中遇到的和框模型相关的应用及小问题。

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

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

    当父元素没有边框border时,设置第一个子元素的margin-top值的时候,会出现margin-top值加在父元素上的现象,解决方法有四个:

    (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>

    2 浏览器间的盒子模型。

    (1)ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。

    (2)标准盒子模型与IE模型之间的差异:

      标准的盒子模型就是上述介绍的那种,而IE模型更像是 box-sizing : border-box; 其内容宽度还包含了border和padding。解决办法就是:在html模板中加doctype声明。

    3 用盒子模型画三角形

    复制代码
    <!DOCTYPE html>
    <html>
      <head>
        <style>
            .triangle {
                width : 0;
                height: 0;
                border : 100px solid transparent;
                border-top : 100px solid blue; /*这里可以设置border的top、bottom、left、right四个方向的三角*/
            }
        </style>
      </head>
      <body>
        <div class="triangle"></div>
      </body>
    </html>    
    复制代码

    页面显示结果为:

    展开全文
  • 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模型。如下图: CSS盒子模型就是在网页设计中经常用...

    首先,我们来看一看css盒子模型是什么?

    我们可以知道,网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin), CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模型。如下图:
    在这里插入图片描述
    CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

    那么,在知道了css盒子模型是什么之后,对于css盒子模型又该如何理解呢?

    css盒子模型的理解

    我们可以把css盒子模型当成日常中的一个盒子去理解。

    content就是盒子里装的东西,它有高度(height)和宽度(width),可以是图片,可以是文字或者小盒子嵌套,在现实中,内容不能大于盒子,内容大于盒子就会撑破盒子,但在css中,盒子有弹性的,顶多内容太大就会撑大盒子,但是不会损害盒子。

    padding即是填充,就好像我们为了保证盒子里的东西不损坏,填充了一些东西,比如泡沫或者塑料薄膜,填充物有大有小,有软有硬,反应在网页中就是padding的大小了。

    border就是再外一层的边框,因为边框有大小和颜色的属性,相当于盒子的厚度和它的颜色或者材料。

    margin外边距,就是我们的盒子与其他的盒子或者其他东西的距离。假如有很多盒子,margin就是盒子之间直接的距离,可以通风,也美观同时方便取出。

    css盒子模型有两种,一种是W3C盒模型也就是标准模型,另一种是IE盒模型:

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

    css两种盒模型可以用下图分别表示:

    标准模型:
    在这里插入图片描述
    IE盒模型:
    在这里插入图片描述
    从上面图中我们可以明显的看出,IE盒模型的宽度或者高度为content(内容)的宽度和高度,W3C盒模型即标准模型的宽度或者高度为content(内容) + padding (内边距)+ border(边框)

    我们来举一个例子:一个div的宽度和高度为105px,内边距为10px,边框为5px,外边距为30px。W3C盒模型下显示的div所占的总宽度和总高度(包括外边距、边框、内边距、内容)为105 + 102 + 52 + 302 = 195px,IE盒模型下显示的div所占的总宽度和总高度(包括外边距、边框、内边距、内容)为105+ 302 = 165px。

    <style>
    
      .content {background: #eee; height: auto;border: 1px solid black;}
    
      .div {width: 105px;height: 105px;margin: 30px;padding: 15px;border: 5px solid black;}
    
      .div-01 {background: green;}
    
      .div-02 {background: pink;box-sizing: border-box;}
    
    </style>
    
    <div class="content">
    
      <div class="div div-01">W3C盒模型</div>
    
      <div class="div div-02">IE盒模型</div>
    
    </div>
    

    效果如下:
    在这里插入图片描述
    很明显的区别,如果元素的宽度(width)一定的情况下,W3C盒模型的宽度(width)不包括内边距和边框,IE盒模包括,光说没用我们来测试一下:

    <script>
          window.onload = function(){
              var div1 = document.querySelector('.div-01');  // W3C盒模型
              var div2 = document.querySelector('.div-02');  // IE盒模型
              
              console.log("W3C盒模型的宽度",div1.offsetWidth); // W3C盒模型的宽度 145
              console.log("IE盒模型的宽度",div2.offsetWidth);  // IE盒模型的宽度 105
          }
      </script>
    

    首先解释一下offsetWidth/offsetHeight它计算的就是元素content的宽度部分,那么我们就可以利用这个方法来判断元素的width值到底是W3C还是IE模式,很明显通过控制台我们可以知道,W3C盒模型得出的145应该就是width105 + padding15*2 + border5*2的结果,而IE盒模型得出的105就是设置的width105

    以上就是本文的全部内容,希望对大家的学习有所帮助。

    展开全文
  • CSS盒子模型理解

    2018-03-07 20:38:53
    理解CSS盒子模型网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性。这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来...

    理解CSS盒子模型

    • 网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性。
    • 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模型。
    • CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
    • 盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同。

    标准盒子模型  从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。

    ie 盒子模型 从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content,和标准 w3c 盒子模型不同的是:ie 盒子模型的 content 部分包含了 border 和 pading。

    例:一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为 50px,假如用标准 w3c 盒子模型解释,那么这个盒子需要占据的位置为:宽 202+12+102+200=262px、高 202+12102+50=112px,盒子的实际大小为:宽 12+102+200=222px、高 12+102+50=72px;假如用ie 盒子模型,那么这个盒子需要占据的位置为:宽 202+200=240px、高 20*2+50=70px,盒子的实际大小为:宽 200px、高 50px。

    在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

    1、提示:背景应用于由内容和内边距、边框组成的区域。
    2、提示:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。
    3、提示:外边距可以是负值,而且在很多情况下都要使用负值的外边距。
    

    浏览器兼容性

    一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。 虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。

    那我们开发的时候选择哪中盒子模型呢? 肯定是“标准 w3c 盒子模型”。怎么样才算是选择了“标准 w3c 盒子模型”呢?很简单,就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明,那么各个浏览器会根据自己的行为去理解网页,即 ie 浏览器会采用 ie 盒子模型去解释你的盒子,而 ff 会采用标准 w3c 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,假如加上了 doctype 声明,那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。 所以为了让网页能兼容各个浏览器,让我们用标准 w3c 盒子模型。

    CSS3 box-sizing 属性

    定义和用法

    box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 box-sizing有两个值一个是content-box,另一个是border-box。 当设置为box-sizing:content-box时,将采用*标准模式*解析计算,也是默认模式; 当设置为box-sizing:border-box时,将采用*怪异模式*解析计算; 目前使用此属性需要前缀如下:

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

    例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器以怪异模式呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。


    转载链接:链接

    展开全文
  • css盒子模型理解

    2017-03-21 16:54:13
    下面是自己积累和总结的关于css盒子模型的知识^_^,希望初学者有用。 一、css盒子模型概念 CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距...

    盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局。下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用。

    一、css盒子模型概念

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

    图中最内部的框是元素的实际内容,也就是元素框,紧挨着元素框外部的是内边距padding,其次是边框(border),然后最外层是外边距(margin),整个构成了框模型。通常我们设置的背景显示区域,就是内容、内边距、边框这一块范围。而外边距margin是透明的,不会遮挡周边的其他元素。

    那么,元素框的总宽度 = 元素(element)的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度;

    元素框的总高度 = 元素(element)的height + padding的上下边距的值 + margin的上下边距的值 + border的上下宽度。

    二、css 外边距合并(叠加)

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

    比较容易理解,所以在页面中有时候遇到实际情况是需要考虑这个因素的。当然外边距合并其实也有存在的意义,如下图:

    需要注意的是:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

    css reset 中也会经常用到

    * {
      margin : 0;
      padding : 0;
    }

     

    三、box-sizing属性介绍

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

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

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

      即总宽度=margin+border+padding+width

    (2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容

        即总宽度=margin+width

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

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

    关于border-box的使用:

    1 一个box宽度为100%,又想要两边有内间距,这时候用就比较好
    2 全局设置 border-box 很好,首先它符合直觉,其次它可以省去一次又一次的加加减减,它还有一个关键作用——让有边框的盒子正常使用百分比宽度。

     

    四、实际开发中遇到的和框模型相关的应用及小问题。

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

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

    当父元素没有边框border时,设置第一个子元素的margin-top值的时候,会出现margin-top值加在父元素上的现象,解决方法有四个:

    (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>

    2 浏览器间的盒子模型。

    (1)ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。

    (2)标准盒子模型与IE模型之间的差异:

      标准的盒子模型就是上述介绍的那种,而IE模型更像是 box-sizing : border-box; 其内容宽度还包含了border和padding。解决办法就是:在html模板中加doctype声明。

    3 用盒子模型画三角形

    复制代码
    <!DOCTYPE html>
    <html>
      <head>
        <style>
            .triangle {
                width : 0;
                height: 0;
                border : 100px solid transparent;
                border-top : 100px solid blue; /*这里可以设置border的top、bottom、left、right四个方向的三角*/
            }
        </style>
      </head>
      <body>
        <div class="triangle"></div>
      </body>
    </html>    
    复制代码

    页面显示结果为:

    展开全文
  • css盒模型有两种:IE盒模型和标准盒模型。 2、两种盒模型的区别 在IE盒模型中,我们设置的height,width值包含:(content)+填充(padding)+边框(border) 这三个部分,而标准盒模型中height,width值只是content部分;...
  • 盒子模型对于css的作用可以用下面两个图来比喻 二、理解以及使用 盒子模型的类型分为两类①:W3C标准的盒子模型(标准盒子模型),表示方法box-sizing:content-box,②另一种是IE盒子模型(怪异盒子模型),...
  • [css] 说说你对css盒子模型理解

    千次阅读 多人点赞 2021-02-15 10:27:54
    css盒模型由两个盒子组成,外在的控制是否换行的盒子,以及内在的控制元素内容的盒子。比如:display: inline-block, 则它的外在的盒子就是inline也就是不占据一行,而block则表示内部的元素具有块状特性。所以,...
  • JS如何设置获取盒模型对应的宽和高?根据盒模型解释边距重叠。BFC边距重叠解决方案?IFC? 标准模型和IE模型的区别:高和宽的计算方式不同,标准模型宽不包含padding和border,IE模型的宽计算padding和border。 ...
  • 理解CSS盒模型

    2018-07-15 00:03:09
    CSS盒模型是网页布局中一个很重要的概念,在前端面试题中也会经常出现。本文将从以下几个方面讲解CSS盒模型CSS盒模型的概念 标准盒模型和IE盒模型 元素的实际宽高计算 更改盒模型模式 一、CSS盒模型的概念 ...
  • 盒子模型CSS中一个比较重要的概念,它是网页开发布局的基石,它不仅可以存放文字文本,还可以存放图片、音频、视频等内容,所以理解好盒子模型的概念很重要。  盒子模型主要由4部分组成:外边距(margin)、边框...
  • box-sizing: border-box; // IE盒模型 box-sizing: content-box; // 标准盒模型
  • CSS盒模型是CSS的基石,面试一定会问道; 基本概念:标准模型+IE模型;(content,padding,border,margin) 标准模型和IE模型的区别: CSS如何设置这两种模型:  box-sizing: content-box;(标准模型,...
  • 深入理解CSS盒模型

    2019-04-18 19:02:05
    深入理解CSS盒模型 该文主要作为学习笔记进行转载,如有侵权请联系 一、css盒子模型概念 CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin...
  • css盒模型理解

    2020-02-23 21:20:44
    CSS盒模型理解 盒模型的概念 盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白(填充)、边框、边界(外边距)...
  • CSS 理解盒子模型

    2020-09-25 13:11:27
    盒子模型,是XHTML+CSS布局页面中的核心!要想学会用CSS布局页面,就首先要理解盒子模型
  • 一、是什么当一个文档进行布局(layout)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型CSS basic box model),将所有元素表示为一个个矩形的盒子(b...
  • 对css中盒子模型理解

    千次阅读 2019-05-29 14:47:57
    对css中盒子模型(box model)的理解盒子的基本属性margin的外边距合并(margin collapsing)box-sizing属性 盒子的基本属性 html文档中的每一个元素在页面布局中都会被呈现为一个盒子模型,如下图所示: width和...
  • 概念:CSS盒模型本质是一个盒子,包括:外边距margin、边框border、内边距padding、内容content 分类:标准盒模型(W3C)和怪异盒模型(IE) 标准盒模型:width的值就是content的值 怪异盒模型:width的值等于...
  • CSS盒模型(Box Model)的学习和理解一直是学习DivCSS网页布局的基础内容。但有很多CSS初学者依然不够熟悉,虽然我们提供了很多相关的教程。...今天发布一篇一位CSS初学者对CSS盒模型(Box Model)的理解

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,112
精华内容 10,044
关键字:

对css盒模型的理解