HTML--CSS--盒子模型

在CSS模型中,所有元素都可以看做是一个盒子,这个盒子的组成部分:

content 内容,文本或者图片

padding 内边距,定义内容到边框的距离

margin 外边距,定义当前元素与其他元素之间的距离

border 边框,定义元素的边框

范例:

html 复制代码
<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        div
        {
            padding: 20px;
            margin: 10px;
            border: 2px solid red;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <p>内块</p>
        </div>
        <h1>外块</h1>
    </div>
</body>
</html>

效果:

content 内容区

内容区有三个属性:

width 宽度

hight 高度

overflow 指定内容超过范围后的处理方式

内边距

属性就是,上右下左顺时针综合设定:

padding-top

padding-bottom

padding-left

padding-right

padding

如例:

html 复制代码
<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        div
        {
            padding: 20px 40px 60px 80px;
            margin: 10px;
            border: 2px solid red;
            background-color: aqua;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <p>内块</p>
        </div>
    </div>
</body>
</html>

效果:

应该可以看到综合设定的四个位置:padding: 20px 40px 60px 80px;

是从内边距的上,右,下,左 顺时针参照的吧

外边框

属性:(外边框定义为负值就是反向移动,可以产生重叠,听说这就是"负margin技术")

margin-top

margin-bottom

margin-left

margin-right

margin

html 复制代码
<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        #a
        {
            padding: 20px 100px 150px 200px;
            margin: 10px;
            border: 2px solid red;
            background-color: aqua;
            overflow: hidden;
        }
        #b
        {
            margin: 30px 30px 30px 30px;
            border: 2px solid black;
            background-color: aliceblue;
        }
    </style>
</head>
<body>
    <div id="a">
        <div id="b">
            <p>内块</p>
        </div>
    </div>
</body>
</html>

效果:不过负margin还没搞明白

边框

属性:

border-width 边框宽度

border-color 边框颜色

border-style 边框类型

相关推荐
@大迁世界2 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙2 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump3 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD3 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
德育处主任Pro3 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama
Jedi Hongbin4 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial
前端小马4 小时前
前后端Long类型ID精度丢失问题
java·前端·javascript·后端
用户1456775610374 小时前
干净的图片批量处理,处理速度飞快
前端
用户1456775610374 小时前
亲测好用!简单实用的图片尺寸调整工具
前端
索西引擎4 小时前
npm、yarn、pnpm
前端·npm·node.js