css盒子模型

最新推荐文章于 2024-08-06 21:01:08 发布

CodeDoraemon

最新推荐文章于 2024-08-06 21:01:08 发布

阅读量230

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_40417070/article/details/113536639

版权

CSS 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

文章目录

1. css盒子模型
2. 盒子模型（Box Model）组成
3. 盒子模型之边框 border
- 3.1 示例代码
- 3.2 运行结果
4. 表格的细线边框
5. 边框会影响盒子的实际大小实际中需要考虑

1. css盒子模型

在这里插入图片描述
什么是盒子模型？

核心是利用 CSS 进行盒子的位置的摆放

2. 盒子模型（Box Model）组成

在这里插入图片描述

padding (内边距)：默认的文字是再左上角的，通过 padding 可以设置文字距离边框的距离
margin （外边距）：控制盒子之间的距离

3. 盒子模型之边框 border

在这里插入图片描述
border style :solid(实线边框)

3.1 示例代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型</title>

    <style>
        div {
            width: 300px;
            height: 200px;

            /*边框的粗细 border-width 一般使用 px 单位*/
            border-width: 5px;

            /*边框的实线样式 dashed 虚线边框*/
            /*dotted 为点线边框*/
            border-style: solid;
            border-style: dashed;
            border-style: dotted;

            /*边框的颜色 */
            border-color: skyblue;

            /*边框的符合性写法 没有顺序 大小粗细 样式 颜色*/
            border: 3px solid pink;

            /*边框的分开写法 四个边可以分开进行样式的书写*/
            /*单独设置上边框*/
            border-top: 5px dashed green;
            border-bottom: 3px dotted palegoldenrod;
        }

        /*写一个200 * 200盒子 上边框为红色，其余为蓝色*/

        div {
            width: 200px;
            height: 200px;

            /*一起写比较简单*/
            border: 1px solid blue;

            /*层叠性 只会层叠上边框即相互重合的区域*/
            border-top: red;
        }
    </style>
</head>

<body>
    <div>hello</div>
    <div>klklkl</div>
</body>

</html>

3.2 运行结果

在这里插入图片描述

4. 表格的细线边框

    <style>
        /*单独提出来修改表格的大小*/
        table {
            width: 500px;
            height: 260px;
        }


        th {
            height: 35px;

        }

        table,
        td {
            border: 1px solid pink;

            /*合并相邻的边框 看起来会细一些*/
            border-collapse: collapse;

            /*字体大小*/
            font-size: 14px;

            /*字体的处于的位置*/
            text-align: center;
        }
    </style>

5. 边框会影响盒子的实际大小实际中需要考虑

<!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 {
            width: 180px;
            height: 180px;
            background-color: deepskyblue;
            border: 10px solid red;
        }
    </style>
</head>
<!-- 制作一个200 * 200盒子，盒子有 10px 的红色边框 -->

<body>

</body>
<div></div>

</html>