盒模型基础内容

最新推荐文章于 2022-09-16 09:50:08 发布

葡萄籽籽

最新推荐文章于 2022-09-16 09:50:08 发布

阅读量153

点赞数

本文链接：https://blog.csdn.net/weixin_43816709/article/details/100784430

版权

简述盒模型

盒模型包含有效内容区域，边框以及外边距部分
盒模型的宽度 = width+padding-left+padding-right+border-right+border-left+marign-left+marign-right;
盒模型高度 = height + padding-top+padidng-bottom+border-right+border-left+marign-bottom;
border: 四条
border: 1px边宽 solid 边形 red 边色; 四条边框完全一致 1px 红色实线
border-width:边宽
border-width:1px ;
border-width:1px 2px 0 4px; //顺时针上右下左
border-style: 边形 solid 实线 dashed虚线 dotted小圆圈 double双实线
border-color: rgb()/#fff122/red;
border-top:1px solid red;
border-left:2px solid blue;
border-right:2px solid blue;
border-bottom:2px solid blue;

内边距

内边距:指的是盒子内部的间隙
fun: 设置有效内容和边框的距离不能为负!!!
内边距设置会增加盒模型宽高所以要记得内减 !!! 在width上减相应的值

<style>
.box {
/* 宽 506 高 506 */
width: 50px;
height: 50px;
border:3px solid red;
padding-top: 450px;
padding-left: 450px;
background-color: aqua;
}
.small {
width: 100px;
外边距(margin)
外边距作用:1:可以移动盒子 2: 外边距设置盒子与盒子之间的距离的
外边距可以设置负值 只是盒子之间的距离拉近 会出现交叉现象
优先考虑内边距,其次考虑外边距
外边距塌陷
描述: 在垂直方向上的外边距会发生塌陷 (子元素如果在垂直方向上设置了外边距 ,子元素会带父元素一
起向下移动)
height: 100px;
background-color: gold;
}
</style>
</head>
<body>
<!-- 内边距撑大盒子 内减计算 内边距不放置内容 但是会填充背景色 -->
<div class="box">
<div class="small"></div>
sahfbewbfrew
</div>
</body>
</html>

外边距

margin:10px ; 上下左右四个都一样 盒子发生位置变化
margin:10px 20px; 上下10px 左右20px
margin:10px 20px 30px; 10px 上 20px 左右 30px 下
margin;10px 20px 30px 40px ; 顺时针

外边距作用:1:可以移动盒子 2: 外边距设置盒子与盒子之间的距离的
外边距可以设置负值只是盒子之间的距离拉近会出现交叉现象
优先考虑内边距,其次考虑外边距

外边距塌陷

描述: 在垂直方向上的外边距会发生塌陷 (子元素如果在垂直方向上设置了外边距 ,子元素会带父元素一
起向下移动)

父子关系塌陷

当子元素设置了上外边距，会使父元素和子元素一起向下移动
解决方法：1:给父元素设置1px上边框，颜色白色
2，给父元素设置1px上内边距
3，给父元素加overflow:hidden;元素身上有overflow:hidden；这个属性时，这个元素外部不会影响元素，内部也不会影响元素

兄弟元素的塌陷

兄弟关系的两个垂直放置的盒子，如果上面那个盒子设置了下外边距，底下的盒子又设置了上外边距，会出现塌陷，导致最终的外边距不会叠加，而是取设置的最大值
解决办法：
1，避免将外边距设置在一个盒子身上
2，同事将两个变成BFC盒子（私有领域）给两个盒子加父盒子，父盒子身上加overflow:hidden

外边距水平居中块级元素

margin: 0 auto; 0 上下外边距为0 auto 自动 浏览器计算---> 盒子水平居中
margin-left:auto;
margin-right:auto;

前提：这个盒子必须是块级元素，并且有明确的宽度值
元素的分类

块级元素(display:block)

1:宽度width默认是100%,高度取决于内容高度
margin: 0 auto; 0 上下外边距为0 auto 自动浏览器计算—> 盒子水平居中
margin-left:auto;
margin-right:auto;
2:独成一行 (霸道)
3:设置宽高,可以上下左右外边距 ,上下左右内边距
行内元素(display:inline)
1:宽度width高度取决于内容高度
2:并排 ,中间会出现间隙(文本特性)
3:不可以设置宽高,不可以上下外边距 ,但是可以设置左右外边距和四周的内边距
a,em ,i,span…
行内块(display:inline-block)
1:并排又可以设置宽高
2:可以四周的内边距和外边距
3:中间会出现间隙( 文本特性)