盒子模型由哪些部分组成?

发布网友发布时间：2022-04-26 05:09

我来回答

共3个回答

懂视网时间：2022-05-12 18:32

什么是盒子模型？

　　网页中的任何一个标签都相当于是一个盒子模型，而所有的盒子模型都存在五个必要的属性：width,height,padding,border,margin.

那么在一个网页中如何计算一个盒子模型实际所占的宽度呢？？？？

　　例如：<style>div {width:300px;padding:20px;border:1px}</style>

对于上面div所占宽度应该是：width+2*padding+2border=300+2*20+2*1=342px;

padding:内边距：内容和边框之间的距离。

padding的四个属性：padding-top,padding-bottom,padding-left,padding-right.

width:宽.

height:高.

border:边框.

常见的边框写法：border:1px solid #ccc;分别表示边框的宽度，线型，颜色。

常见线型有：solid(实线)，dashed(虚线),dotted(点线)。

边框的三个基本属性:border-width(边框的宽度),border-style(边框的线型),border-color(边框的颜色);

maigin:外边距.

margin的四个基本属性：margin-top,margin-bottom,margin-left,margin-right.

在使用margin时需要注意的点:

　　1.塌陷:margin塌陷存在于块级元素之间。如果元素变成了行内元素或者行内块元素，则不会塌陷。如果元素脱离了标准文档流也不会塌陷。

　　2.通过margin让盒子居中：margin:0 auto;

　　　使用margin:0 auto 让盒子居中需注意：盒子必须要有明确的width。盒子必须处于标准文档流中。margin:0 auto是让盒子居中，而不是让盒子里面的内容居中。

　　　让盒子里面的文字居中可以使用：text-align:center;(向左向右：text-align:left/right;)

Tips:如果想要移动子元素的位置，非必要情况下推荐使用父元素的padding，而不是子元素的margin，如果必须使用margin，父元素就必须要有border

使用准则：在使用CSS的时候，尽可能的简写。

padding:10px 20px; 表示上下的padding为10px，左右的padding为20px。

padding:10px 20px 30px; 表示上的padding为10，下的padding为30px，左右的padding为20px.

padding：10px 20px 30px 40px;分别表示上，右，下，左的padding。

热心网友时间：2022-05-12 15:40

盒模型的组成：content(内容区)+padding(填充区)+border(边框区)+margin(外界区)。

不同部分的说明：

content(内容)：盒子的内容，显示文本和图像。

border(边框)：围绕在内边距和内容外的边框。

padding(内边距)：清除内容周围的区域，内边距是透明的。

margin(外边距)：清除边框外的区域，外边距是透明的。

扩展资料

内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区有三个属性，width、height 和overflow。使用width和height属性可以指定盒子内容区的高度和宽度，当内容信息太多，超出内容区所占范围时，可以使用overflow 溢出属性来指定处理方法。

当overflow 属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息；当为auto时，将由浏览器决定如何处理溢出部分。

热心网友时间：2022-05-12 16:58

a,外边距(margin)
b,边框(border)
c,内填充(padding)
d,标签中内容(content)
目前我正在黑马程序员学习，刚好学到这个点，把这个点的知识分享给你。