CSS基础——3.CSS盒子模型、浮动、定位

server/2024/9/23 2:36:00/

盒子模型是网页设计中经常用到的一种思维模型,由四个部分构成,从内到外分别为内容区(content)、内边距(padding)、边框(border)和外边距(margin),CSS 为这四个部分提供了一系列相关属性,通过对这些属性的设置可以丰富盒子的表现效果。

盒子的组成

  • 外边距:margin

  • 内边距:padding

  • 边框:border

  • 内容:content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
        div {
            background-color: lightgrey;
            width: 300px;
            border: 25px solid green;
            padding: 25px;
            margin: 25px;
        }
    </style>
</head>
<body>
    <h2>盒子模型演示</h2>
    <p>CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。</p>
    <div>这里是盒子内的实际内容。有 25px 内间距,25px 外间距、25px 绿色边框。</div>
</body>
</html>

1. 外边距mar

http://www.ppmy.cn/server/23168.html

相关文章

EMQX 需要开放的端口各个都是什么意思

文章目录 问题描述解决方案 问题描述 大家好&#xff01;我是夏小花&#xff0c;今天在研究MQTT时&#xff0c;我是用docker装的&#xff0c;但是装完之后需要启动&#xff0c;然后看到docker run -d --name emqx -p 1883:1883 -p 8083:8083 -p 8084:8084 -p 8883:8883 -p 1808…

自动化密码填充:使用Python提高日常工作效率

密码是我们日常生活中难以逃脱的一部分。从解锁电脑到登录各种服务&#xff0c;我们需要记住无数的密码。幸运的是&#xff0c;通过Python和一些有用的库&#xff0c;我们可以简化填入密码的过程&#xff0c;使日常任务自动化变得简单。在本文中&#xff0c;我们将探讨如何使用…

探索互联网医院系统源码:在线问诊小程序开发教学

在线问诊小程序作为互联网医院系统的重要组成部分&#xff0c;为患者提供了更便捷、高效的医疗服务&#xff0c;成为了人们生活中不可或缺的一部分。今天&#xff0c;小编将带您探索互联网医院系统的源码&#xff0c;并介绍在线问诊小程序的开发教学&#xff0c;带领读者深入了…

httpClient提交报文中文乱码

httpClient提交中文乱码&#xff0c;ContentType类型application/json 指定提交参数的编码即可 StringEntity se new StringEntity(paramBody.toJSONString(),"UTF-8");se.setContentType("application/json");context.httpPost.setHeader("Cookie&…

Android --- 常见UI组件

TextView 文本视图 设置字体大小&#xff1a;android:textSize"20sp" 用sp 设置颜色&#xff1a;android:textColor"#00ffff" 设置倍距(行距)&#xff1a;android:lineSpacingMultiplier"2" 设置具体行距&#xff1a;android:lineSpacingExtra&q…

ClickHouse用UDF解析XML字符串和XML文件

一.如果是读取xml文件的时候&#xff0c;文件入库需要使用文件读取UDF 创建了1个测试文件 wsdFileRead()&#xff1a; 直接读取文件内容 SELECT wsdFileRead(/home/temp/wsd_test.xml)Query id: 09b6e5fe-7169-43f7-b001-90e2eeabb8da┌─wsdFileRead(/home/temp/wsd_test.xm…

加速软件定义汽车进程:安波福推出全栈式软硬件平台

随着智能汽车行业的飞速发展&#xff0c;“软件定义汽车”也得到了越来越多行业人士的认可&#xff0c;成为了汽车行业的大势所趋。为了推动和加速软件定义汽车的进程&#xff0c;也有越来越多的科技企业在为其不断添砖加瓦。 2024北京国际车展期间&#xff0c;安波福正式对外展…

小米汽车充电枪继电器信号

继电器型号&#xff1a; 参考链接 小米SU7&#xff0c;便捷充放电枪拆解 (qq.com)https://mp.weixin.qq.com/s?__bizMzU5ODA2NDg4OQ&mid2247486086&idx1&sn0dd4e7c9f7c72d10ea1c9f506faabfcc&chksmfe48a110c93f2806f6e000f6dc6b67569f6e504220bec14654ccce7d…