前端学习盒子模型

最新推荐文章于 2024-03-26 10:40:56 发布

元气满满@WJW

最新推荐文章于 2024-03-26 10:40:56 发布

阅读量44

点赞数

分类专栏：前端学习文章标签：前端学习

原文链接：https://blog.csdn.net/Antoine__/article/details/127307303?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170374541916800225517959%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=170374541916800225517959&biz_id=0&utm_medi

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、文档流

网页是一个多层的结构，设置样式也是一层一层的设置，最终我们看到的最上面的一层。

文档流是网页最底层

      我们创建的元素默认情况下，都在文档流中

      元素分为两种状态：在文档流中，脱离文档流

元素在文档流中的特点

    块元素

       1:会独占一行

       2:块元素的宽度默认是父元素的100%

       3:块元素的高度默认是被内容撑开的

    内联元素（行内元素）

       1:不会独占一行

       2:宽度高度默认都是被内容撑开的，不能自己定义宽高

    行内块元素

       1、不会独占一行，可以设置宽高

一旦元素通过某种方式，例如浮动、绝对定位等等，脱离文档流，则原来在文档流中划分元素类型，特点都不复存在

二、盒子模型

什么是盒子模型？

css盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、边距、填充和实际内容。盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素。

margin(外边距)-清除边框外的区域，外边距是透明的

Border(边框)-围绕在内边距和内容外的边框

padding(内边距)-清除内容周围的区域，内边距是透明的

Content(内容)-盒子的内容，显示文本和图像

影响盒子大小的因素：内容区，内边距，边框会影响盒子的大小，外边距不会影响

内容区（content）

在这里插入图片描述

写俩个盒子box1和box2，其中box2在box1中，我们可以把box2当做是box1的内容部分

在这里插入图片描述

给俩个盒子写出样式

在这里插入图片描述

三、盒子模型-边框

边框（border）元素设置边框

    边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部

    设置边框必须指定三个样式 边框大小、边框的样式、边框的颜色

      边框大小：border-width

      边框样式：border-style

      边框颜色：border-color

代码展示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
 
      .box {
        width: 0px;
        height: 0px;
        /* background-color: rgb(222, 255, 170); */
        /* 边框的大小   如果省略，有默认值，大概1-3px ，不同的浏览器默认大小不一样
        border-width 后可跟多个值
           四个值   上   右  下  左
           三个值   上  左右   下
           二个值   上下  左右
           一个值   上下左右
           
        单独设置某一边的边框宽度
         border-bottom-width
         border-top-width
         border-left-width
         border-right-width
        */
        border-width: 20px;
        /* border-left-width:40px ; */
        /*
         边框的样式   
           border-style  可选值
            默认值：none
            实线  solid
            虚线  dashed
            双线  double
            点状虚线   dotted
            */
        border-style: solid;
        /* 设置边框的颜色  默认值是黑色
           border-color  也可以跟多个值
           四个值   上   右  下  左
           三个值   上  左右   下
           二个值   上下  左右
           一个值   上下左右
           对应的方式跟border-width是一样
          单独设置某一边的边框颜色
          border-XXX-color: ;  
        */
        border-color:  transparent transparent red transparent ;
      }
      .box1{
        width: 200px;
        height: 200px;
        background-color: turquoise;
        /* 简写border 
           1、 同时设置边框的大小，颜色，样式，没有顺序要求
           2、可以单独设置一个边框
              border-top:; 设置上边框
              border-right  设置右边框
              border-bottom  设置下边框
              border-left   设置左边框
           3、去除某个边框
               border:none;
        */
        border: blue solid 10px;
        border-bottom: none;
        /* border-top:10px double green ; */
      
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="box1"></div>
  </body>
</html>

代码中的注释一定要注意看，全部都是知识点

四、盒子模型-内边距

内边距 padding

  是内容区和边框之间的距离，会影响到整个盒子的大小

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      /* 
      1、  padding-top: ; 上内边距
        padding-left:;  左内边距
        padding-right:;  右内边距
        padding-bottom:;  下内边距
      2、padding简写  可以跟多个值
          四个值  上  右  下  左
          三个值  上  左右  下
          二个值   上下   左右
          一个值   上下左右
          
    
    */
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        /* padding-top:30px ;
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 30px; */
        padding: 40px;
        border: 10px transparent solid;
      }
      .box1:hover {
        border: 10px red solid;
      }
 
      /*
			 * 创建一个子元素box2占满box1，box2把内容区撑满了
			 */
      .box2 {
        width: 100%;
        height: 100%;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>
</html>

五、盒子模型-外边距

外边距不会影响到盒子的大小

    可以控制盒子的位置

       margin-top:;  正值 元素向下移动  负值 元素向上移动

       margin-left:; 正值  元素向右移动  负值  元素向左移动

       margin-bottom:;  正值  元素自己不动，其靠下的元素向下移动，负值 元素自己不动，其靠下的元素向上移动

       margin-right: ; 正值负值都不动

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
    /* 外边距  不会影响到盒子的大小
        可以控制盒子的位置
           margin-top:;  正值 元素向下移动  负值 元素向上移动
           margin-left:; 正值  元素向右移动  负值  元素向左移动
           margin-bottom:;  正值  元素自己不动，其靠下的元素向下移动，负值 元素自己不动，其靠下的元素向上移动
           margin-right: ; 正值负值都不动
        简写 margin  可以跟多个值
          规则跟padding一样
    */
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        border: 10px solid red;
        /* margin-top: -100px;
        margin-left: -100px;
        margin-bottom: -100px;
        margin-right: -100px; */
        margin: 40px;
      }
 
      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>