精华内容
下载资源
问答
  • 盒子模型与怪异模型展示效果差异: 标准盒子(W3c标准):大小 = width(content) + border + padding + margin 怪异盒子(IE标准):大小 = width(content + padding + border) + margin 布局采用哪种盒子模型,通过...
    盒子模型与怪异模型展示效果差异:

    标准盒子(W3c标准):大小 = width(content) + border + padding + margin
    在这里插入图片描述

    怪异盒子(IE标准):大小 = width(content + padding + border) + margin
    在这里插入图片描述

    布局采用哪种盒子模型,通过属性box-sizing可以设置:

    • content-box: 默认值,border和padding不算到width范围内,可以理解为是W3c的标准模型(default)

    • border-box:border和padding划归到width范围内,可以理解为是IE的怪异盒模型

    • padding-box:将padding算入width范围

    展开全文
  • 盒子模型

    2016-10-19 11:44:27
    盒模型中主要包括width、height、border、background、padding和margin这些属性,而且他们之间的层次关系可以相互影响,来看一张盒模型的3D展示图: (单击可放大) 从图中可以看出padding属性和

    CSS中有一种基础设计模式叫盒模型,盒模型定义了Web页面中的元素中如何来解析。CSS中每一个元素都是一个盒模型,包括html和body标签元素。在盒模型中主要包括width、height、border、background、padding和margin这些属性,而且他们之间的层次关系可以相互影响,来看一张盒模型的3D展示图:

    (单击可放大)

    从图中可以看出padding属性和content属性层叠background-image属性,层叠background-color属性,这个是存在的,它们四者之间构成了Z轴(垂直屏幕的坐标)多重层叠关系。但是border属性与margin属性、padding属性三者之间应该是平面上的并级关系,并不能构成Z轴的层叠关系。

    box-sizing:

    在CSS中盒模型被分为两种,第一种是w3c的标准模型,另一种是IE的传统模型,它们相同之处都是对元素计算尺寸的模型,具体说不是对元素的width、height、padding和border以及元素实际尺寸的计算关系,它们不同之处是两者的计算方法不一致,原则上来说盒模型是分得很细的,这里所看到的主要是外盒模型和内盒模型,如下面计算公式所示:

    1. W3C标准盒模型
    外盒尺寸计算(元素空间尺寸)
    
    element空间高度=内容高度+内距+边框+外距
    
    element空间宽度=内容宽度+内距+边框+外距
    
    内盒尺寸计算(元素大小)
    
    element高度=内容高度+内距+边框(height为内容高度)
    
    element宽度=内容宽度+内距+边框(width为内容宽度)

    2.IE传统下盒模型(IE6以下,不包含IE6版本或”QuirksMode下IE5.5+”)

    外盒尺寸计算(元素空间尺寸)
    
    element空间高度=内容高度+外距(height包含了元素内容宽度、边框、内距)
    
    element宽间宽度=内容宽度+外距(width包含了元素内容宽度、边框、内距)
    
    内盒尺寸计算(元素大小)
    
    element高度=内容高度(height包含了元素内容宽度、边框、内距)
    
    element宽度=内容宽度(width包含了元素内容宽度、边框、内距)

    在CSS3中新增加了box-sizing属性,能够事先定义盒模型的尺寸解析方式,其语法规则如下:

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

    取值说明

    属性值

    属性值说明

    content-box

    默认值,其让元素维持W3C的标准盒模型,也就是说元素的宽度和高度(width/height)等于元素边框宽度(border)加上元素内距(padding)加上元素内容宽度或高度(content width/ height),也就是element width/height = border + padding + content width / height

    border-box

    重新定义CSS2.1中盒模型组成的模式,让元素维持IE传统的盒模型(IE6以下版本和IE6-7怪异模式),也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知,这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度(此处的内容宽度或高度=盒子的宽度或高度—边框—内距)。

    inherit

    使元素继承父元素的盒模型模式

    其中最为关键的是box-sizing中content-box和border-box两者的区别,他们之间的区别可以通过下图来展示,其对盒模型的不同解析:

    (单击可放大)

    任务

    在自适应布局当中,在元素基础上添加内距padding,按照标准盒模型解析,往往会将布局撑破,但使用box-sizing的border-box值,可以让你轻松完成。在CSS编辑器第49-53行输入正确代码,让布局能正常显示。注:考虑浏览器的兼容性。

    补全代码后,效果如下图所示:

    (单击可放大)

    温馨提示:案例的效果如上图所示才算顺利通关,否则请再学习一遍本节的知识点!

    <!doctype www.dztcsd.com/html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>盒子模型</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="header"><h1>Header Content</h1></div>
    <div id="page">
      <div class="main"><h1>Main Content</h1></div>
      <div class="sidebar"><h1>Sidebar Content</h1></div>
    </div>
    <div id="footer"><h1>Footer Content</h1></div>  
    </body>
    </html>

    展开全文
  • 今天我们来谈一谈CSS中盒模型和怪异和模型的区别 首先,在探讨这两者的区别前,我们要现搞清楚,什么是盒模型 HTML文档元素都会以一个盒子的形态来展示他的宽高,每个盒子都可以看成是由从内到外的四个部分构成,...

    今天我们来谈一谈CSS中盒模型和怪异和模型的区别

    首先,在探讨这两者的区别前,我们要现搞清楚,什么是盒模型
    HTML文档元素都会以一个盒子的形态来展示他的宽高,每个盒子都可以看成是由从内到外的四个部分构成,包括内容区(content)、填充(padding)、边框(border)和空白边(margin)。

    其中元素的宽度width=content的宽度,border是这个元素的边框,padding是内边距(元素到边框的距离),margin是外边距(盒子之间的距离)

    在样式中写的宽高,就是content的宽高 width = content_width
    正常盒模型的宽度= content_width + 左右padding + 左右border + 左右margin
    正常盒模型的高度= content_height + 上下padding + 上下border + 上下margin

    而怪异盒模型,在样式中写的宽高,还包括了padding和border的值
    width = content_width + 左右 padding + 左右border

    盒模型怪异盒模型

    为了能够更好的理解盒模型和怪异和模型的区别,我们再举两个栗子~

    盒模型~~栗子

    写一个div,并给这个div宽100px,高100px,一个粉色的背景色
    盒模型
    在浏览器中调试可见,该div的大小为 100*100
    盒模型
    当给这个div添加了2px的border,10px的padding,15px的margin至后
    盒模型
    盒模型加border,padding,margin后的盒模型

    怪异盒模型~~栗子

    写一个按钮,并给这个按钮宽100px,高50px,一个天蓝色的背景色,
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
    在浏览器中调试可见此时自带边框的按钮加上左右边框的宽度为100px

    此时我们在给这个按钮增加一个padding值 试一下~
    在这里插入图片描述
    在这里插入图片描述
    由此可见,这个提交按钮是一个怪异盒模型,且可发现给怪异盒模型增加padding值或border值,该值不会在原有的width外扩张盒子大小,而是从原有的width内扣除其padding值或border值。

    展开全文
  • css盒模型

    2020-02-23 20:23:37
    一.盒模型概念 1.css盒模型是css布局的基石,它定义了...下面展示的是盒模型的图例: 2.盒子模型的平面结构图 CSS盒模型由内而外依次是元素内容(content)、内边矩(padding-top、padding-right、padding- botto...

    一.盒模型概念

    1.css盒模型是css布局的基石,它定义了如何显示网页元素和元素之间的关系。指定所有元素都可以有类似于盒子和平坦空间的形状。这意味着它包含的内容空间和填充物,边界和边缘,这是盒子模型。下面展示的是盒模型的图例:
    2.盒子模型的平面结构图
    在这里插入图片描述
    CSS盒模型由内而外依次是元素内容(content)、内边矩(padding-top、padding-right、padding- bottom、padding-left)、边框(border-top、border-right、border-bottom、border- left)和外边距(marging-top、margin-right、margin-bottom、margin-left)。
    内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。而且,外边距可以是负值,而且在很多情况下都要使用负值的外边距。

    3.盒子模型的三维结构图在这里插入图片描述
    元素内容(content)、内边距(padding),两者同位于第二层
    背景图(background-image),位于第三层
    背景色(background-color),位于第四层
    整个盒子的外边距(margin),位于第五层
    盒模型–边框 - border
    元素的边框 (border) 是围绕元素内容和内边距的
    一条或多条线

    二.盒模型–内边距- padding

    CSS padding 属性定义元素边框与元素内容之间的空白区域
    (padding就相当于盒子里面的泡沫 2、padding就是和边框之间距离)

    1.【内边距设置值的方式】
    padding:10px; 上下左右都加了10像素
    padding:5px 10px;上下5像素 左右10像素
    padding:5px 6px 7px;上5像素 左右为6像素 下为7像素
    padding:5px 6px 7px 8px;上5px 右6px 下7px 左8px

    2.【给单一方向设置padding】
    padding-top 上
    padding-right 右
    padding-bottom 下
    padding-left 左

    三.盒模型–外边距- margin

    CSS margin 属性定义元素与元素之间的区域(margin在盒子的最外面)
    **1.【margin设置值的方式】
    一个值:margin:5px上下左右 都是5px
    两个值:margin:5px 6px 上下5px 左右6px
    三个值:margin:5px 6px 7px; 上5px 左右6px 下7px;
    四个值:margin:5px 6px 7px 8px; 上5px 右6px 下7px 左8px
    2、给单一方向设置margin
    margin-top 上
    margin-left 左
    margin-right 右
    margin-bottom 下

    四.盒模型属性

    1.overflow 属性规定当内容溢出元素框时发生的事情值 描述
    2.visible 默认值。内容不会被修剪,会呈现在元素框之外
    3.hidden 内容会被修剪,并且其余内容是不可见的
    4.scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容
    5.auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
    6.inherit 规定应该从父元素继承 overflow 属性的值

    五.盒模型应用

    CSS中的盒子模型是为了让我们充分理解div+css模型的定位功能,就是利用盒子模型这样的布局方式代替了传统的表格布局方式,所以盒子模型是在学习div+css布局方式中必须要学习的一个模型,通过这个模型能够明白网页中div和div之间的相对位置是如何布局的。

    展开全文
  • CSS盒模型

    2020-05-29 11:46:32
    文章目录理解盒模型盒子边框盒子内边距(padding)盒子外边距(margin)叠加外边距外边距的单位...如下面的这个盒模型示意图所示,展示了HTML 元素的边框、内边距和外边距之间的关系 外边距是边框向外推其他元素,而内边距
  • CSS盒子模型

    2018-04-01 00:24:29
    盒模型中主要包括width、height、border、background、padding和margin这些属性,而且他们之间的层次关系可以相互影响,来看一张盒模型的3D展示图: 2、两种盒模型 box-sizing盒模型分两种: 一种是w3c...
  • 盒子模型的理解

    2017-08-30 11:01:00
    为了更好的理解贴图展示:  用css中的样式理解就是:  IE盒子模型就是:box-size:border-box;  标准盒子模型就是:box-size:content-box; ie盒子模型: 标准盒子模型: 那应该选择哪中盒子...
  • 目录盒模型的定义“盒子”的类型"盒子"的组成部分-以块级盒子为例内容 conter内边距 padding边框 Border外边距 margin总结 在 CSS 中,所有的元素都被一个个的“盒子(box)”包围着,理解这些“盒子”的基本原理,...
  • CSS3盒模型,是面试时的常见问题,也是开发中不容忽视的部分,该文介绍了盒模型的相关知识。
  • flex弹性盒模型

    2021-03-31 11:27:05
    flex是弹性盒子,display:flex用来定义一个盒子的模型为弹性盒子,弹性盒子默认子元素的块级元素是并排展示的 display: flex;定义一个盒子,定义盒子是写在父盒子CSS上 /* 子元素的展示方式是垂直方向展示,row是...
  • CSS3盒模型

    2018-10-05 07:56:35
    每一个盒子有不同的展示界面, 在 CSS 中 主要有以下几种盒模型: inline、inline- block、block、table、absolute,position、float。 浏览器把每个元素看 一个盒模型, 每一个盒模型是由以下几个属性组合所决定的...
  • CSS 盒模型

    2009-09-02 17:11:00
    整理自:The CSS Box Model中文:CSS 盒模型CSS 盒模型网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的,请看下图:如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿...
  • 什么是盒模型

    2020-02-23 15:11:59
    什么是盒模型 盒模型是CSS布局的基石,它规定了网页元素间以及元素与内容中间位置关系。CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间。 在这里,我们用一个div元素简单展示一下,代码如下。 <!DOCTYPE...
  • Day03-盒模型

    2020-01-04 17:29:29
    掌握盒模型的基本概念。 掌握盒模型的组成部分。 通过盒模型优化静态网页。 二. 盒模型。 概念。 盒模型的结构像盒子一样。有多个部分组成,可以让排版更精细话。 盒模型的组成. 2.1 内容部分:content,由...
  • 盒模型技术文章 .doc

    2020-02-23 09:40:03
    介绍盒模型,关于盒模型的定义,详解了关于margin和paddingde 用法 以及一些必要的操作实例,出现的问题和应对方法,讲问题点以及出现方式进行了展示,便于理解。
  • CSS3盒模型温故

    2019-10-29 18:44:19
    CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的。每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline、inline-block、bloc...
  • CSS盒模型详解

    2017-11-09 22:08:00
    CSS盒模型,多么专业的一个术语。但你不要被它吓到,不过就是一些CSS基本属性的应用而已。 CSS 盒模型 网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的,请看下图: 如果是 Firebug 用户的话...
  • CSS教程之CSS盒模型

    2020-12-11 23:59:00
    CSS 盒模型 网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的,请看下图: 如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿),就会很熟悉下面的图表了。这个图表很...

空空如也

空空如也

1 2 3 4 5 ... 17
收藏数 327
精华内容 130
关键字:

模型展示盒