CSS与CSS3基础知识（四）——盒子模型的内外边距以及box-shadow和box-sizing属性属性

最新推荐文章于 2024-04-04 02:42:34 发布

新员工需要呵护

最新推荐文章于 2024-04-04 02:42:34 发布

阅读量610

点赞数 9

分类专栏： CSS与CSS3基础文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_47228284/article/details/134669047

版权

CSS与CSS3基础专栏收录该内容

4 篇文章 1 订阅

订阅专栏

希望可以在CSDN与大家一起成长，如有错误请大家多多批评指教！

CSS 英文全称为Cascading Style Sheet，中文译为“层叠样式表”。CSS以 HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且可以针对不同的浏览器设置不同的样式。在CSS与CSS3基础知识（三）(点击可复习)中学习了盒子模型的边框属性，现在一起学习盒子模型内外边距以及阴影属性吧！

1.内边距属性

在网页设计中，为了调整内容在盒子中的显示位置，常常需要给标签设置内边距，所谓内边距是指标签内容与边框之间的距离，也称内填充，内填充不会影响标签内容的大小。在CSS中padding属性用于设置内边距，同边框属性border一样，padding 也是一个复合属性，其相关设置方法如下:

padding-top:上内边距;
padding-right:右内边距;
padding-bottom:下内边距;
padding-lef:左内边距;
padding:上内边距 [ 右内边距下内边距左内边距 ]

同边框相关属性一样，使用padding属性定义内边距时，必须按顺时针顺序采用值复制，一个值为四边、两个值为上下/左右，三个值为上/左右/下。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style type="text/css">
        .one {border:5px solid #d43b1f; } /*为图像和段落设置边框*/
        img {
            padding: 20px 20px 0px 20px;/*图像内边距上为20px、右为20px、下为0px、左为20px*/
            width: 300px;
            height:350px;
        }
        p{ padding:5%; }  /*段落的内边距为父标签宽度的5号*/
    </style>
</head>
<body>
<img class="one" src="image/flower.JPG" alt="小红花"/>
<p class="one">小红花是我在下课回宿舍路上捡滴</p>
<div></div></body>
</body>
</html>

**由于段落的内边距设置为了%数值，当拖动浏览器窗口改变其宽度时，段落的内边距会随之发生变化(此时<p>标签的父标签为<body> )。
**如果设置内外边距为百分比，则不论上下或左右的内外边距，都是相对于父标签宽度width的百分比，伴随父标签width的变化而变化，和高度height 无关。

2.外边距属性

网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置外边距。所谓外边距是指标签边框与相邻标签之间的距离。在CSS中margin属性用于设置外边距，它是一个复合属性，与内边距padding的用法类似，设置外边距的方法如下。

margin-top: 上外边距;
margin-right: 右外边距;
margin-bottom: 下外边距;
margin-left: 左外边距;
margin: 上外边距 [ 右外边距下外边距左外边距 ];

margin相关属性的值，以及复合属性margin取1~4个值的情况与padding相同。但是外边距可以使用负值，使相邻标签发生重叠。当对块级元素应用宽度属性width,并将左右的外边距都设置为auto,可使块级元素水平居中，实际工作中常用这种方式进行网页布局，示例代码如下:

p{ margin:0 auto; }

下面举个栗子演示外边距的用法和效果。新建HTML页面，在页面中添加一个图像和一个段落，然后使用marargin相关属性，对图像和段落进行排版。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style type="text/css">
         /**{
      margin:0;
      padding:0;
         }加上这句就可以删除浏览器默认值，但不建议使用。*/
        img {
            width: 200px;
            border: 5px solid #09C;
            float: left; /*设置图像左浮动*/
            margin-right: 50px; /*设置图像的右外边距*/
            margin-left: 30px; /*设置 图像的左外边距*/
            /*上面两行代码等价于margin:0 50px0 30px; */
        }
        p{text-indent: 2em; }  /*段落文本首行缩进2字符*/
    </style>
</head>
<body>
<img class="one" src="image/flower.JPG" alt="小红花"/>
<p class="one">小红花是我在下课回宿舍路上捡滴，回到宿舍我就把它放进小本本里面了，做一个标本！</p>
<div></div></body>
</body>
</html>

3.box-shadow属性

在网页制作中，经常需要对盒子添加阴影效果。使用CSS3中的box—shadow属性可以轻松实现阴影的添加，其基本语法格式如下:
box-shadow: h-shadow v-shadow blur spread color outset;
在上面的语法格式中，box-shadow属性共包含6个参数值，如表所示。

**其中h-shadow和v-shadow为必选参数值，不可以省略，其余为可选参数值。其中，“阴影类型”默认outset更改为inset后,阴影类型变为内阴影。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影属性</title>
    <style type="text/css">
        .one{
            width: 200px;
            padding: 20px;
            /*内边距20px*/
            border-radius: 50%;
            /*将图像设置为圆形效果*/
            border: 1px solid #666;
            box-shadow: 5px 5px 10px 2px #999 inset;
        }
        .two{
            width: 200px;
            padding: 20px;
            /*内边距20px*/
            border-radius: 50%;
            /*将图像设置为圆形效果*/
            border: 1px solid #666;
            box-shadow: 5px 5px 10px 2px #999 ;
        }
    </style>
</head>
<body>
<img class="one" src="image/flower.JPG" alt="小红花"/>
<img class="two" src="image/flower.JPG" alt="小红花"/>
<div></div></body>
</body>
</html>

**第11行代码给图像添加了内阴影样式。使用内阴影时须配合内边距属性padding，让图像和阴影之间拉开一定的距离，不然图片会将内阴影遮挡。
**同text- -shadow属性(文字阴影属性)一样，box-shadow属性也可以改变阴影的投射方向以及添加多重阴影效果，示例代码如下:

box-shadow:5px 5px 10px 2px #999 inset,-5px -5px 10px 2px #73AFEC inset;

4.box-sizing属性

当一个盒子的总宽度确定之后,要想给盒子添加边框或内边距,往往需要更改width属性值，才能保证盒子总宽度不变。但是这样的操作烦琐且容易出错，运用CSS3的box-sizing 属性可以轻松解决这个问题。box-sizing属性用于定义盒子的宽度值和高度值是否包含内边距和边框,其
基本语法格式如下: box-sizing: content-box/border-box;

●content-box :浏览器对盒子模型的解释遵从W3C标准，当定义width和height时，它的参数值不包括border和padding。
●border-box:当定义width和height时,border和padding的参数值被包含在width和height之内。
下面举个栗子来演示box-sizing 属性的用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-sizing</title>
    <style type="text/css">
        .box1 {
            width: 300px;
            height: 100px;
            background: gray;
            border: 10px solid blue;
            box-sizing: content-box;
        }
        .box2 {
            width: 300px;
            height: 100px;
            background: gray;
            border: 10px solid blue;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="box1">content-box属性</div>
<div class="box2">border-box属性</div>
</body>
</body>
</html>

新员工需要呵护

关注

9
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS与CSS3基础知识（四）——盒子模型的内外边距以及box-shadow和box-sizing属性属性

希望可以在CSDN与大家一起成长，如有错误请大家多多批评指教！CSS 英文全称为Cascading Style Sheet，中文译为“层叠样式表”。CSS以 HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且可以针对不同的浏览器设置不同的样式。在(点击可复习)中学习了盒子模型的边框属性，现在一起学习盒子模型内外边距以及阴影属性吧！
复制链接

扫一扫