盒模型（box model)

飞飞鱼431

已于 2022-01-23 00:42:13 修改

阅读量130

点赞数

分类专栏：笔记文章标签： css html css3

于 2021-08-17 10:22:03 首次发布

本文链接：https://blog.csdn.net/weixin_55839814/article/details/119737636

版权

笔记专栏收录该内容

56 篇文章 0 订阅

订阅专栏

CSS将页面中的所有元素都设置成了一个矩形的盒子

将页面设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置

每一个盒子都由以下几个部分组成：

内容区（content）

-元素中所有的子元素和文本内容都是在内容区中排列

-内容区的大小由width和height两个属性来设置

-width设置内容区的宽度

-height设置内容区的高度

内边距（padding）

边框（border）

-边框属于盒子的边缘，边框的大小会影响整个盒子的大小

-要设置边框至少需要设置三个样式

边框的宽度（border-width）

边框的颜色（border-color）

边框的样式（border-style）

外边距（margin）

具体介绍

盒子模型-边框

border-width可以用来指定四个方向的边框宽度

语法：border-width：上右下左；（顺时针）

三个值：上左右下

两个值：上下左右

一个值：上下左右

此外还有 border-xxx-width

xxx可以是top bottom right left

用来单独指定某一边的宽度

border-color

border-color使用由与border-width一样

其默认值是黑色，若内容区有内容则边框的颜色与内容的颜色一样

<style>
    .box{
            color:red;
            border-width:10px;
            border-style:solid;
}
</style>
...
<body>
    <div class="box">div</div>
</body>
则最后边框的颜色是红色

border-style

默认值是none，表示没有边框

solid 表示实线

dotted 表示点状虚线

dashed 虚线

double 双线

border的简写形式

通过该属性可以同时设置与border相关的所有属性，并且没有顺序要求

例如：border:10px red solid;

还有border-top border-bottom border-right border-left

盒子模型-内边距

内容区和盒子边框之间的距离是内边距

一共有四个方向的内边距：

padding-top

padding-right

padding-bottom

padding-left

内边距的设置会影响盒子的大小

可见框的大小=内容区+内边距+边框

padding的缩写属性与border-width一样

例如：

padding：10px 20px 30px 40px;

padding：10px 20px 30px;

padding:10px 20px;

padding:10px;

padding不能单独设置颜色，它的颜色有内容区延伸得来，与内容区一样，要想区别内边距：

<style>
              .box1{ 
					 width:200px;
					 height:200px;
					 background-color:yellow;
					 border:10px orange solid;
					 padding:100px;
					
				}
				.box2{
					width:100%;
					height:100%;
					background-color:red;
				}
</style>
...
<body>
        <div class="box1">
            <div class="box2"></div>
        </div>
</body>

运行结果

也可以通过在内容区中加内容，来确定内边距

内边距不能单独设置颜色

盒子模型——外边距

不会影响盒子可见框的大小，但是会影响盒子的位置

一共有四个方向：

margin-top

设置一个正值，元素会向下移动

margin-right

margin-bottom

设置一个正值，其下边的元素会向下移动

margin-left

设置一个正值，元素会向右移动

元素在页面中，是按照自左向右的顺序排列的，所以默认情况下，我们设置上左边距会移动元素自身，其余的是移动其他元素

margin也可以设置负值，则元素会向相反方向移动

Margin简写属性和之前的一样

margin会影响盒子实际占用空间大小

box-sizing

盒尺寸，可以改变盒子模型的展现形态

设置width和height的时候不是对内容区进行设置而是包括content、padding和border，此时content的值不等于box-sizing的值

margin叠加问题

当给两个盒子同时设置上下外边距的时候会出现外边距叠加问题

左右外边距不会出现叠加问题

解决方法：会取较大值作为外边距的值

margin传递问题

只有margin-top存在传递问题（出现该问题的前提是出现在嵌套的结构中）

解决方案：给父元素加上边框

盒模型扩展

让盒模型居中显示（左右外边距均是自适应）注意：此方法只能在水平位置上居中，不能保证垂直位置上的居中显示

          margin-left:auto;
          margin-right:auto;

飞飞鱼431

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒模型（box model)

CSS将页面中的所有元素都设置成了一个矩形的盒子将页面设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置每一个盒子都由以下几个部分组成：内容区（content）-元素中所有的子元素和文本内容都是在内容区中排列-内容区的大小由width和height两个属性来设置-width设置内容区的宽度-height设置内容区的高度内边距（padding）边框（border）-边框属于盒子的边缘，边框的大小会影响整个盒子的大小-要设置边框至少需要设置三个样式
复制链接

扫一扫