问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501

什么是盒模型

发布网友 发布时间:2022-11-24 15:35

我来回答

1个回答

热心网友 时间:2024-09-01 13:38

      在前端中盒模型可谓是十分重要的,它是CSS进行页面布局的基石,在页面CSS布局中盒模型规定了网页元素如何排列显示以及元素之间的相互关系。在H5中CSS样样式定义所有的元素都可以拥有像盒子一样的平面空间和外形。(如下图所示)整个盒模型包含了:内容区(content)、补白或填充(因叫法不同;padding)、边框(border)、边界或外边距(margin)这就是盒模型。

      从盒模型的定义中我们了解到了盒模型是由内容区(content)、填充区(padding)(注:在本文中就称填充区)、边框(border)及外边距(margin)(注:在本文中就称外边距)4个部分组成,那么它们是怎么来定义的,每个组成部分的属性用法又是什么?

      Content(内容区):它是整个元素的宽和高,是属于元素内容的区域

      border(边框):它是盒子的边缘既是边框

      Padding(填充区):它是盒子边框与内容之间的间距,或者说是父元素与子元素之间的内边距

      Margin(外边距):它是盒子边框以外的外边距,或者说是同辈元素之间的间距

      border-width:1px; :设置边框的宽度的,在设置边框宽度时会用到此属性默认为1px,在网页中很多修饰性线条都是由边框来实现的,在给属性加值得时候需要加上单位,如px(像素),em...

      border-style:solid: :设置边框的线型样式,边框线性也有多个值,如:border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)...

      border-color:; ;设置边框的颜色,默认为黑色。

      Border-style:none; ;取消边框,在css样式中如盒子有单一方向用不到边框可用此属性取消边框

      扩展:border-style:none;的应用场景:加了超链接的插入图片,在IE低版本浏览器会出现边框。解决方法:给img 这个标签添加border-style:none;。

边框有四个方向,必要时可单独设置一方向边框属性,

      1:border-top:      上边框,可给边框设置宽度、线型、颜色。

      2:border-right:     右边框,可给边框设置宽度、线型、颜色。

      3:border-bottom:   底边框,可给边框设置宽度、线型、颜色。

      4:border-left:      左边框,可给边框设置宽度、线型、颜色。

      为盒子写边框属性时,为方便书写,有复合式写法:

      1:border-top-width:10px ;        上边框的宽度

      2:border-right-width:20px; 右边框的宽度

      3:border-bottom-width:30px;    下边框的宽度

      4:border-left-width: 40px;       左边框的宽度

      border-width:10px 20px 30px 40px;  border-width 的复合式写法

      1:border-top-style:solid;            上边框的线型

      2:border-right-style:dashed;         右边框的线型

      3:border-bottom-style:double;       下边框的线型

      4:border-left-style:dotted;           左边框的线型

      边框样式:border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)可单独设置一方向边框

      border-style:solid dashed dotted double;    border-style 的复合式写法

      1:border-top-color:#f00;           上边框的颜色

      2:border-right-color:#ff0;           右边框的颜色

      3:border-bottom-color:#00f;        下边框的颜色

      4:border-left-color:#fff;           左边框的颜色

      border-color:#f00 #ff0 #00f #fff;  border-color 的复合式写法

      如果边框的属性值我用1、2、3、4、来代替,那么它们的复合式写法可有以下几种:

      1:border:1;2;3;4; :1、上 ;2、右 ;3、下; 4、左

      2:border:1;2;3;    :1、上;2、左和右3、下

      3:border:1;2;       :1、上和下;2、左和右

      4:border:1;          :1、上、下、左、右  

      复合式写法:分开设置每个边的边框样式

      1:border-top:#f00 solid 10px;   

      2:border-right:#0f0 dotted 20px;

      3:border-bottom:#00f dashed 30px;

      4:border-left:#fff double 40px;

      border:10px solid #ff0;      代表四个边框样式是统一的,最复合式的写法;

注:边框的大小,是会添加在元素原有大小之外的,会改变元素原本的大小;也就是说边框是占位置的(在标准盒模型的情况下)。

      可以用来控制父元素和子元素之间的位置关系

      可以用来控制元素和内容之间的位置关系

      再给盒子添加了padding值之后,padding值会把元素原有的盒子大小撑大,如果让元素原本盒子大小不变得话,需要在元素的宽高上减掉所加的padding值。 padding属性对背景图片是不起作用的,可以说背景图片的位置,是不受padding的影响的。如果元素本身有背景色,那么背景色会延展到padding区域。

padding的使用方法

方法一:给盒子单个方向加padding值

      1:padding-top:10px;         上填充

      2:padding-right:10px;        右填充

      3:padding-bottom:10px;      下填充

      4:padding-left:10px;          左填充

 方法二:给盒子所有方向加padding值(复合式写法)

      1:padding: 1   2    3   4  :  1、上;2、右;3、下;4、左

      2:padding: 1   2    3      :  1、上;2、左和右;3、下

      3:padding: 1   2           :  1、上和下;2、左和右

      4:padding: 1               :  1、上 、右、 下、 左

      用来控制同辈元素之间的位置关系。

      margin是显示在元素边框以外的空白区的,给元素加上的margin值是不需要减去的,而且margin属性的值可以施加负值。

方法一:给盒子单个方向加margin值

      1:margin-top:10px;         上外边距

      2:margin-right:10px;        右外边距

      3:margin-bottom:10px;      下外边距

      4:margin-left:10px;         左外边距

方法二:给盒子所有方向加margin值(复合式写法)

      margin:1   2    3   4        :1、上;2、右;3、下;4、左

      margin:1   2    3            :1、上;2、左和右;3、下

      margin:1   2                 :1、上和下;2、左和右

      margin:1                     :1、上、右、下、左

      在盒模型中margin属性除了可以设置外边距以外,还可实现元素水平居中:margin:0 auto;、margin-left:auto;、margin-right:auto;共三种属性值。

      在盒模型中margin属性是可以写负值的,可以用此来实现元素位置调整,而且margin的值是不会影响到元素的实际大小,但是会影响到其他元素所占区域。

      盒模型中如果给多个元素设置margin值,上下两个相邻元素之间的margin值会重叠显示,会用相邻元素margin的最大值显示

      在盒模型中当给元素里第一个子元素(块状元素)添加margin-top值的时候,会错误的把这个margin-top值添加给父元素。此条件建立在当前元素下没有浮动和边框的条件下。

      这两种bug都可以用BFC解决,其中bug2给大家推荐几种方法:

      方法1:给父元素添加overflow:hidden;属性(比较好用)

      方法2:给父元素添加边框

      方法3:把元素中的margin属性改用padding属性

      方法3:给父元素和子元素添加浮动属性

      最后给大家提示一下:margin就是用来控制同辈元素之间的位置关系;padding就是用来控制父子元素之间的位置关系。

      标准盒模型和怪异盒模型区别就在于他们的组成部分

      宽高组成content+padding+border+margin

      元素宽度实际占有的位置大小:宽+左右padding+左右border+左右margin

      元素高度实际占有的位置大小:高+上下padding+上下border+上下margin

      元素的宽度:width(content+border+padding)+margin

      属性:box-sizing: border-box(怪异盒模型)/content-box(标准盒模型)

      相较而言,标准盒模型的组成属性是分开组成的,而怪异盒模型的content、border、padding属性可以看做一个组成部分,再加上margin属性由此构成了整个怪异盒模型

      从盒模型的定义中我们了解到了盒模型是由4个部分组成,那么盒子的大该如何计算呢?由定义我们可以想到盒子的大小应该是:内容区(content)+填充区(padding)+边框(border)+外边距(margin)=盒子大小。但是,在盒模型这四个属性中除了content属性其余属性值都有4个属性,那么盒子的宽高大小可以用此方法计算:

      由margin-left+border-left+padding-left+width(content内容元素的宽度)+padding-right+border-right+margin-right=元素的总宽度。如下图2-1、2-2所示

                                                                  图2-1

                                                                   图2-2

盒子元素的高度:

      由margin-top+border-top+padding-top+height(content内容元素的高度)+padding-right+border-right+margin-right=元素的总宽度。如下图2-3、2-4所示

                                                              图2-3

                                                                    图2-4

       作为一名新手,在H5中我只是初入,可谓是入门都没有踏进,所以在后面的日子里需要去努力成长,去拼搏,当然这些都是我个人的想法,此外感谢看到这里大佬和朋友,在这里看了一段白话,因为本人文采并不是特别好,又是初入H5,所以文中有些不顺望大家谅解。
声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com
Request对象语法 9,django中request对象 塞尔达传说时之笛火之神殿Boss房间怎么去 ...的圆形地方怎么上去?打完BOSS后才发现没去过,但我 榆中兴隆山旅游路线 ...兴隆山校区到哪个公交车站最近?应该怎么乘公交车?打车的话得多少钱... 从般若寺到兴隆山法院怎么坐公交车,最快需要多久 那些属于国有经济,哪些属于集体经济 ...丢手机,生病,丢工作,怎么转运啊,谁能告诉我,我快疯了 阴历十月又叫什么月 借呗额度突然降到1000咋回事? 小米手环包装为什么有大盒子有小盒子 qq邮箱号码在哪里看 小鹏计划2025年开始,向全面自动驾驶、无人驾驶进,目前发展程度如何... 精密无缝钢管有什么特点 钢管规格是多少 哪位大神可告知,ps这个红点怎么调出来 ps中如图,黄色圈圈外面的红点是怎么画的?求图片过程 满月风俗额头上涂红点怎么画、用什么涂 在ps里做红点闪动怎么做啊 怎么把3mm的衍纸条切割成1mm的 冷启动中USB转TTL为什么不能掉电 安卓usb转ttl 弗兰德有没有上市股票 吉尔德证书怎么查询 新买的笔记本,前一天充满电,第二天电池就掉到73%了,是不是不正常啊 选择微信文件上传是什么意思 那里能下英语教学视频? 222年疫情期间出京回来不扫行程码会被单位发现吗 返京不报备健康宝会弹窗吗 国企出京不报备后果 标准盒模型和IE盒模型 原民办教师、代课教师、幼儿教师是一个概念吗?有什么区别呢? 南方的经济重心是什么时候开始逐渐取代北方地区的? 历史的南方指什么 当时经济状况如何? 中国为什么经济重心从北方移到南方 为什么北宋时期南方经济得以快速发展? 读书时需要的心境有哪些? 倾斜摄影三维建模 北京宏利保险代理有限公司怎么样? 北京宏利保险代理有限公司陕西分公司怎么样? 北京宏利保险代理有限公司甘肃分公司怎么样? Android 关机(reboot)流程 小米手机一直显示“抱歉,进程com.android.phone已停止运行”是因为什... 退保险需要什么资料办手续? 2018年内蒙古养老金上调方案细则 2018年内蒙养老金调整方案 粉皮放冰箱一夜还可以吃吗 凉皮放冰箱里第二天还能吃吗 面皮存冰箱一18度还可吃吗? 在吗?我想问下铁精粉的国税发票是什么样的~最好是有图! 哪位大侠知道使用彩博士的时候出现以下这种情况,是怎以回事啊,求解答...