盒子的模型

原创 2018年04月17日 18:21:43
1.什么是盒子
2.盒子的种类
3.标准的盒子模型
4.盒子模型的属性
5.盒子的边框
6.盒子内边距
7.盒子外边距
8.标准盒子模型宽度计算方试
9.设置固定宽度
10.充满父级容器
11.包裹内容的情况下
12.怪异盒子模型
13.盒子的元素
1.盒子的特性
一个盒子中主要的属性就5个:width、height、padding、border、margin。
具备内容、填充、边框、边界这些属性,能包含其他元素的容器都是盒子。
2.盒子的种类
1.标准盒子模型
2.怪异盒子模型(IE盒子模型)
注意:根据盒子的尺寸计算方式分类,盒子的基本属性相同</p>
在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式: 内容、内边距、边框、外边距。</p>
3.标准的盒子模型
content-内容
padding-内边距(填充)
border-边框
margin-外边距
4.盒子模型的属性
1.边框(border):可以设置边框的宽窄、样式和颜色。
2.内边距(padding):可以设置盒子内容区与边框的间距,想像一下内边距是从边框向内推元素的内容。
3.外边距(margin):可以设置盒子与相邻元素的间距,想像一下外边距是边框向外推其他元素。
5.盒子的边框
边框有3个相关的属性:
宽度(border-width)
样式(border-style)
颜色(border-color)
6.盒子内边距
在显式设定了width的前提下,padding值的设定会加大盒子的占位宽度。
7.盒子外边距
样式表的第一条规则:* {margion:0 ;padding=0;},所有元素默认的外边距和内边距都设定为零。
8.标准盒子模型宽度计算方试
设置固定宽度
充满父容器
包裹内容
9.设置固定宽度
width:200px;height: 200px;padding: 10px; margin: 50px;border: 5px ;
这种情况下,设置的200px为content的宽度;整个盒子的宽度是:(内容宽度 + border宽度 + padding宽度 + margin宽度)之和
10.充满父级容器
height: 200px;
这里可以看到不规定盒子宽度的话,盒子会自动充满一整行,这是块级元素的特性。
height: 200px;border: 50px solid red;background-color: black;padding: 50px;margin: 50px;
这种情况下,增加盒子的margin;border;padding;都会压缩内部contant的宽度
11.包裹内容的情况下
这种情况比较简单,内容的宽度按照内容计算,盒子的宽度将在内容宽度的基础上再增加(padding宽度 + border宽度 + margin宽度)之和。
12.怪异盒子模型
box-sizing:border-box;height: 200px;width:200px;border: 10px solid red;padding: 10px;margin: 10px;
当为盒子设置box-sizing:border-box时,就是怪异盒子模型
这个时候你会发现,盒子200px的宽度是内容 + border + 边框的宽度(不包括margin)
13.盒子的元素
1.块级元素
2.行内元素
1.块级元素(BLOCK ELEMENT)
1.没有显式地设置元素的width属性,默认值是auto. 元素始终会扩展到填满其父元素的宽度为止
2.为设定了宽度的盒子添加边框、内边距和外边距,会导致盒子扩展得更宽。扩展量等于水平边框和内边距之和
1.行内元素(BLOCK ELEMENT)
1.inline元素会扩展到足以包裹其内容的宽度,添加内边距和水平边框会导致liline元素变宽,添加量等于水平边框和内边距的和。
行内元素+DISPLAY:BLOCK=块状元素
CSS3 BOX-SIZING属性


margin  负值会有什么影响

1.盒子模型尺寸基准有两种,分别是content-box和border-box  (默认是content-box)

2.理论上说,content-box与border-box区别是两者的盒子的宽度是否包含表框和内边距。

3.新建两个不同背景填充的div,

 能简单说说盒子margin重叠 

1、水平边距永远不会重合。 
2、在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下: 
a、全部都为正值,取最大者; 
b、不全是正值,则都取绝对值,然后用正值减去最大值; 
c、没有正值,则都取绝对值,然后用0减去最大值。 
注意:相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。 
3、相邻的盒模型中,如果其中的一个是浮动的(float),垂直margin不会重叠,并且浮动的盒模型和它的子元素之间也是这样。 
4、设置了overflow属性的元素和它的子元素之间的margin不被重叠(overflow取值为visible除外)。 
5、设置了绝对定位(position:absolute)的盒模型,垂直margin不会被重叠,并且和他们的子元素之间也是一样。 
6、设置了display:inline-block的元素,垂直margin不会重叠,甚至和他们的子元素之间也是一样。 
7、如果一个盒模型的上下margin相邻,这时它的margin可能重叠覆盖(collapse through)它。在这种情况下,元素的位置(position)取决于它的相邻元素的margin是否重叠。 
a、如果元素的margin和它的父元素的margin-top重叠在一起,盒模型border-top的边界定义和它的父元素相同。 
b、另外,任意元素的父元素不参与margin的重叠,或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零,那么元素的border-top边界位置和原来一样。 
一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom重叠。 
注意,那些已经被重叠覆盖的元素的位置对其他已经重叠的元素的位置没有任何影响;只有在对这些元素的子元素定位时,border-top边界位置才是必需的。 

8、根元素的垂直margin不会被重叠。

 有哪些元素是行内块级元素

在html中,元素主要分为行内元素和块级元素;

行内元素指的是书写完成后不会自动换行,并且元素没有宽和高。

块级元素写完后会自动换行,有宽高可以修改。

还有一种特殊的元素叫做行内块元素。

大致分内是:

行内元素有:heda   meat   title  lable  span  br  a   style  em  b  i   strong

块级元素有:body  from  select  textarea  h1-h6 html table  button  hr  p  ol  ul  dl  cnter  div

行内块元素常见的有: img  input  td  

以上就是常见的行内元素和块级元素,还有常见的行内块元素



CSS:盒子3D模型

CSS:盒子3D模型 从上到下分为5层 1、border 2、content+padding 3、background-image 4、background-color 5、margin...
  • golden_wheat
  • golden_wheat
  • 2016-12-08 22:03:53
  • 711

h5学习之8(html中的盒模型)

html中的盒模型 margin border padding
  • qq_36423639
  • qq_36423639
  • 2016-12-12 21:53:50
  • 367

前端进阶---标准盒模型和怪异和模型---

前端进阶—标准盒模型和怪异和模型—相关要求: 1.正常盒子与怪异盒子对比 2.弹性盒子水平分栏,垂直分栏,排序(flex),cloumn分栏 3.旧版弹性盒子居中布局正常盒子与怪异盒子对比 ...
  • meng1339746727
  • meng1339746727
  • 2017-03-09 18:39:22
  • 701

DIV盒子模型

DIV盒子模型: 从外到内依次包括: margin:外边距、 border:边框、 padding:内补白、 content:内容。 内外距离区别: 其实说白了 padding就是内容与...
  • yanzhibo
  • yanzhibo
  • 2014-01-19 21:46:26
  • 5772

Bootstrap盒模型

关于盒模型有两种方案,可以通过box-sizing来控制,关于盒模型其实两种方案都是表示有margin,border,’padding’,’conent’组成,唯一的区别在于一个Dom的width1到...
  • u012362458
  • u012362458
  • 2017-02-26 11:08:22
  • 589

CSS基本功:盒模型、选择器优先级

盒模型盒子模型就是容器在页面上所占的空间大小。 CSS盒子模型分为标准的W3C盒子模型和低版本的IE盒子模型 盒子模型由4个属性组成:外边距(margin)、边框(border)、内边距(padd...
  • tt_Litingting
  • tt_Litingting
  • 2017-05-29 17:19:43
  • 529

深入理解盒子模型——CSS之BFC详解

首先我们看看w3c对BFC是怎么定义的:   Floats, absolutely positioned elements, block containers (such as inline-blo...
  • ziminghuohua
  • ziminghuohua
  • 2017-05-28 21:10:58
  • 1010

nlp homework 03

NLP Homework 03
  • feng2783581
  • feng2783581
  • 2017-04-10 20:58:15
  • 135

球与盒子模型全解

把n个球放m个盒子里的模型分为 (1)n个不同的球,放入m个无区别的盒子,不允许盒子为空。 方案数:    。这个跟第二类Stirling数的定义一致。 (2)n个不同的球,放入m个有区别的盒...
  • qunianjinri
  • qunianjinri
  • 2016-12-28 11:51:42
  • 438

h5盒子模型

html> html lang="en"> head> meta charset="UTF-8"> style> *{ padding: 0; ...
  • xuemoKingDeath
  • xuemoKingDeath
  • 2017-04-16 19:31:48
  • 518
收藏助手
不良信息举报
您举报文章:盒子的模型
举报原因:
原因补充:

(最多只允许输入30个字)