css盒子模型

最新推荐文章于 2024-10-17 17:03:17 发布

Eine .

最新推荐文章于 2024-10-17 17:03:17 发布

阅读量856

点赞数 5

文章标签： css 前端

本文链接：https://blog.csdn.net/2302_82219034/article/details/139985090

版权

1.盒子模型介绍

CSS盒子模型就是在网页设计中经常用到的一种思维模型，是CSS布局的基石，主要规定了元素是如何显示元素间相互关系。定义所有元素都可以有像盒子一样的平面空间和外形。包含内容区、填充、边框和外边距，这就是盒模型。

作用：网页元素是如何显示及元素间相互关系的。

盒模型的组成：content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）

盒子模型结构图

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。盒子的边缘，盒子边缘或盒子边缘的厚度
Padding(内边距) - 清除内容周围的区域，内边距是透明的。在盒子里面，盒子和内容之间，显示在盒子和内容之间的空白区，补白、内填充或叫内边距
Content(内容) - 盒子的内容，显示文本和图像，元素的宽和高，内容，也就是元素的width、height

2.外边距

外边距属性可以单独设置，也可以使用复合写法。外边距越大，盒子之间的距离越大。

属性名:padding
取值:数字+px

取值个数	效果
一个值	四边
两个值	上下和左右
三个值	上和左右和下
四个值	上右下左

3.内边距

内边距和外边距同理

4.边框

盒子的边缘，盒子边缘或盒子边缘的厚度

属性名:border (这是一个复合属性)
属性值:数字+px 线条的种类颜色(不分先后顺序)

1.可以规定边框的类型，最常用的是线条的种类有: solid(实线) dashed(虚线)

border-style: solid;

2.边框的宽度

/*border-width: 10px; */

3..边框的颜色

/* border-color: gold; */

4.边框的阴影

/*box-shadow: 10px 10px 10px gray;*/

5.边框的弧度百分比(0~50)像素(0~100)*/

/*border-radius: 50px;*/

6.复合写法

/*border: 1px solid rgba(202,190, 190, 0.001);*/

比如以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框样式</title>
    <style>
        div{
            height: 200px;
            width: 200px;
            margin:auto;
            text-align: center;
            background-color: azure;
            /* 1.边框的分量 top/bottom/left/right */
            /* border-top: 1px solid red;
            border-bottom: 1px solid red; */

            /* 2.边框的宽度 */
            /* border-width: 10px; */

            /* 3.边框的样式 */
            border-style: solid;

            /* 4.边框的颜色 */
            /* border-color: gold; */

            /* 5.复合写法 */
            border: 1px solid rgba(202,190, 190, 0.001);

            /* 6.边框的阴影 */
            box-shadow: 10px 10px 10px gray;

            /* 7.边框的弧度 百分比(0~50)像素(0~100)*/
            border-radius: 50px;

        }

        input{
            border-radius: 10%;
        }
    </style>
</head>
<body>
    <div>
        <h1>sign in</h1>
        username：<input type="text"><br>
        password：<input type="password">
    </div>
</body>
</html>

5.内容

作用:利用width和height属性设置内容区域的大小,默认是盒子内容区域的大小

属性值:width和height

取值:数字+px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div {
            width: 200px;
            height:200px ;
      }
    </style>
</head>
<body>
    <div>这是一个div</div>
</body>
</html>

在浏览器中按F12进行检查,就可以看到盒子的内容区域正是我设置的 width: 200px; width: 200px;