CSS教程】【Web前端基础】css盒模型有几种

2020-11-20 10:16发布

16条回答
小橘子
1楼 · 2020-11-20 11:23.采纳回答

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分。

盒子模型分为两种:

第一种是W3c标准的盒子模型(标准盒模型)

第二种IE标准的盒子模型(怪异盒模型)


魏魏姐
2楼 · 2020-11-20 10:42

IE盒子模型 box-sizing:border-box;W3C标准盒子模型 box-sizing:content-box; (这个是默认值)特点是宽高一个包含了内外边距,一个没有包含内外边距;

芒果
3楼 · 2020-11-20 15:13

CSS盒模型

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content)四个属性。

W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)

(1)W3C盒子模型(标准盒模型)

1.标准盒模型中width指的是内容区域content的宽度;height指的是内容区域content的高度。
2.标准盒模型下盒子的大小 = content + border + padding + margin

(2)IE盒子模型(怪异盒模型)

1.怪异盒模型中的width指的是内容、边框、内边距总的宽度(content + border + padding);height指的是内容、边框、内边距总的高度
2.怪异盒模型下盒子的大小=width(content + border + padding) + margin


@CcCc
4楼 · 2020-11-20 16:20

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分。

盒子模型分为两种:

第一种是W3c标准的盒子模型(标准盒模型)

第二种IE标准的盒子模型(怪异盒模型)


HARPPRTのIT
5楼 · 2020-11-20 16:25

盒子模型分为两种:

  • 第一种是W3c标准的盒子模型(标准盒模型)

  • 第二种IE标准的盒子模型(怪异盒模型)

当前大部分的浏览器支持的是W3c的标准盒模型,也保留了对怪异盒模型的支持,当然IE浏览器沿用的是怪异盒模型。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器。


爱煲汤的小王
6楼 · 2020-11-20 17:12

SS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分。

盒子模型分为两种:

第一种是W3c标准的盒子模型(标准盒模型)

第二种IE标准的盒子模型(怪异盒模型)


aijingda
7楼 · 2020-11-20 17:17

盒子模型分为两种:

  • 第一种是W3c标准的盒子模型(标准盒模型)

  • 第二种IE标准的盒子模型(怪异盒模型)

当前大部分的浏览器支持的是W3c的标准盒模型,也保留了对怪异盒模型的支持,当然IE浏览器沿用的是怪异盒模型。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器。

标准盒模型与怪异盒模型的表现效果的区别之处:

1、标准盒模型中width指的是内容区域content的宽度;height指的是内容区域content的高度。

标准盒模型下盒子的大小 = content + border + padding + margin

1.jpg

2、怪异盒模型中的width指的是内容、边框、内边距总的宽度(content + border + padding);height指的是内容、边框、内边距总的高度

2.jpg

怪异盒模型下盒子的大小=width(content + border + padding) + margin

我们可以看出我们上面的使用的默认正是标准盒模型

而这里盒模型的选取更倾向于项目和开发者的习惯,并没有绝对的好坏之分。

以上就是css盒子模型有几种的详细内容。

我的网名不再改
8楼 · 2020-11-21 22:06

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分。

盒子模型分为两种:

  • 第一种是W3c标准的盒子模型(标准盒模型)

  • 第二种IE标准的盒子模型(怪异盒模型)


天青色
9楼 · 2020-11-23 10:05
  • 第一种是W3c标准的盒子模型(标准盒模型)

  • 第二种IE标准的盒子模型(怪异盒模型)


相关问题推荐

  • 回答 11

    一、position 的四个值:static、relative、absolute、fixed。绝对定位:absolute 和 fixed 统称为绝对定位相对定位:relative默认值:static二、relative定位与absolute定位的区别实例:HTML代码:css代码:初始效果:1、relative:相对于原来位置移动,元素...

  • 回答 14

    1.static:正常文档定位,此时top,bottom,left和z-index属性无效,块级元素从上往下纵向排布,行级元素从左往右排列2.relative: 相对定位,此时的相对是相对于正常文档流的位置3.absolute:相对于最近的非static定位祖先元素的偏移,来确定元素位置,比如一个绝...

  • 回答 8

    设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素相对于它的起点进...

  • 回答 15

    浮动和定位都可以使元素脱离标准文档流,提升层级,  浮动脱离文档流,提高半个层级,不能完全覆盖下面元素(不能覆盖图片文字)定位脱离标准文档流,提升一个层级,可以完全覆盖下面元素及其内容...

  • 回答 7

    绝对定位就是你的位置已经不属于你了,你只能漂浮在半空中。相对定位就是你的位置你还占用的,人还在飘着有意思的是这些都是相对父辈元素有position为相对或者绝对属性来定位的,都找不到的话就以body窗口来定位。...

  • 回答 17

    定位:1、相对定位 position:relative; 兼容2、绝对定位 absolut 兼容3、固zhuan定定位 fixed ie6不兼容

  • 回答 5

    css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起,举个例子来说吧,就比如有两个div盒子在网页中显示,一个盒子里展示的是图片,另一个盒子中展示的是文字,他们虽说自己占有的位置不大,可是他们却各占一行来显示,这可...

  • 回答 7

    引言:这篇文章是我对BFC的理解及总结,带你揭开BFC的面纱。你将会知道BFC是什么,形成BFC的条件,BFC的相关特性,以及他的实际应用。一、何为BFC       BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的...

  • 回答 8

    同时用JS就可以随意移动DIV标签的位置 {maxz_play} [removed]var obj=document.getElementById('idDiv');obj.style.left='10px';obj.style.top='10px';[removed]

  • 回答 9

    css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起,举个例子来说吧,就比如有两个div盒子在网页中显示,一个盒子里展示的是图片,另一个盒子中展示的是文字,他们虽说自己占有的位置不大,可是他们却各占一行来显示,这可...

  • 回答 12

    BFC 是 Block Formatting Context(块级格式化上下文)的缩写,它是为了解决如下问题:浮动定位外边距合并清除浮动自适应多栏布局

  • 回答 9

    一、何为BFC       BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件      1、浮动元素,float 除 none 以外的值;       2、定位元素,p...

  • 回答 12

    css清除浮动可以理解为打破横向排列。 清除浮动的关键字是clear,官方定义如下: 语法: clear : none | left | right | both 取值: none : 默认值。

  • 回答 11

    float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。CSS世界中的float属性是一个年代非常久远的属性,设置了float属性的元素会根据设置的属性值向左或者向右浮动,直到它的外边缘碰到包含框或另一个浮动框的边...

  • 回答 11

    如果不定义浮动的话,各个div的内容在页面上是由上向下排列的。而如果某个div定义了float: left,那么这个div就会出现在上层div下最靠左的位置,而与它同一等级,但列在它后面的div就会显示在他的右侧了。同样,如果定义了float:right,那么这个div就会出现在...

  • 回答 6

    1、 元素类型的转换(display属性)Display属性属性值:BlockInlineNone大部分块状元素默认的display的值为block,其中li默认的值 list-item(列表元素)大部分内联元素默认的display值为inline,其中input默认的值为:inline-block;(行内块元素);内联元素...

没有解决我的问题,去提问