CSS的使用（三）——盒模型

最新推荐文章于 2024-07-25 10:45:42 发布

小羊...

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量790

点赞数 14

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/L_sheep_/article/details/140178428

版权

一、盒子属性

margin：外边距；border：边框；padding：内边距；width&height：宽和高。

1.1 width&height宽高

内容的宽和高，单位可以是px、rpx、%等。若给height设置为百分比样式，大概率是0，因为其高度在浏览器中是找不到的。可以通过max-height和min-height设置最大高度和最小高度，用在媒体查询中；宽度亦然。

            /* 宽度高度 */
            width: 300px;
            height: 300px;
            /* 背景颜色 */
            background-color: red;

1.2 border边框

环绕在内容周围的线条。

border-width：设置边框的宽度，默认为3px。

border-style：设置边框的样式，常见的样式有：dotted点状边框、solid实线边框、double双线边框等。（必须设置样式）

border-color：设置边框的颜色，默认值为黑色。

对于以上三个属性，由于边框有四个边，我们可以对每个边的值进行设置，规则为：“上、右、下、左”，“上、右左、下”，“上下、右左”。综合的连写形式为：border:width style color。

border-radius：设置圆角格式，单位常用px，值大到一定值时变为圆形则圆角不会再压缩。

            /* 设置边框 */
            /* 边框宽度 */
            border-width: 5px 15px 20px 10px;
            /* 边框样式 */
            border-style: solid;
            /* 圆角 */
            border-radius: 20px;
            /* 圆形 */
            /* border-radius: 50%; */

1.3 margin外边距

标签和标签之间的距离就是外边距，外边距是没有背景颜色的。

属性	作用	属性	作用
margin-top	上部外边距	margin-bottom	下部外边距
margin-left	左部外边距	margin-right	右部外边距

对于右侧的外边距，是基于元素本身的外边距，而不是相对于浏览器的外边距，因此可能是没有效果的。各个边的数值连写设置方式与边框设置类似。

            /* 外边距 */
            margin: 15px 5px 10px 20px;
            /* 让块级元素在水平方向上居中 */
            /* margin: 0px auto; */

外边距合并现象

1.在垂直方向上，上面的元素设置一个margin-bottom，下面的元素设置一个margin-top，上下元素的margin值不会叠加，而是谁的外边距更大，margin值就是谁的。

2.水平方向上的margin值会叠加。

1.4 padding内边距

内边距padding即为内容距离边框上下左右的距离，与border、margin的设置方式类似，此处不再赘述。

            /* 内边距 */
            padding: 3px 6px 9px 12px;

二、CSS盒子模型

2.1 内容盒子（W3C盒子）

内容盒子的width和height的值就是内容的大小，也就是上面所介绍的盒子。

内容宽高：width height

所占屏幕的宽度：width+paddingLeft+paddingRight+borderLeft+borderRight+marginLeft+marginRight

所占屏幕的高度：height+paddingTop+paddingBottom+borderTop+borderBottom+mar ginTop+marginBottom

盒子的宽高不包括外边距。

2.2 边框盒子（IE盒子）

边框盒子的width和height的值是包括内容、内边距、边框在内的大小。如果不想让内边距改变盒子本来的大小，那么我们可以通过box-sizing转换两种盒子模型。

内容区的宽：width-paddingLeft-paddingRight-borderLeft-borderRight

内容区的高：height-paddingTop-paddingBottom-borderTop-borderBottom

盒子宽高：width height

所占屏幕空间的宽：width+marginLeft+marginRight

所占屏幕空间的高：height+marginTop+marginBottom

            /* 切换盒子模型 */
            box-sizing: border-box;

外边距问题

如果父元素没有边框，我们在给子元素添加margin时，会导致父元素和子元素一起偏移，而不是子元素相对父元素偏移。因此，我们在企业开发中，我们要控制父子元素的距离，首先考虑padding，再考虑margin。

三、盒子的背景样式

background-color：背景颜色。

background-image：背景图片。

background-size：背景图片的大小。

background-repeat：背景图的平铺方式，取值有repeat默认在水平和垂直都平铺，no-repeat在水平和垂直都不平铺，repeat-x水平方向平铺，repeat-y在垂直方向平铺。

background-position：背景图片的定位。

            /* 背景颜色 */
            background-color: red;
            /* 背景图片 */
            background-image: url(https://img.crawler.qq.com/lolwebschool/0/JAutoCMS_LOLWeb_99196cdd231a1731c600703d8d0c1cb3/0
            );
            /* 背景图片尺寸 */
            background-size: 300px;
            /* 平铺方式 */
            background-repeat: no-repeat;
            /* 位置 */
            background-position: 100px 200px;