CSS盒子模型详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_50613702/article/details/108640793

盒子

盒子模型

什么是盒子模型？
这些属性令它像一个盒子一样，就叫做盒子模型

1、css背景（background）：

css可以添加背景颜色和背景图片来进行图片的设置，比如给一个div盒子，那么div盒子相关背景的属性可以设置以下：

背景颜色：div {background-color: red;}，给div盒子设置一个红色背景颜色。

背景图片：div {background-image: url(图片路径);}，给div盒子设置一个背景图片，背景图片我们一般给小背景图片或超大背景图片。

背景平铺：div {background-repeat: no-repeat（不平铺）/repeat-x（横向平铺）/repeat-y（纵向平铺）;}

背景位置：div {background-position: 10px 15px;} 给背景位子横向、纵向多少距离的位子。

背景固定/滚动：div {background-attachment: fixed/scroll;}

背景属性连写： div{ background：颜色图片路径平铺滚动位子}

2、边框（border）：

边框有宽度（width）、边框样式（style）、边框颜色（color）三种属性。

border-width：1px；给边框1像素的宽度；

border-style：solid（实线）/dashed（虚线）/dotted（点线）；这三种比较常见的线条样式；

border-color：red；给边框赋予颜色属性。

可以给盒子四条边框分别不同赋予不同的宽度、样式、颜色。四条边框分别border-top、border-right、border-bottom、border-left。

边框样式连写：比如div {border：1px solid red；}

边框合并：有时候我们多个盒子并排排列挨在一起的时候，会出现两个盒子的边框贴在一起，显的比较宽，为了美观，需要把贴在一起的合并掉，写法是：border-collapse：collapse；

3、内边距（padding）：

指盒子边框与盒子里的内容之间的距离，有上、右、下、左内边距。内边距的几种写法及说明情况：

padding：10px；代表上下左右内边距都是10像素；

padding：10px 15px；代表上下像素10px，左右像素15px；

padding：10px 15px 20px；代表上内边距10px，左右内边距15px，下内边距20px；

padding：10px 15px 20px 30px；代表上10px，右15px，下20px，左30px；

清除内边距：padding：0；

嵌套盒子：当父盒子给了宽高，而子盒子没有给宽高，在给盒子内边距的时候，这个时候不会撑开父盒子。

4、外边距（margin）：

设置外边距，主要会与其他相邻元素之间产生空白空间，这个空白不能放置任何元素。

外边距也有上、右、下、左外边距，写法跟内边距类似。清除外边距margin：0；

外边距实现盒子水平居中：盒子必须是块级元素；盒子必须给宽度。

语法margin：auto auto；

行内元素只有左右外边距，没有上线外边距，尽量不给行内元素内外边距。

外边距合并：两个相邻的盒子都有外边距的时候，真正的盒子间距离会是外边距大的盒子的外边距值。
margin:外边距
padding：内边距
border：边框

盒子的计算方式：

margin + border + padding + 内容宽度

5.圆角边框

圆角边框：让一个正方形变成圆圈。

写法：border-radius：50% 50%；如果我们需要给一个盒子边框一点点圆角，可以给具体像素值，比如border-radius：5px；

<style>
div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-radius: 100px;
}
</style>

6.盒子阴影

语法格式box-shadow：水平阴影、垂直阴影、模糊距离、阴影尺寸、阴影颜色、内外阴影；

一般我们必写的是水平、垂直阴影，其他可忽略。

<style>
        img{
            border-radius: 50px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>
	<div style="width: 500px;display: block;text-align: center">
        <img src="images/tx.jpg" alt="">
    </div>
</body>