首页 > 其他分享 >HTML/CSS基础-盒模型

HTML/CSS基础-盒模型

时间:2024-09-18 15:49:52浏览次数:3  
标签:border 模型 边框 padding HTML background 外边 margin CSS

一、边框属性(高度默认为0)

1、边框就是环绕在标签宽度和⾼度周围的线条
2、边框宽度:border-width: 值;
     边框样式:border-style: 值;
     边框颜⾊:border-color: 值;

二、外边距属性

1、标签和标签之间的距离就是外边距
2、a、非连写:上边距:margin-top: ;
                        右边距:margin-right: ;
                        下边距:margin-bottom: ;
                        左边距:margin-left: ;
      b、连写:margin: 上 右 下 左;
3、外边距合并现象:在默认(标准流)布局的垂直⽅向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距⽐较⼤就听谁的。⽔平⽅向上的外边距会叠加。

三、内边距属性

1、边框和内容之间的距离就是内边距
2、a、非连写:上边距:padding-top: ;
                        右边距:padding-right: ;
                        下边距:padding-bottom: ;
                        左边距:padding-left: ;
      b、连写:padding: 上 右 下 左;

四、CSS盒模型

1、CSS盒⼦模型仅仅是⼀个形象的⽐喻,每⼀个可⻅的HTML元素都是⼀个盒⼦,⼀个盒⼦由外到内可以分成四个部分:margin(外边距)、border(边框)、padding(内边距)以及content(内容)。
2、盒子背景样式: 背景颜色:background-color: #fff;
                              背景图片:background-image: url();
                              背景平铺属性: background-repeat:
                              背景定位属性:background-position:

标签:border,模型,边框,padding,HTML,background,外边,margin,CSS
From: https://blog.csdn.net/m0_69544388/article/details/142335844

相关文章

  • 构建多轮对话问答系统:基于大模型的Agent与Tools探索
    在当今人工智能快速发展的时代,多轮对话问答系统作为人机交互的重要形式,正逐渐渗透到我们生活的各个领域,从智能家居到智能客服,从在线教育到医疗咨询,其应用场景日益广泛。本文将深入探讨如何基于大模型构建高效、智能的多轮对话问答系统,并介绍一些关键的Agent(代理)与Tools(工具)技术......
  • 488.中国风中秋节专题网页 大学生期末大作业 Web前端网页制作 html+css+js
    目录一、网页概述二、网页文件 三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界!这里有各行各业的Web前端网页制作的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这......
  • css布局之Grid布局
    前言最近了解到一种新的布局:grid布局(网格布局),grid并不是最近才看到的,以前在设置display的时候,会在属性值列表中看到,但却没有给过太多关注。一次偶然机会听到:对于九宫格布局的实现,grid布局会比flex布局实现起来更方便,作为flex深度使用者,这句话无疑引起了我强烈的欲望,想要对grid一......
  • Suno 重磅功能「Covers」:一键翻唱任意歌曲;阿里通义将发布 AI 视频生成大模型丨 RTE 开
       开发者朋友们大家好: 这里是「RTE开发者日报」,每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享RTE(Real-TimeEngagement)领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、「有看点的会议」,但内容仅代表编辑的个人观......
  • 进入大模型时代,你真的准备好了吗?
    前言-PREFACE近期OpenAIo1系列模型发布,在面对复杂问题和专业领域上,有了大幅长足进步,对于博士水平的物理问题,GPT-4o只能得不及格的59.5分,而o1直接干到92.8分,虽然主要是科学、编码和数学模型专业能力方面的提升,还没达到人工智能的通用人工智能AGI和超级人工智能水平,但带来冲击......
  • 前端必知必会-CSS Grid网格
    文章目录CSS网格布局模块网格布局网格元素Display属性网格列网格行网格间隙网格线所有CSS网格属性总结CSS网格布局模块网格布局CSS网格布局模块提供基于网格的布局系统,包含行和列,可让您更轻松地设计网页,而无需使用浮动和定位。网格元素网格布局由一个父元......
  • zblog添加html后台出错,zblog后台设置固定域名绑定错误
    当在Z-Blog中遇到添加HTML后台出错或后台设置固定域名绑定错误时,这通常意味着在配置或设置过程中出现了问题。以下是一些排查和解决步骤:1.检查域名绑定问题描述:域名可能未正确绑定到服务器。解决方法:确认域名已正确绑定到服务器。检查DNS设置,确保域名指向正确的IP......
  • 【2024年最新】AI教程-AI大模型知识,零基础入门到精通
    1、什么是AIAI(ArtificialIntelligence)是人工智能的缩写,通俗地讲,AI就是让机器或计算机系统能够模仿、延伸和扩展人类的智能,执行一些通常需要人类智能才能完成的任务。AI的目标是让机器能够胜任一些通常需要人类智能才能完成的复杂工作。AI可以让机器......
  • 【AI大模型-什么是大模型】
    一、定义与适用范围大模型(LargeModels):人工智能大模型是指拥有超大规模参数(通常在十亿个以上)、复杂计算结构的机器学习模型。它通常能够处理海量数据,完成各种复杂任务,如自然语言处理、图像识别等。它是一个更广泛的术语,不特指语言模型,可以涵盖所有类型的深度学习模型。......
  • Springboot基于HTML5+CSS3的信息化农村综合服务平台690g7
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容一、项目背景与意义随着信息技术的飞速发展,信息化已成为推动农村经济社会发展的重要力量。构建基于HTML5+CSS3的信息化农村综合服务平台,旨在利用现......