盒子模型内边距和外边距

最新推荐文章于 2024-07-22 13:45:23 发布

昱晟168

最新推荐文章于 2024-07-22 13:45:23 发布

阅读量3.4k

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_47267628/article/details/122202017

版权

HTMLCSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

内边距（padding）

padding属性用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

在这里插入图片描述

内边距（padding）影响盒子大小问题

当我们给了盒子指定padding值之后，发生了2件事情：

内容和边框有距离，添加了内边距
padding影响了盒子实际大小

也就是说，如果盒子已经有了宽度和高度（前提），此时再指定内边框，会撑大盒子。

解决方案：

如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            border-color: #fcfcfc;
        }

        a {
            color: #4c4c4c;
            text-decoration: none;
            display: inline-block;/*将A标签转成行内块元素*/
            line-height: 41px;
            padding: 0px 30px;/*往后在设置左右边距时，用padding指定，这样的好处不受字数的限制 */
        }
        a:hover {
            color: red;
            background-color: #009900;
        }
    </style>
</head>
<body>
<div class="nva">
    <a href="#">设为首页</a>
    <a href="#">手机新浪网</a>
    <a href="#">移动客户端</a>
    <a href="#">微博</a>
    <a href="#">关注我</a>
</div>
</body>
</html>

内边距（padding）不会撑大盒子的方式

如果盒子本身没有指定width/height属性，则此时padding不会撑大盒子大小；也不能设置为100%

意思就是当没有设置width或者height时，padding的设置也不会撑大盒子大小的

外边距（margin）

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

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

注意是：简写方式代表的意义跟padding完全一致

外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足三个条件：

必须是块级元素
盒子必须指定了宽度（width）
盒子左右的外边距都是设置auto

语法：

.header { width: 960px ; margin: 0 auto;}

常见的写法：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;最常用

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center;即可。

上面的意思就是：将行内元素当成文本元素，设置为text-align: center;即可

练习：设置盒子根据浏览器的大小自动调节盒子大小并自动水平居中（重点理解下面代码）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .header {
      /*
      1. 必须是块级元素
      2. 盒子必须指定了宽度（width）
      3. 盒子<font color=red>左右的外边距</font>都是设置auto*/

      width: 980px;
      height: 300px;
      color: red;
      background-color: pink;
      margin: 0px auto;/*在开发最常用这种写法*/
    }
  </style>
</head>
<body>
<div class="header">haikang</div>
</body>
</html>

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center;即可。

上面的意思就是：将行内元素当成文本元素，设置为text-align: center;即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .header {
      width: 430px;
      height: 300px;
      background-color: pink;
      margin: 0px auto;
      /*如果想要让div中的行内元素居中对齐，则需要找到行内元素的父级元素设置文本居中即可*/
      text-align: center;
    }
  </style>
</head>
<body>
<div class="header">
  <span>海康</span>
</div>
</body>
</html>

外边距合并问题（重点）

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系的块元素）父元素有外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

嵌套块元素垂直外边距的塌陷问题解决方案

可以为父元素定义边框
可以为父元素定义内边距
可以为父元素添加：overflow: hidden;

重点理解下面代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .father {
      width: 400px;
      height: 400px;
      background-color: red;
      margin-top: 100px;
      /*解决方式：
       1.可以为父元素定义上边距
       2.可以为父元素定义上内边距
       3.可以为父元素添加：overflow:hidden;
     */
      /*1.可以为父元素定义上边距*/
      border: 1px solid pink;

      /* 2.可以为父元素定义上内边距*/
      padding-top: 10px;

      /* 3.可以为父元素添加：overflow:hidden;*/

      overflow: hidden;/*开发常用*/
    }
    .son {
      width: 200px;
      height: 200px;
      background-color: pink;
      /*出现了塌陷问题，由于是子元素中有上外边距100px，父元素所以塌陷了*/
      /*解决方式：
        1.可以为父元素定义上边距
        2.可以为父元素定义上内边距
        3.可以为父元素添加：overflow:hidden;
      */
      margin-top: 100px;
    }
  </style>
</head>
<body>
<div class="father">
  <div class="son">海康</div>
</div>
</body>
</html>

清除内外边距

网页元素很多都带有的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距,所以每次在网页布局时先写这句话。

*{
	padding: 0px; /*清除内边距*/
	margin: 0px; /*清除外边距*/
}

注意：行内元素为了照顾兼容性，尽量只设置左右外边距，不要设置上下内外边距，但是转换块级元素和行内块元素就可以了

圆角边框样式(重点)

在CSS中，新增了圆角边框样式，这样我们的盒子就可以变成圆角了

border-radius: length;属性用于设置元素的外边框圆角

语法：

border-radius: length;

radius半径（圆的半径）原理：圆与边框的交集形成圆角效果

重点：

参数值可以为数值或百分比的形式

如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%

如果是个矩形，设置为高度的一半就可以做到椭圆形

该属性是一个简写属性，可以跟四个值，分别左上角，右上角，右下角，左下角（顺时针）

**分开写：border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    .content {
      width: 400px;
      height: 400px;
      background-color: pink;
      margin: 100px auto;
      line-height: 400px;
      /*测试没有设置width或height时，设置padding是不会撑大盒子*/
      padding-left: 100px;
      /*设置圆角边框*/
      border-radius: 20px;
    }
  </style>
</head>
<body>
<div>
  <div class="content">海康</div>
</div>
</body>
</html>

盒子阴影

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。

语法：

box-shadow: h-shadow(必写) v-shadow(必写) blur spread color inset;

值	描述
h-shadow	必须要写，水平阴影的位置，允许负值
v-shadow	必须要写，垂直阴影的位置，允许负值
blur	可写，模糊距离
spread	可写，阴影的尺寸
color	可写，阴影的颜色
inset	可写，将外部阴影（outset）改为内部阴影

注意

1.默认是外阴影（outset），但是不可以写这个单词，否则导致阴影无效

2.盒子阴影不占用空间，不会影响其他盒子排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    div {
      width: 400px;
      height: 400px;
      background-color: red;
      margin: 100px auto;
    }
    /*设置鼠标移到Div时，才出现盒子阴影的效果*/
    div:hover {
      box-shadow: 10px 10px 10px 5px #333333;
    }
  </style>
</head>
<body>
<div>海康</div>
</body>
</html>

文本阴影

在CSS中，我们可以使用text-shadow属性将阴影应用于文本

语法：

text-shadow: h-shadow(必写) v-shadow(必写) blur color;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    h1 {
      color: red;
      text-shadow: 10px 10px 5px #333333;
    }
  </style>
</head>
<body>
<h1>我是海康！</h1>
</body>
</html>

昱晟168

关注

2
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
盒子模型内边距和外边距

内边距（padding）padding属性用于设置内边距，即边框与内容之间的距离。属性作用padding-left左内边距padding-right右内边距padding-top上内边距padding-bottom下内边距内边距（padding）影响盒子大小问题当我们给了盒子指定padding值之后，发生了2件事情：内容和边框有距离，添加了内边距padding影响了盒子实际大小也就是说，如果盒子已经有了宽度和高度（前提），此时再指定内边框
复制链接

扫一扫

专栏目录