• 前端 CSS 盒子模型


    盒模型的概念

    在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。

    盒模型有两种:标准模型和IE模型。我们在这里重点讲标准模型。

    盒模型示意图

    盒模型的属性

    • margin(外边框):            用于控制标签与标签之间的距离;margin的最基本用途就是控制标签周围空间的间隔,从视觉角度上达到相互隔开的目的。
    • padding(内边框):           用于控制内容与边框之间的距离;   
    • Border(边框):     围绕在内边距和内容外的边框。
    • Content(内容):   盒子的内容,显示文本和图像
    • width:指的是内容的宽度,而不是整个盒子的真实的宽度。
    • height: 指的是内容的高度,而不是整个盒子的真实的高度。

    margin 外边框

    border 边框

    padding 内边距

     

     content内容

    例子

    <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">
        <title>Title</title>
        <style>
            div{
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div>
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容
        </div>
    </body>
    </html>

    页面显示是这样子

    加上padding 20px效果

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <div>
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容
        </div>
    </body>
    </html>

    文字外面加上内边距 

    再加上border 10px

    <!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">
        <title>Title</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                padding: 20px;
                border: 10px solid red;
            }
        </style>
    </head>
    <body>
        <div>
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容
        </div>
    </body>
    </html>

     在内边距外面 加上10px的红色边框

  • 相关阅读:
    实验七---类的多态
    实验六
    实验五---排序、质数
    实验四---杨辉三角
    node中间件KOA函数
    java文件名判断练习
    npm install 安装报错错误问题
    bundle is not defined 手动搭建项目架构(一)
    ztree实现拖拽功能
    js单线程 详解 来自知乎
  • 原文地址:https://www.cnblogs.com/mingerlcm/p/10820950.html
Copyright © 2020-2023  润新知