文章目录

前言
一、CSS是什么？
二、CSS 框模型概述
总结

前言

CSS已经发展得非常成功了，甚至像HTML一样成功！尽管有时候它的确令人难以掌控。现在无论是在浏览器还是应用商店，甚至聊天客户端，CSS都无处不在并且没有任何消退的迹象。随着这门语言的应用愈加广泛，其能力也在不断增强。

提示：以下是本篇文章正文内容，下面案例可供参考

一、CSS是什么？

CSS 指的是层叠样式表* (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

二、CSS 框模型概述

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

1.CSS 框模型概述

图例如下：
在这里插入图片描述
描述：
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

术语翻译：
element : 元素。
padding : 内边距，也有资料将其翻译为填充。
border : 边框。
margin : 外边距，也有资料将其翻译为空白或空白边。

2.框模型：CSS 内边距

元素的内边距在边框和内容区之间。
控制该区域最简单的属性是 padding 属性。
padding 属性接受长度值或百分比值(百分数值是相对于其父元素的 width 计算的)，但不允许使用负值。

CSS内边距属性：
在这里插入图片描述
代码如下（示例）：
如果希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：

h1{
    
     padding:10px; }

1.单边内边距属性:
通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
代码如下（示例）：

h1 {
    
    
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

2.内边距属性复合写法:

div {
    
    
        height: 200px;
        width: 200px;
        /*内边距的复合写法（简写）*/
        /* padding: 5px;     四边都有距离 */
        /* padding: 5px 10px;     上下5px，左右10px*/
        /* padding: 5px 10px 15px;    上5px 左右10px 下边15px */
        /* padding: 5px 10px 15px 20px;    上5px 右10px 下边15px 左边20px （顺时针） */
       /*1.如果div，有长宽度，padding会影响实际的div盒子的长宽度，如果保持一致的话，就让width/height减去多出来的内边距大小。*/
       /*2.如果盒子本身没有设定width/height，padding就不会撑大盒子大小*/
        }

3.框模型：CSS 边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。

CSS 边框属性：
在这里插入图片描述
代码如下（示例）：

例1：如果想要 h1 元素指定实线黑色边框，而右边框为实线红色，可以这样指定：

h1 {
    
    
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

例2：其他属性（举例）

 div {
    
    
            width: 300px;
            height: 200px;
            /*边框宽度*/
            border-width: 5px; 
            /* 实现边框 solid实线边框 dashed虚线边框 dotted点线边框  */
            border-style: dotted; 
            /*边框颜色*/
            border-color: pink; 
            /*边框的复合性写法（简写）没有顺序*/
            border: 1px solid red;
        }

4.框模型：CSS 外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

CSS 外边距属性：
在这里插入图片描述
代码如下（示例）：
例1：
想要h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)。

h1 {
    
    
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 5px;
}

例2：
外边距属性复合写法（与内边距的设置相同）这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的。

/*margin: top right bottom left*/
h1 {
    
    margin : 10px 0px 15px 5px;}

5.框模型：CSS 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

相邻块元素垂直外边距的合并（取值较大的）
图例如下：

解决方法：
尽量只给一个盒子添加 margin 值。

代码如下（示例）：

<style>
        .demo1,
        .demo2 {
    
    
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .demo2 {
    
    
            margin-top: 200px;
            margin-bottom: 20px;
        }
    </style>

    <!--相邻外边距，给一个div加外边距，避免合并问题-->
        <div class="demo1">大猫</div>
        <div class="demo2">小猫</div>

嵌套块元素垂直外边距的塌陷
图例如下：

解决方法：
       ① 可以为父元素定义上边框。
       ② 可以为父元素定义上内边距。
       ③ 可以为父元素添加 overflow:hidden。

代码如下（示例）：

<style>
  .father {
    
    
            width: 300px;
            height: 300px;
            background-color: purple;
            margin-top: 50px;
            /*1.为父边框定义上边框*/
            border-top: 2px solid transparent;
            /*2.指定内边距padding*/
            padding: 1px;
            /*3.添加overflow: hidden */
            overflow: hidden;
        }
</style>

   <!-- 镶嵌外边距 -->
        <div class="father">
              <div class="son"></div>
        </div>

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

总结

以上就是今天要讲的内容，本文仅仅简单总结CSS框模型的使用。

学习笔记----CSS框模型总结