盒子模型（box modle）

吱吱吱-

已于 2023-03-02 20:13:13 修改

阅读量93

点赞数

文章标签：前端 html css

于 2023-02-15 19:03:10 首次发布

本文链接：https://blog.csdn.net/m0_73970213/article/details/128953558

版权

一、文档流（normal flow）

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

文档流是网页最底层

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

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

元素在文档流中的特点

①块元素

1:会独占一行

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

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

② 内联元素（行内元素）

1:不会独占一行

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

③行内块元素

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: rgb(36, 223, 11);
      }
      span {
        background-color: rgb(21, 197, 228);
        width: 100px;
        /* height: 200px; */
        display: inline-block;
      }
    </style>
  </head>
  <body>
    

    <div class="box">大江东去，浪淘尽，千古风流人物。
        故垒西边，人道是，三国周郎赤壁。
     </div>
     
    <span>乱石穿空，惊涛拍岸，卷起千堆雪。
        江山如画，一时多少豪杰。乱石穿空，惊涛拍岸，卷起千堆雪。
        江山如画，一时多少豪杰。
    </span>
  </body>
</html>

二、盒子模型

（一）什么是盒子模型？

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

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

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

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

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

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

盒模型、盒子模型、框模型（box model）
内容区冰箱
内边距泡沫
边框纸盒子
外边距快递的位置

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

1:内容区(content)
元素中所有的子元素和文本内容都在内容区中排列
默认情况：设置width，height都是内容区宽高

2:边框（border）元素设置边框
边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部
设置边框必须指定三个样式边框大小、边框的样式、边框的颜色

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
    .box1{
      width: 200px;
      height: 100px;
      background-color: rgb(52, 241, 156);
    }
    .box2{
      width: 40%;
      height: 90%;
      background-color: rgb(13, 59, 227);
    }

    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>
</html>

（二）盒子模型—边框

1:边框（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 rgb(251, 117, 231) transparent ;
      }
      .box1{
        width: 200px;
        height: 200px;
        background-color: rgb(92, 215, 234);
        /* 简写border 
           1、 同时设置边框的大小，颜色，样式，没有顺序要求
           2、可以单独设置一个边框
              border-top:; 设置上边框
              border-right  设置右边框
              border-bottom  设置下边框
              border-left   设置左边框
           3、去除某个边框
               border:none;
        */
        border: rgb(239, 101, 165) solid 10px;
        border-bottom: none;
        /* border-top:10px double green ; */
      
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="box1"></div>
  </body>
</html>

用border radius画圆

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        /* 圆 */
        .box1 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            border-radius: 200px;
            margin: 20px 20px;

        }

        /* 半圆 */
        .box2 {
            width: 200px;
            height: 100px;
            background-color: blueviolet;
            border-radius: 100px 100px 0 0;
           

        }

        /* 四分之一圆 */
        .box3 {
            width: 100px;
            height: 100px;
            background-color: rgb(43, 226, 104);
            border-radius: 100px 0 0 0;
            margin: 30px 30px;
        }

        /* 小箭头（三角形） transparent用来设置透明度 这里元素的宽度和高度都要为0 */
        .box4 {
            width: 0;
            height: 0;
            border: 70px red solid;
            border-color: transparent rgb(238, 175, 228) transparent transparent;


        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
  
</body>

效果如图

2、内边距

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      /* 内边距  padding
      是内容区和边框之间的距离，会影响到整个盒子的大小
      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>

吱吱吱-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型（box modle）

css盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、边距、填充和实际内容。盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素。margin(外边距)-清除边框外的区域，外边距是透明的Border(边框)-围绕在内边距和内容外的边框padding(内边距)-清除内容周围的区域，内边距是透明的Content(内容)-盒子的内容，显示文本和图像影响盒子大小的因素：内容区，内边距，边框会影响盒子的大小，外边距不会影响盒模型、盒子模型、框模型（box model）
复制链接

扫一扫