盒子模型
盒子:是一个容器,任何一个标签都是一个容器 只不过要分大小,最大容器为div等块标签 其余为较小的容器
模型:盒子的大小
盒子模型:主要是计算出盒子的大小站位,方便调整界面之间的间距
盒子模型总共有四个部分组成的 :
分别是
1) 内容区域 :content
2) 内边距区域 :padding
3) 边框区域 :border
4) 外边距区域 :margin
外边距
使用场景:需要设置间距且间距对于当前容器来说是外面的时候用 元素与元素之间,边框与边框之间的间距
语法1:单独设置
外上 margin-top
外下 margin-bottom
外左 margin-left
外右 margin-right
语法2:简写(复合属性)
margin:10px; 表示上下左右都是10
margin:10px 20px; 表示上下都是10左右都是20
margin:10px 20px 30px; 表示上是10 左右都是20 下30
margin:10px 20px 30px 40px; 表示 上是10 右20 下30 左40(顺时针方向)
说明1:属性值可以给正数也可以给负数,也可以是单词(auto),如果是auto目前只有左右支持上下暂时不行
这里的auto是自动把剩余的空间给margin,所以想要实现一个容器水平居中,当前盒子得有宽度
**说明2:**属性值的单位可以是%,如果单位是%,那么%的结果是最近父元素宽度的%多少
/* 外上给负数,是当前盒子往上移动 */
margin-top: -50px;
/* 外左给负数,是当前盒子往左移动 */
margin-left: -100px;
/* 外下给负数,自己不动,下面的盒子往上移动 */
margin-bottom: -20px;
/* 外右给负数,自己不动,右边的盒子往左移动 */
margin-right: -30px;
上负往上移 左负往左移 下负下盒上移 右负右盒左移
注意点
1:在一个包含结构中,如果给子元素添加margin-top或者margin-bottom,应该是子元素自己上下有间距,但是浏览器解析的时候会让父元素跟着一起有
解决方法1:给父元素添加overflow:hidden;(属性意思是溢出隐藏原理BFC)(overflow:hidden作用是当元素内的内容溢出的时候使它隐藏溢出的部分，即超出部分隐藏)
解决方法2:给父元素添加边框 border
解决方法3:给父元素或者子元素添加浮动 float:left或者是right
2:在一个上下并列的结构中,如果给其中一个盒子添加了margin-bottom,给另外一个盒子设置了margin-top,应该解析的是2个间距的和,但是浏览器解析的结果是最大数值的间距(原理BFC)
解决方法1:给下面的盒子添加一个父元素,且添加overflow:hidden;(原理BFC)
3:浮动或者是绝对定位/固定定位之后的盒子不能使用margin:0 auto;实现不了水平居中,原因都是因为这些浮动或者是绝对/固定定位之后的盒子是悬空飘起来在上面一个层级中,空间不在页面内了,不在一个空间内,也就没有办法进行剩余空间的计算了
margin使用过程中问题的解决方法
<style>
*{
margin: 0;
padding: 0;
}
.box-gray{
background-color: blue;
/* 解决方法1 */
overflow: hidden;
/* 解决方法2 */
/* border: 2px solid red; */
/* 解决方法3 */
/* float: left; */
}
.box-white{
width: 1000px;
height: 200px;
background-color: orange;
margin: 47px auto 45px;
}
h3{
width: 400px;
height: 100px;
background-color: skyblue;
margin-bottom: 10px;
}
p{
width: 500px;
height: 300px;
background-color: blue;
margin-top: 20px;
}
.fuqin{
overflow: hidden;
}
</style>
<body>
<div class="box-gray">
<div class="box-white"></div>
</div>
<h3>盒子1</h3>
<div class="fuqin">
<p>盒子2</p>
</div>
</body>
内边距
使用场景:需要设置间距且间距对于当前容器来说是里面的时候用 边框与内容之间的距离,边框里面的距离
语法1:单独设置
内上 padding-top
内下 padding-bottom
内左 padding-left
内右 padding-right
语法2:简写(复合属性)
padding:10px; 表示上下左右都是10
padding:10px 20px; 表示上下都是10左右都是20
padding:10px 20px 30px; 表示上是10 左右都是20 下30
padding:10px 20px 30px 40px; 表示 上是10 右20 下30 左40(顺时针方向)
说明1:padding属性值只能给正数,不能给负数,也不能用单词auto
**说明2:**属性值的单位可以是%,如果单位是%,那么%的结果是最近父元素宽度的%多少
注意点
因为padding是内间距,是往盒子里面添加的,所以会把盒子撑大,这是正常的现象
假如想要用padding设置间距,又不想盒子撑大,可以在设置的宽度或者高度上减去添加的padding值 或者触发怪异盒子,因为在怪异盒子里面,padding不会把盒子撑大,想要触发怪异盒子需要代码box-sizing:border-box;
padding-left: -20px;不对的
padding-bottom: auto;不对的
边框
使用场景:需要线条边框的时候用
语法1:单独设置
边框宽度 border-width
边框颜色 border-color
边框线型 border-style
solid实线 dashed虚线 dotted点状线 double双线
语法2:简写(复合属性) 3个参数的顺序可以随便写
全边框
border:4px red solid;
单边框
border-top:4px red solid;
border-left:4px red solid;
border-right:4px red solid;
border-bottom:4px red solid;
注意点
因为border是在盒子的基础上额外添加的,所以也是会把盒子撑大
假如想要用border添加线条,又不想盒子撑大,可以在设置的宽度或者高度上减去添加的border值或者触发怪异盒子,因为在怪异盒子里面,border不会把盒子撑大,想要触发怪异盒子需要代码box-sizing:border-box;
怪异盒子
如何触发怪异盒子 :
通过属性 : **box-sizing:border-box** 触发
特点:会压缩容器，内边距和边框都是往内延申，盒子总体容器不变，内容区域大小会被压缩(边框和内边距都是往自己内部扩展的)
box-siziing：content-box 可以把怪异盒子变成标准盒子
box-siziing：bober-box
在移动端用怪异盒子比较多
弹性盒子模型
特点:自动横向摆放，
能通过父级元素和子级元素按比例放置子容器的位置
192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
