您的位置:时时app平台注册网站 > web前端 > 课时108.外边距属性(掌握)彩世界网址

课时108.外边距属性(掌握)彩世界网址

2019-10-19 00:02

彩世界网址 1

border-bottom: 边框的宽度 边框的样式 边框的颜色;

盒模型

  • 什么是CSS盒模型?
  • CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型
  • CSS盒模型指那些可以设置宽度高度/内边距/边框/外边距的标签
  • 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以HTML标签又叫做盒模型
  • 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>48-CSS盒子模型</title>
    <style>
        span,a,b,strong{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 6px solid #000;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
我是span
<a href="#">我是超链接</a>
<b>我是加粗</b>
<strong>我是强调</strong>
</body>
</html>
  • 盒模型宽度和高度

  • 内容的宽度和高度

  • 就是通过width/height属性设置的宽度和高度

  • 元素的宽度和高度

  • 宽度 = 左边框 左内边距 width 右内边距 右边框

  • 高度 同理可证

  • 规律

  • 增加了padding/border之后元素的宽高也会发生变化

- 如果增加了padding/border之后还想保持元素的宽高, 那么就必须减去内容的宽高
  • 元素空间的宽度和高度

  • 宽度 = 左外边距 左边框 左内边距 width 右内边距 右边框 右外边距

  • 高度 同理可证

div的宽度不用设置了,因为默认和父元素body一样的宽度

什么是外边距?

边框属性

  • 什么边框?

  • 边框就是环绕在标签宽度和高度周围的线条

  • 边框属性的格式

  • 连写(同时设置四条边)

  • border: 边框的宽度 边框的样式 边框的颜色;

  • 示例代码

<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 5px solid blue;
            /*border: 5px solid;*/
            /*border: 5px blue;*/
            /*border: solid blue;*/
        }
</style>
  • 快捷键:

  • bd border: 1px solid #000;

  • 注意点:

  • 连写格式中颜色属性可以省略, 省略之后默认就是黑色

  • 连写格式中样式不能省略, 省略之后就看不到边框了

  • 连写格式中宽度可以省略, 省略之后还是可以看到边框

  • 按方向连写(分别设置四条边)

  • border-top: 边框的宽度 边框的样式 边框的颜色;

  • border-right: 边框的宽度 边框的样式 边框的颜色;

  • border-bottom: 边框的宽度 边框的样式 边框的颜色;

  • border-left: 边框的宽度 边框的样式 边框的颜色;

  • 示例代码

<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border-top:5px solid blue;
            border-right:10px dashed green;
            border-bottom:15px dotted purple;
            border-left:20px double pink;
        }
</style>
  • 快捷键:

  • bt border-top: 1px solid #000;

  • br border-right: 1px solid #000;

  • bb border-bottom: 1px solid #000;

  • bl border-left: 1px solid #000;

  • 按要素连写(分别设置四条边)

  • border-width: 上 右 下 左;

  • border-style: 上 右 下 左;

  • border-color: 上 右 下 左;

  • 示例代码

<style>
        .box{
            width: 500px;
            height: 500px;
            background-color: red;
            border-width: 5px 10px 15px 20px;
            border-style: solid dashed dotted double;
            border-color: blue green purple pink;
            /*border-color: blue green purple;*/
            /*border-color: blue green;*/
            /*border-color: blue;*/
        }
</style>
  • 注意点:

  • 这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右

  • 这三个属性的取值省略时的规律

  • 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样

  • 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样

  • 上 右 下 左 > 上 > 右下左边取值和上边一样

  • 非连写(方向 要素)

  • border-top-width: ;

  • border-top-style:;

  • border-top-color:;

  • border-right-width:;

  • border-right-style:;

  • border-right-color:;

  • border-bottom-width:;

  • border-bottom-style: ;

  • border-bottom-color:;

  • border-left-width:;

  • border-left-style:;

  • border-left-color:;

  • 示例代码

<style>
        .box{
            width: 500px;
            height: 500px;
            background-color: red;

            border-top-width: 5px;
            border-top-style: solid;
            border-top-color: blue;

            border-right-width: 10px;
            border-right-style: dashed;
            border-right-color: green;

            border-bottom-width: 15px;
            border-bottom-style: dotted;
            border-bottom-color: purple;

            border-left-width: 20px;
            border-left-style: double;
            border-left-color: pink;
        }
</style>
  • 注意点:
  • 同一个选择器中如果设置了多个边框属性, 后面的会覆盖前面的
.box3{
            border: 5px solid red;
            border-right:5px dashed red;
}

彩世界网址 2

padding-top: ;

外边距属性

  • 什么是外边距?

  • 标签和标签之间的距离就是外边距

  • 格式

  • 单独设置四条边

  • margin-top: ;

  • margin-right: ;

  • margin-bottom: ;

  • margin-left: ;

  • 示例代码

<style>
  .box1{
            margin-top:20px;
            margin-right:40px;
            margin-bottom:80px;
            margin-left:160px;
        }
</style>
  • 同时设置四条边

  • margin: 上 右 下 左;

  • 示例代码

<style>
  .box1{
            margin:20px 40px 80px 160px;
            /*margin:20px 40px 80px;*/
            /*margin:20px 40px;*/
            /*margin:20px;*/
        }
</style>
  • 注意点:

  • 这三个属性的取值省略时的规律

  • 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样

  • 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样

  • 上 右 下 左 > 上 > 右下左边取值和上边一样

  • 外边距的那一部分是没有背景颜色的

  • 外边距合并现象

  • 默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

  • 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>外边距合并现象</title>
  <style>
      span{
          display: inline-block;
          width: 100px;
          height: 100px;
          border: 1px solid #000;
      }
      div{
          height: 100px;
          border: 1px solid #000;
      }
      .hezi1{
          margin-right:50px;
      }
      .hezi2{
          margin-left:100px;
      }
      .box1{
          margin-bottom:50px;
      }
      .box2{
          margin-top:100px;
      }
  </style>
</head>
<body>
我是span我是span
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>
  • margin-top问题

  • 如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来

  • 如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性

  • 在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin(margin本质上是用于控制兄弟关系之间的间隙的)

  • 示例代码

<style>
        .big{
            width: 500px;
            height: 500px;
            background-color: red;
            /*不设置边框, big也会被small的顶部外边距顶下去*/
            border: 5px solid #000;
        }
        .small{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top:150px;
            margin-left:150px;
        }
    </style>
  • text-align:center;和margin:0 auto;区别

  • text-align: center; 是设置盒子中存储的文字/图片水平居中

  • margin:0 auto;是让盒子自己水平居中

  • 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>53-盒子居中和内容居中</title>
    <style>
        .father{
            width: 800px;
            height: 500px;
            background-color: red;
            /*文字图片会居中*/
            /*text-align: center;*/
            /*盒子自身会居中*/
            margin:0 auto;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="father">
    我是文字<br/>
    ![](images/girl.jpg)
    <div class="son"></div>
</div>
</body>
</html>

margin-left:

           margin-bottom:80px;

内边距属性

  • 什么是内边距?

  • 边框和内容之间的距离就是内边距

  • 格式

  • 单独设置四条边

  • padding-top: ;

  • padding-right: ;

  • padding-bottom: ;

  • padding-left: ;

  • 示例代码

<style>
        div{
            width: 98px;
            height: 90px;
            border: 1px solid #000;
            background-color: red;
        }
        .box1{
            padding-top: 20px;
            padding-right:40px;
            padding-bottom:80px;
            padding-left:160px;
       }
</style>
  • 同时设置四条边

  • padding: 上 右 下 左;

  • 示例代码

<style>
        div{
            width: 98px;
            height: 90px;
            border: 1px solid #000;
            background-color: red;
        }
        .box1{
            /*padding:20px 40px 80px 160px;*/
            /*padding:20px 40px 80px;*/
            /*padding:20px 40px;*/
            padding:20px;
        }
</style>
  • 注意点:
  • 这三个属性的取值省略时的规律
  • 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
  • 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
  • 上 右 下 左 > 上 > 右下左边取值和上边一样
  • 给标签设置内边距之后, 标签占有的宽度和高度会发生变化
  • 给标签设置内边距之后, 内边距也会有背景颜色

2.外边距的那一部分是没有背景颜色的

           border-left:20px double pink;

box-sizing属性

  • CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变

  • box-sizing取值

  • content-box

  • 元素的宽高 = 边框 内边距 内容宽高

  • border-box

  • 元素的宽高 = width/height的宽高

  • 增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度

  • 示例代码

<!--增加padding/border之后元素宽高会变大-->
<style>
.box1{
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
    border: 20px solid #000;
    padding: 20px;
}
</style>
<!--增加padding/border之后元素宽不会变大-->
<style>
.box1{
 box-sizing: border-box;
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
    border: 20px solid #000;
    padding: 20px;
}
</style>

2.格式

           /*text-align: center;*/

注意点:

上 右 下 左 > 上 > 右下左边取值和上边一样

接下来我们可以进行margin属性的测试了

       }

彩世界网址 3

盒模型宽度和高度

彩世界网址 4

   

margin-top:

padding-left: ;

怎么解决呢?你可以将回车全部删除掉

     }

彩世界网址 5

     span{

发现有三个span连成一排了,它们彼此之间有间距,但是你要知道这个间距并不是你的外边距,我们在学习字符实体时知道,空格,回车都会被压缩成一个空格来处理,所以这个间距是由回车引起的。

           background-color: blue;

再将以上代码注释掉,写成以下的样式

           background-color: red;

2.1非连写

           border-top-width: 5px;

然后我们发现不论是span还是div和body都有一段外边距

padding-bottom: ;

上  右  下  左 > 上  右 下>左边的取值和右边的一样

给标签设置内边距之后, 标签占有的宽度和高度会发生变化

margin-bottom:

盒模型

margin-right:

           width: 100px;

彩世界网址 6

           height: 100px;

上  右 下 左>上  右>左边的取值和右边的一样 下边的取值和上边的一样

什么是CSS盒模型?

我们给span添加一个背景颜色

           border-right-width: 10px;

标签和标签之间的距离就是外边距

   padding: 20px;

1.什么是外边距?

border-left: 边框的宽度 边框的样式 边框的颜色;

然后我们发现span并没有宽度和高度,因为span是行内元素,没有办法设置宽高,所以我们将行内元素改为行内块元素,添加一条代码:display:inline-block;

         margin-bottom:50px;

在这里,我们为了方便测试,需要在style中添加一段代码

格式

上  右 下 左>上>右下左的取值和上边的一样

border-style: 上 右 下 左;

彩世界网址 7

         border: 1px solid #000;

彩世界网址 8

           width: 500px;

1.这三个属性的取值省略时的规律

同时设置四条边

彩世界网址 9

border-box

彩世界网址 10

       }

然后我们发现外边距的那一部分没有背景颜色,这个就是它和内边距不太一样的地方,内边距的地方是有颜色的,而外边距的部分是没有颜色的。

           background-color: red;

我们发现间距就没有了,接下来,我们在span标签的后面添加一条div,<div class="box4"></div>,并在样式中设置

           border: 5px solid blue;

           width: 100px;

           padding-bottom:80px;

           /*margin:20px;*/

       }

         height: 100px;

   ![](images/girl.jpg)

margin-top: ;

同时设置四条边

       }

bl border-left: 1px solid #000;

盒模型

     .box1{

       .box1{

CSS盒模型指那些可以设置宽度高度/内边距/边框/外边距的标签

我是div

示例代码

           border: 5px solid red;

         margin-left:100px;

上 右 下 左 > 上 > 右下左边取值和上边一样

padding: 上 右 下 左;

示例代码

   width: 200px;

       }

           background-color: red;

border-color: 上 右 下 左;

       .box{

       div{

注意点:

       div{

.box3{

       .box1{

示例代码

           height: 100px;

     .hezi2{

margin-left: ;

box-sizing: border-box;

           border-bottom:15px dotted purple;

CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变

     }

     .hezi1{

       }

border: 边框的宽度 边框的样式 边框的颜色;

单独设置四条边

上 右 下 左 > 上 > 右下左边取值和上边一样

           border-right:5px dashed red;

border-top: 边框的宽度 边框的样式 边框的颜色;

我是加粗

     }

       }

注意点:

           margin:20px 40px 80px 160px;

           border-right:10px dashed green;

margin:0 auto;是让盒子自己水平居中

           height: 100px;

bt border-top: 1px solid #000;

           /*不设置边框, big也会被small的顶部外边距顶下去*/

元素的宽度和高度

           /*margin:20px 40px;*/

}

           /*border: solid blue;*/

标签和标签之间的距离就是外边距

           /*文字图片会居中*/

上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样

           /*padding:20px 40px;*/

           border-left-color: pink;

br border-right: 1px solid #000;

     .box2{

这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以HTML标签又叫做盒模型

注意点:

           /*border: 5px blue;*/

外边距的那一部分是没有背景颜色的

注意点:

           width: 500px;

宽度 = 左外边距 左边框 左内边距 width 右内边距 右边框 右外边距

           border: 6px solid #000;

           /*border-color: blue;*/

示例代码

增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度

border-left-width:;

规律

按方向连写(分别设置四条边)

     div{

           /*border-color: blue green;*/

border-width: 上 右 下 左;

           border-bottom-width: 15px;

同一个选择器中如果设置了多个边框属性, 后面的会覆盖前面的

示例代码

     }

示例代码

         height: 100px;

           background-color: red;

           height: 500px;

margin-top问题

元素的宽高 = width/height的宽高

内容的宽度和高度

       .box{

border-top-color:;

.box1{

           /*padding:20px 40px 80px;*/

快捷键:

元素空间的宽度和高度

默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

text-align:center;和margin:0 auto;区别

           width: 98px;

我是超链接

           width: 100px;

给标签设置内边距之后, 内边距也会有背景颜色

padding-right: ;

         width: 100px;

           margin:0 auto;

           background-color: red;

外边距属性

示例代码

           width: 800px;

外边距合并现象

高度 同理可证

边框属性

边框就是环绕在标签宽度和高度周围的线条

按要素连写(分别设置四条边)

           margin: 20px;

           background-color: blue;

我是div

border-bottom-style: ;

示例代码

       span,a,b,strong{

什么是内边距?

增加了padding/border之后元素的宽高也会发生变化

           height: 90px;

宽度 = 左边框 左内边距 width 右内边距 右边框

非连写(方向 要素)

       }

       .small{

       }

           border-width: 5px 10px 15px 20px;

上 右 下 左 > 上 右 下 > 左边的取值和右边的一样

示例代码

连写(同时设置四条边)

margin-right: ;

什么边框?

   background-color: blue;

这三个属性的取值省略时的规律

           height: 500px;

   

单独设置四条边

           border: 1px solid #000;

       }

高度 同理可证

border-left-style:;

           display: inline-block;

       }

我是span我是span

       .box{

           /*border: 5px solid;*/

           border: 5px solid #000;

   height: 200px;

           border-color: blue green purple pink;

           margin-left:150px;

元素的宽高 = 边框 内边距 内容宽高

bd border: 1px solid #000;

连写格式中样式不能省略, 省略之后就看不到边框了

上 右 下 左 > 上 右 下 > 左边的取值和右边的一样

}

这三个属性的取值省略时的规律

   float: right;

在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin(margin本质上是用于控制兄弟关系之间的间隙的)

   我是文字

连写格式中颜色属性可以省略, 省略之后默认就是黑色

border-right: 边框的宽度 边框的样式 边框的颜色;

     }

 .box1{

box-sizing取值

}

   background-color: blue;

示例代码

   height: 200px;

           border: 1px solid #000;

           height: 100px;

text-align: center; 是设置盒子中存储的文字/图片水平居中

      }

content-box

- 如果增加了padding/border之后还想保持元素的宽高, 那么就必须减去内容的宽高

边框属性的格式

           margin-top:20px;

           background-color: red;

   border: 20px solid #000;

         border: 1px solid #000;

         margin-top:100px;

         display: inline-block;

           border-right-style: dashed;

彩世界网址 11

上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样

我是span

示例代码

border-bottom-width:;

margin-bottom: ;

           padding:20px;

           border-right-color: green;

边框和内容之间的距离就是内边距

           background-color: red;

内边距属性

           padding: 20px;

border-bottom-color:;

       }

       .box{

我是强调

           height: 200px;

           /*border-color: blue green purple;*/

         margin-right:50px;

           padding-right:40px;

           /*margin:20px 40px 80px;*/

           border-top-style: solid;

           width: 200px;

border-right-style:;

           background-color: red;

       .big{

           border-left-width: 20px;

           border-top:5px solid blue;

           margin-left:160px;

border-left-color:;

           border-bottom-color: purple;

bb border-bottom: 1px solid #000;

       .son{

       }

           /*盒子自身会居中*/

box-sizing属性

           height: 90px;

margin: 上 右 下 左;

连写格式中宽度可以省略, 省略之后还是可以看到边框

border-right-width:;

           width: 98px;

上 右 下 左 > 上 右 下 > 左边的取值和右边的一样

           border-style: solid dashed dotted double;

   float: right;

.box1{

上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样

这三个属性的取值省略时的规律

示例代码

   border: 20px solid #000;

这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右

border-top-style:;

           height: 500px;

格式

   width: 200px;

   padding: 20px;

就是通过width/height属性设置的宽度和高度

快捷键:

           height: 500px;

           border-bottom-style: dotted;

           margin-right:40px;

       .father{

如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来

           padding-left:160px;

           /*padding:20px 40px 80px 160px;*/

border-top-width: ;

CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型

       }

           margin-top:150px;

           width: 100px;

示例代码

     }

           border-top-color: blue;

           width: 500px;

           border-left-style: double;

           padding-top: 20px;

border-right-color:;

注意点:

 .box1{

如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性

本文由时时app平台注册网站发布于web前端,转载请注明出处:课时108.外边距属性(掌握)彩世界网址

关键词:

  • 上一篇:没有了
  • 下一篇:没有了