精华内容
下载资源
问答
  • ​ 首先明确 我敲代码时在用的盒子是标准盒子。 其次注意,文中提到的盒子大小,都是写css时客观设定的 width和height值。 一、标准盒子与IE盒子 定义 标准盒子:content = 盒子大小 IE盒子:content + padding ...

    6.15 修正

    ——      ——     ——     ——     ——     ——      ——    ——    ——    ——    ——    ——    ——  

    一、标准盒子与IE盒子 定义

    标准盒子:content = 盒子大小,给盒子指定width与height,就是给content指定。

    IE盒子:content + padding + border = 盒子大小,给盒子指定width与height,是给三者的总和, content不确定。 (依据设定的padding和border值相加减得到)

    二、标准盒子与IE盒子 转换
     

    html * {    
    
    box-sizing: border-box;  设置为IE模型      
    
    box-sizing: contetn-box; 设置为标准模型
    
    }

    三、标准盒子详解

    (一)关于content = 盒子大小:

    1.没指定 width / height,content 自适应

    没指定有两种情况,第一种是该盒子真的啥也没有,那么content决定盒子大小,即该content的行高,字体大小,宽度决定盒子大小;第二种该盒子是没有浮动和定位的块级盒子,那么宽就可以继承父级。

    此时:若设定padding和border值,则会改变content的大小,不会撑大盒子,width和height等于content+padding+border。即content = 盒子大小 - padding - border。(这就是不给宽高,padding不会撑大盒子的原因,改变的是content的大小)。

    盒子还是原来那个盒子,content却不是原来那个content了。

    2.指定 width / height,content被指定

    给盒子指定宽高,盒子大小强行决定content大小,并不在意content的行高啊,字体大小等等到底是多少。

    此时:若设定padding和border值,则会改变盒子的大小,即撑大盒子,content + padding + dorder = width/height。(这就是给了宽高,padding会撑大盒子的原因,改变的是盒子大小)

    content还是原来那个content,盒子却不是原来那个盒子了。

    (二)注意:  

    padding是内补丁,border是盒子边框,都算作盒子的一部分。

    margin是外补丁,不是盒子的一部分,可以算做盒子所占的位置。

    展开全文
  • 盒子模型主要分为三大类:标准盒子模型,IE盒子模型,弹性盒子 这篇文章当中主要讲一下标准盒子模型以及IE盒子模型 一、标准盒子模型 在W3C标准下,盒子模型从外到里分别为magin(外边距)、border(边框)、...

    做前端的都知道,盒子模型是我们前端开发网页必须要用的布局方法,当然了,盒子模型只是一个统称,那么下面我们就来具体说下盒子模型的种类有哪些。

    盒子模型主要分为三大类:标准盒子模型,IE盒子模型,弹性盒子

    这篇文章当中主要讲一下标准盒子模型以及IE盒子模型

    一、标准盒子模型

    在W3C标准下,盒子模型从外到里分别为magin(外边距)、border(边框)、padding(内边距)、content(内容)如下图:

    标准盒子模型

    从上图我们可以清晰的观察到,盒子模型从外向里的结构。

    此时,需要注意的是,此时我们通过CSS样式给元素添加的width和height属性是给content部分添加的,那么这样一来代表了什么呢?

    也就是说,此时我们给该元素添加的任何padding,border,和magin属性都会占据空间

    1. 添加padding属性会使容器向外扩张,从而达到容器内容与边界产生距离的效果
    2. 添加border属性同样会占据一定空间,占据空间依边框宽度而定
    3. 添加margin属性会与相邻元素产生间距。

    通过以上3条,我们不难得出一个元素的实际占用空间大小,看下图:

    盒子模型宽度计算方法

    从上图不难看出,该元素实际宽度为      10+5+70+5+10=100px

    高度算法与宽度算法一致。

    margin属性

    在CSS样式中magin属性有以下四种写法

    margin: 10px 20px 30px 40px;  /*上  右  下  左*/
    margin: 10px 20px 30px;/* 上   左右  下*/
    margin: 10px 20px;/*上下  左右 */
    margin: 10px;/*上右下左*/

    另外需要注意,垂直方向上的magin属性会出现外边距合并现象,如下图:

    外边距合并

    通过图片我们不难理解这一现象。

    padding属性

    padding的四种写法与margin相同

    border属性

    border-radius属性可以为边框添加圆角边框,一共有8个值,但是通常我们会用4个值来操作,分别为左上角,右上角,右下角,左下角。

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>圆角</title>
        <style>
            #div1{
                width: 100px;
                height: 100px;
                border: 5px solid orange;
                border-radius:5px 10px 20px 30px;
            }
        </style>
    </head>
    <body>
    <div id="div1"></div>
    </body>
    </html>

    效果图如下:

    效果图

    我们不难发现值越大,边框弧度越大。

    二、IE盒子模型

    IE盒子模型也叫变态盒子模型IE盒子与标准盒子模型的区别在于,给元素设定的width和height属性范围为   border+padding+content

    如下图:

    IE盒子模型

    那么,如何实现IE盒子模型呢

    我们只需要给想要变成IE盒子模型的元素添加box-sizing:border-box

    这样一来,我们再给元素添加padding以及border属性时,元素就会在我们设定的宽度和高度内自动调节。而不会在像外扩张。

    注:以上图片来自于网络

     

     

     

     

    展开全文
  • 盒子模型 盒子模型(Box Model): ... 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 不同部分的说明: Margin(外边距) :清除边框外的区域...标准盒子模型和怪异盒子模型 在怪异盒子模型下,一个块的总宽度

    盒子模型

    盒子模型(Box Model)
    盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
    盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

    不同部分的说明
    Margin(外边距) :清除边框外的区域,外边距是透明的。
    Border(边框) :围绕在内边距和内容外的边框。
    Padding(内边距) : 清除内容周围的区域,内边距是透明的。
    Content(内容) : 盒子的内容,显示文本和图像。

    标准盒子模型和怪异盒子模型

    在怪异盒子模型下,一个块的总宽度 = 内容的width + margin(左右)(这里的width包含了padding(左右)和border(左右)的值)

    在标准盒子模型下,一个块的总宽度 = 内容的width + padding(左右) + border(左右) + margin(左右)

    <style>
        div{
            width:100px;
            height:100px;
            padding:20px;
            border:2px solid #000;
        }
    </style>
    

    在怪异盒子模型下:总宽度为100px;

    在标准盒子模型下:总宽度为144px;

    两种模式的转换(通过box-sizing)

    box-sizing中比较常用的两个属性值为 content-box 和 border-box ,它可以改变盒子模型的解析计算模式

    当设置box-sizing:content-box时,采用标准模式进行计算,默认就是这种模式;
    当设置box-sizing:border-box时,采用怪异模式进行计算;

    展开全文
  • 标准盒子模型: IE盒子模型:

    标准盒子模型:

    IE盒子模型:

    展开全文
  • 他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。  从上图可以看到 IE ...
  • 标准盒子模型和IE盒子模型的区别

    千次阅读 2019-04-25 18:23:46
    标准盒子模型和IE盒子模型标准盒子模型IE盒子相同点不同点 标准盒子模型 css盒子模型 又称为框模型(Box Model),包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。图中...
  • 标准盒子模型 怪异盒子模型 标准盒子模型 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 去除标签自带的边距 */...
  • 一、标准盒子模型 由上图可以看到,width 只为盒子中内容 content 的大小,所以整个盒子的宽度可以计算为 width + padding(左右) + border(左右) + margin(左右) 二、怪异盒子模型 由上图可以看到怪异盒子...
  • 盒子模型:标准盒子模型,怪异盒子模型 标准盒子模型也被称为:content-box,在css的样式设计中的width和height设置的是内容区(content)的宽和高. 注意:在html页面中一个标准盒子所占的像素实际所占的宽和高还要算上内...
  • 我们今天就来讲讲网页中的盒子模型,盒子模型它分为标准盒子模型和怪异盒子模型。但他们有什么区别呢?怪异盒子它怪异在哪呢?是和孙悟空一样会72变吗?还是… 来首先我们来看看什么是盒子模型 一、什么是盒子模型...
  • 一:标准盒子和IE盒子模型 标准盒子模型,content不包含padding和border 非IE盒子模型:content包含content,padding,border 标准盒子模型的高:height=(margin-top+margin_bottom)+(border_top+border_...
  • w3c标准盒子模型:宽度 = 内容宽度(content)+ padding + border + margin低版本IE盒子模型:宽度 = 内容宽度(content + padding + border)+ margin 注意:IE盒模型的内容宽度包含了padding和border,w3c盒模型...
  • W3C标准盒子模型和IE盒子模型的区别

    万次阅读 2019-02-01 17:31:33
    1、W3C标准盒子模型 w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分 2、IE盒子模型 IE盒子模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是,...
  • 标准盒子模型 元素宽度=margin*2+border*2+padding*2+width; IE盒子模型 元素宽度=margin*2+width;
  • 标准盒子和怪异盒子

    2020-08-26 15:46:02
    标准盒模型-----怪异盒模型 说到这我们要先来说...标准盒模型(是W3c标准盒子模型): 它的width和height定义的是内容(content)的宽高,不包括padding和border ------标准盒模型中 width 指的是内容区域 content 的
  • CSS标准盒子模型

    千次阅读 2015-12-04 18:49:10
    CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content)、内边距(padding)、边框(border) 和 外边距(margin) 的方式。...以FireFox标准盒子模型为例:
  • 他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型:   从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。  ie 盒子模型    ...
  • 标准盒子模型简单讲解

    千次阅读 2018-07-31 12:34:33
    今天给大家介绍一下盒子模型,首先盒子模型是什么?...接下来给大家介绍一下盒子模型的基本内容。...盒子模型的基本组成部分:在符合w3c的下由外到内分别是margin border padding和元素content,标准盒子模型符合w...
  • 第一种是W3C标准盒子模型,第二种是IE盒子模型, 下面重点介绍这两个盒子模型的区别。 1.如何区分 在CSS中有一个属性叫做box-sizing,对于标准的盒子模型,属性值为border-box,d对于IE来说叫做content-box。 2....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 55,237
精华内容 22,094
关键字:

标准盒子