CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型

盒子模型（Box Model）：

指把HTML页面中的元素看作是一个矩形的盒子，也称容器，这个盒子从内到外由：元素的内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。

内容content：

指文本等内容的大小，width和height设置内容的大小，并非包含边框border和内边距padding的值，因此设置其它两项，容器的实际大小会改变。设置其它两项后，经常会出现盒子被撑开的问题，其中一种解决方法就是修改width和height，结合下面内边距设置属性值的个数为1个可得：容器实际大小 = 容器未设置其他两项前的大小 - 2 * (padding + border)，注意：设置margin会改变父级元素的盒子大小。

内边距padding：

指内容（content）和边框（border）之间的距离。当给一个值时设置的是上、下、左、右四个方向的内边距，两个值时设置的是上下、左右方向的内边距，三个值时设置的是上、左右、下方向的内边距，四个值时设置的是上、右、下、左方向的内边距。速记：从上开始顺时针对应给值，没有值的边用对边的值补，当然可以分开写，如：

 padding-left: 1px;

边框border：

指内边距（padding）和外边距（margin）之间的距离，由border-width边框宽度、border-style边框样式、border-color边框的颜色，三者缺一不可显示，其连写为：border：border-width border-style border-color

 div {border: 16px solid red;}

border-width:

边框的宽度一般给像素，当然像em等也是支持的。

border-style：

边框的样式一般设置为solid实线，其值还有：none无边框、hidden隐藏边框（兼容差）、dotted点线（兼容问题）、dashed虚线、double双实线、groove凹槽边框、ridge菱形边框、inset凹边、outset凸边等

border-color:

边框的颜色取值和color的取值一样。

边框拆分：

border可以拆分为上下左右四个边框：border-top上边框、border-bottom下边框、border-left左边框、border-right右边框，拆分后其属性设置和border一样。

 div {border-bottom: 1px solid yellow;}div {border-bottom-width: 16px;border-bottom-style: dotted;border-bottom-color: pink;}

border-collapse合并表格相邻边框:

解决表格table中cellspacing=“0” 外边距设置为0后相邻边框叠加加粗问题,这个属性必须设置在table中才有效。

 table {border-collapse:collapse;/* 当去掉这个属性后，相邻边框叠加变粗 */}td{border: 3px solid black;}<table cellspacing="0"><tr><td>苹果</td><td>苹果</td></tr></table>

border-radius：

设置边框四角的弧度，简称圆角边框，其值和border-width设置类似，这个值可以可以使用一组参数设置，中间用反斜杠/隔开，反斜杠前面控制的是X轴，反斜杠后面控制的是Y轴，反斜杠只能出现一次（20px/40px，一般前后值相同时是省略的）；可以设置为1~4个值，设置多个值时，起始是从左上角开始顺时针分别设置，没有值的角使用其对角的值；也可以给每条分别设置,需要注意的是需要先写上下后写左右属性：

 div {border-radius: 50% 20% 10%;/* 一个圆角值为50%的圆角是一个圆 */}div {border-top-right-radius: 20px/40px;}

外边距margin：

设置盒子以外的距离，这个距离不能放其他内容，margin可拆分为margin-top上边距、margin-bottom下边距、margin-left左边距、margin-right右边距，当为margin时也可以设置多个属性值，每个属性值对应的方向和border一样，都是从上面开始，顺时针旋转分别给值，没有的用对边值补。

实现盒子水平居中的方法：必须是块级元素，必须设置宽度

 div {/* 第一种分开写： */margin-left: auto;margin-right: auto;}div {/* 第二种不分开： */margin: auto;/* 或者使用margin:0 auto; */}

清除默认边距：

浏览器默认有自己的padding，元素有自己的默认margin，此时为了更好的控制布局，可以清除这些默认的值：

 * {margin: 0;padding: 0;}

注意：行内元素没有上下外边距，只有左右外边距，因此设置垂直方向的margin是不起作用的。

垂直方向外边距合并问题：

如果给两个盒子的相邻边分别设置margin，此时这两个盒子之间的距离是其中设置的margin较大的盒子的margin值，如box1的margin-bottom设置为20px,box2的margin-top设置为50px，则它们之间的外边距是50px，实际开发中只设置其中一个外边距即可。

 <style>.father {width: 400px;height: 400px;background-color:aqua;margin-bottom: 100px;}.brother {width: 400px;height: 400px;background-color:rgb(241, 143, 13);margin-top:50px;}</style><div class="father"></div><div class="brother"></div>

嵌套盒子中垂直外边距塌陷问题：

当两个盒子嵌套在一起时，如果给里面的盒子一个margin-top，此时里面的盒子不会相对于外面的盒子向下移动，而是内外盒子保持相对静止向下移动，避免这个问题的方法是给父级元素加border或者padding，但是父级盒子会被撑开，此时使用overflow:hidden可以不被撑开父级盒子而解决盒子塌陷问题，overflow后面会详细介绍，水平方向不会出现这种情况。

 <style>.father {width: 400px;height: 400px;background-color:aqua;border: 1px solid transparent;/* padding: 1px; 给padding也可以解决这个问题 *//* overflow: hidden; 推荐使用这个解决盒子塌陷问题 */}.son {width: 200px;height: 200px;background-color:rgb(241, 143, 13);margin-top:50px;margin-left:30px;}</style><div class="father"><div class="son"></div></div>

标准盒模型:

盒子设置宽高后，再去设置padding、border时，此时盒子的实际大小会变大。

怪异盒模型:

盒子设置宽高后，再去设置padding、border时，此时盒子不会被撑开，它会挤压内容区（content），开启怪异盒模型的方法：box-sizing:border-box

 div {box-sizing: border-box;/开启怪异盒模型，解决给定宽高后再去设置padding和border时盒子被撑开问题/}

盒子阴影box-shadow：

给一个盒子加上阴影效果，其属性值分别为：box-shadow: h-shadow水平阴影,必选 v-shadow垂直阴影,必选 blur模糊距离 spread阴影尺寸 color阴影颜色 inset内/外阴影，默认是外阴影不用写，当需要为内阴影时在最后加上inset即可。

 div {box-shadow: 2px 2px 3px 4px pink inset;}

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型相关推荐

html盒子距离上边距50px,Margin的垂直外边距问题
做练习的时候遇到一个margin的问题,代码结构如下,给父元素body中的子元素div设置了margin:50px auto;本来我是想让子元素div距离父元素上边拉开50个像素,结果却是子元素div ...
前端笔记（5）盒子模型，边框，内外边距，盒子模型布局，ps基本操作，列表样式，圆角边框，盒子阴影
css样式表/层叠样式表(3) (1)盒子模型 (2)盒子边框 (3)表格的细线边框 (4)内边距padding 内盒尺寸计算(元素实际大小) padding不会影响盒子大小的情况 (5)外边距mar ...
盒子模型（插入图片，外边距，内边距）
盒子模型(Box Model) 所谓盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器盒子模型有元素的内容.边框(border).内边距(padding).和外边 ...
定位组成，相对定位，绝对定位，固定定位、定位的特殊性，脱标的盒子不会触发外边距塌陷，绝对定位（固定定位）会完全压住盒子，焦点图布局（html+css）
定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子. 定位:将盒子定在某一个位置.所以也是在摆放盒子,按照定位的方式移动盒子. 定位=定位模式+边偏移定位模式 ...
BFC与垂直外边距折叠笔记
BFC与垂直外边距折叠 BFC BFC是什么(Block formatting contexts) Boxes in the normal flow belong to a formatting co ...
TDK优化模块化思想阿里巴巴矢量库 css文件引入顺序外边距塌陷
2020/12/31 TDK优化标题logo优化模块化开发思想结构拆分阿里巴巴矢量图库 https://www.iconfont.cn/ 选择图标是ui做的引入方式推荐font class ...
css 外边距塌陷解决方法
内部元素影响外部元素样式,外边距塌陷(BFC) BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-lev ...
css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) ...

CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型

CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型相关推荐

最新文章

热门文章