标签：盒子 margin 模型 元素 边框 内边 外边 border

# 盒子模型 1.内边距padding ---内边距是元素的边界与元素内部内容产生的距离 特点： 标准和模型当给予元素内边距是整个元素会增大 内边距是元素本身占位的一部分，如元素有颜色,内边距也会使用元素的颜色 ---内边距参照的是内容的边界 -元素没宽高参照子元素撑开的长度
# 子元素都在文档流布局中设有脱离文档流 - 怪相一：块级元素因为默认宽度是父元素的百分之百，如果没有单独设置宽度，则不会超出父元素百分之百的范围，子元素只能撑开高度部分(在布局中基本不存在) - 怪相二 ：当子元素小于父元素时，父元素增加内边距，即使不会把子元素向某边内挤压，仍然会产生内边距，最终使元素放大(在布局中存在) # 子元素都在文档流布局中设有脱离文档流
-  四个方向       padding-top: 20px;       padding-bottom: 20px;       padding-left: 20px;       padding-right: 20px; - 简写 padding:一个值代表四个方向值相同       padding:值1 值2; 上下和左右       padding:值1 值2 值3;上和左右和下       padding:值1 值2 值3 值4;上、右、下、左 长度单位,但%参照的是父元素的宽度 内边距不能为负值
2.border 边框线位于内边距的外层，用于修饰元素外层边框 border 样式组合属性:      border-width: 边框线宽度; (一般使用px)      border-style:  边框样式;solid实线 dashed 虚线 dotted 点状线      border-color: 色值; 边框颜色
- 简写样式 每个边可以单边设置以上三个属性如：border - 四个边的边框相同:border:宽度 样式; 颜色(省略 默认黑色) 下边框：border-bottom:宽度 样式 颜色; 上边框：border-top：宽度 样式 颜色; 左边框: border-left：宽度 样式 颜色; 右边框: border-right：宽度 样式 颜色;
- 常用的情况 元素的四个边框线如:一个卡片,规格选项,激活的图或文字 下边框线 如:分隔列表的项目,一行标题下 三角形

2.外边距margin 外边距位于外边框外侧 不在元素的范围内 不会增加元素本身的大小 - 语法 四个方向 margin-top:上边框 margin-right:右外边距 margin-bottom:下外边距 margin-left:左外边距 - 简写方式：margin:一个值 代表四个方向 margin:值1 值2;上下、左右 margin:值1 值2 值3;上、左右、下 margin:值1 值2 值3 值4;上、右、下、左 值可以为负值，按照元素的坐标 向下是top的正值 向上是top的正值 向左是top的正值 向右是top的正值 auto 属性 margin:auto; 是让已定义宽度的子元素在父级元素中水平的方式,auto只左右外边距自适应父级元素宽度 margin:上下值 auto;常用用法

- 自带外边距的元素 body 8px的外边距 ul p h1~h6 - 外边距合并现象外边距  前提，上下垂直的响铃兄弟元素，当他们都有外边距，上下重合时会发生合并 会取相对大的外边距为两个元素之间的距离 - 外边距溢出现象 父元素的第一次和最后一个元素会有外边距溢出情况 最后一个子元素的上边距会和父元素的上外边距发生重叠,导致父元素出现下外边距而子元素无效 行内块显示的元素不会出现外边距溢出(一般不会用行内块布局)
# 解决方案 - 给父级加，上内边距，可以让第一个元素和父元素上边产生距离(常用) - 给父级元素加边框线 让两个元素的边上不重合，但实际需要边框时可使用 - 利用BFC 给父级加,overflow:hidden/auto 触发BFC,可以避免margin重叠问题,弊端超出父级的子元素会隐藏或出现拖拽条 - 在第一个子元素和父元素之间加一个<table></table>空标签因table标签的属性可以是两个元素之间产生距离(基本不用 会打乱布局) - 利用伪元素模拟table出现让两个元素之间产生间隙   - .box::before{    content: "";    box前变成table 显示    display: table;
# 下和右外边距无效现象 - 当元素右外边距导致自身发生位移只有左和上会让当前元素发生位移 - 下和右只能更让当前元素和周围的兄弟元素产生距离,当他旁边没有兄弟元素时,看上去无效,但盒子模型会体现
# 计算盒子模型 - 标准盒子模型 - 一个元素在页面上占据的位置,内联元素上下内外边距不生效 - 总体占宽:左外边距+左边框+左内边距+内容+右内边框+右边框+右外边框 - 总共占高:上外边距+上边框+上内框局+上内边距+内容+下边框+下外边框 - 元素本身占宽=左右边框+左右内边框+内容宽 - 元素本身的占高=上下边框+上下内边距+内容高 box-sizing:content-box:指定元素为标准盒子模型的计算方式 box-sizing:border-box;指的是盒子的宽度就是content部分
# 怪异盒子模型 设置元素宽度和高度将被重新计算 设置宽度=边框+内边距+重新计算过的宽高 不会因为内边距和边框而放大元素 box-sizing:border-box;会将宽度重新计算后显示 border-box;值指的是,盒子的宽度就是border以内的所有部分

标签：盒子,margin,模型,元素,边框,内边,外边,border
来源： https://www.cnblogs.com/YJQN/p/15415502.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。