【JAVA WEB】盒模型

目录

边框

内边距 

基础写法

复合写法 

外边距

基础写法

复合写法

块级元素的水平居中

弹性布局

设置行内元素的属性 ,span


每一个HTML元素就相当于是一个矩形的“盒子”

这个盒子由以下这几个部分构成:

        1.边框 border

        2.内容 content

        3.内边距 padding

        4.外边距 margin

边框

基础属性

        粗细:border-width

        样式:border-stytle 默认没边框, solid实线边框  dashed虚线边框   dotted点线边框

        颜色:border-color

 <style>

      div{

            width: 200px;

            height: 100px;

            //以下三行也可以写成  border:blue solid 10px; 这三个参数不区分先后顺序

            border-color: blue;

            border-style: solid;

            border-width: 10px;

        }

 </style>

 <div></div>

效果如下:

但是可以看出,我们的边框撑大了这个盒子,为了避免这种情况,我们使用

box-sizing:border-box

内边距 

padding 设置内容和边框之间的距离。

基础写法

padding-top

padding-bottom

padding-left

padding-right

复合写法 

padding:5px; //表示四个方向都是5px

padding:5px  10px ;//表示上下内边距5px  左右内边距10px

padding:5px  10px  20px;//表示上边距5px  左右内边距为10px  下内边距20px

padding:5px  10px  20px  30px;//表示 上5px   右10px  下20px  左30px (顺时针)

外边距

控制盒子和盒子之间的距离。

基础写法

margin-top

margin-bottom

margin-left

margin-right

复合写法

//规则同padding

margin:5px; //表示四个方向都是5px

margin:5px  10px ;//表示上下5px  左右10px

margin:5px  10px  20px;//表示上5px  左右10px  下20px

margin:5px  10px  20px  30px;//表示 上5px   右10px  下20px  左30px (顺时针)

块级元素的水平居中

//以下三种写法都可以

margin-left:auto; margin-right:auto;

margin:auto;

margin:0 auto;

弹性布局

设置行内元素的属性 ,span

    <div>

        <span>1</span>

        <span>2</span>

        <span>3</span>

    </div>

    <style>

        div{

            width: 700px;

            height: 700px;

            background-color: blue;

        }

        div span{

            height: 100px;

            width: 100px;

            background-color: yellow;

        }

    </style>

当我们设置span属性时,因为span是行内元素,所以对他的设置并没有生效如下图,我们需要在span的父级标签中也就是div设置display:flex; 使其进入弹性布局模式

//添加display:flex;

<div>

        <span>1</span>

        <span>2</span>

        <span>3</span>

 </div>

 <style>

        div{

            width: 700px;

            height: 700px;

            background-color: blue;

            display: flex;

        }

        div span{

            height: 100px;

            width: 100px;

            background-color: yellow;

        }

 </style>

常用属性

justify-content   //设置主轴上的子元素排列方式  水平方向

        默认是start

        效果如下:

        当值为center    

        取值为end

        取值为space-between,意味着行方向上元素均匀布局

align-items       //设置侧轴上的元素排列方式  垂直方向

取值与justify-content一致

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/380537.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

铱塔 (iita) 开源 IoT 物联网开发平台,基于 SpringBoot + TDEngine +Vue3

01 铱塔 (iita) 物联网平台 铱塔智联 (open-iita) 基于Java语言的开源物联网基础开发平台&#xff0c;提供了物联网及相关业务开发的常见基础功能, 能帮助你快速搭建自己的物联网相关业务平台。 铱塔智联平台包含了品类、物模型、消息转换、通讯组件&#xff08;mqtt/EMQX通讯组…

【MyBatis面试题】

目录 前言 1.MyBatis执行流程。 2.Mybatis是否支持延迟加载&#xff1f; 3.延迟加载的底层原理知道吗&#xff1f; 4.Mybatis的一级、二级缓存用过吗&#xff1f; 5.Mybatis的二级缓存什么时候会清理缓存中的数据&#xff1f; 总结 前言 本文主要介绍了MyBatis面试题相…

4.1 Verilog 过程结构

关键词&#xff1a;initial&#xff0c; always 过程结构语句有 2 种&#xff0c;initial 与 always 语句。它们是行为级建模的 2 种基本语句。 一个模块中可以包含多个 initial 和 always 语句&#xff0c;但 2 种语句不能嵌套使用。 这些语句在模块间并行执行&#xff0c;…

基础图算法与社交网络分析

目录 前言1 寻找最短路径的Dijkstra算法1.1 介绍1.2 算法步骤1.3 应用领域1.4 算法优势与限制 2 构建高效网络结构的最小生成树算法2.1 Kruskal算法2.2 应用领域2.3 算法优势与限制 3 中心度算法3.1 PageRank算法3.2 Degree Centrality&#xff08;度中心度&#xff09;3.3 Bet…

上位机图像处理和嵌入式模块部署(利用python开发软件)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 开发windows和linux软件的时候&#xff0c;大家一般都是习惯于用c/c语言进行开发&#xff0c;但是目前来说很多的开发板都是支持python语言开发的。…

【网站项目】032汽车客运站管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

数据湖的整体思路

湖本质上是一个集中化&#xff0c;中心化的&#xff0c;一体化的存储技术&#xff0c;并且在其之上追求技术架构的统一化&#xff0c;如流批一体&#xff0c;服务分析一体化。 当数据湖成为中心&#xff0c;那么就可以围湖而建“数据服务环”&#xff0c;环上的服务包括了数仓、…

Python 视频转场特效处理笔记

本文参考Python-OpenCV 实现美图秀秀视频剪辑效果【特效】_opencv 多张图片 视频 特效-CSDN博客 最近研究了点python处理视频相关的东西&#xff0c;本文展示特效包括&#xff0c;竖向开幕/横向开幕&#xff0c;渐隐/渐显&#xff0c;推近/拉远&#xff0c;方形开幕&#xff0…

降准是什么意思?降准对股市有哪些影响?

降准是什么意思 降准&#xff0c;全称为“中央银行调低法定存款准备率”&#xff0c;是指中央银行降低法定存款准备率&#xff0c;以增加银行的可用资金&#xff0c;从而增加市场的流动性。 具体来说&#xff0c;存款准备金是商业银行为了应对储户取款和清算时准备的资金&…

Java集合框架(包装类、泛型)

前言&#xff1a; 本篇文章我们来讲解Java中的集合框架&#xff0c;就相当于车轮子。Java是面向对象的语言&#xff0c;所以相对于C语言有自身优势&#xff0c;就比如现成的数据结构&#xff08;比如栈&#xff0c;队列&#xff0c;堆等&#xff09;。Java的集合框架大家也不用…

猫头虎分享已解决Bug || 响应式布局错误(Responsive Design Issues):在移动设备上元素重叠、布局错位

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

【stm32】hal库学习笔记-ADC模数转换(超详细)

【stm32】hal库学习笔记-ADC模数转换&#xff08;超详细&#xff09; 本篇章介绍了ADC实现电压检测的三种方式 ADC原理及选型 ADC将连续的模拟电压信号转换为二进制的数字信号 选型参数 速度&#xff08;采样频率&#xff09; 功耗 精度 转换原理 ADC hal库驱动函数 普通…

架构之模板方法等模式的使用

目录 一、程序编写背景 二、编程思路讲解 - 类图 - 实现逻辑 - 工厂模式 - 模板方法模式 接口类&#xff08;代码&#xff09;抽象类&#xff08;代码&#xff09;具体实现类&#xff08;代码&#xff09;工厂类&#xff08;代码&#xff09;注册类&#xff08;代码&…

安全之护网(HVV)、红蓝对抗

文章目录 红蓝对抗什么是护网行动&#xff1f;护网分类护网的时间 什么是红蓝对抗红蓝对抗演练的目的什么是企业红蓝对抗红蓝对抗价值参考 红蓝对抗 什么是护网行动&#xff1f; 护网的定义是以国家组织组织事业单位、国企单位、名企单位等开展攻防两方的网络安全演习。进攻方…

猫头虎分享已解决Bug || 内存溢出(Memory Overflow):OutOfMemoryError, MemoryLimitExceeded

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

【前沿技术杂谈:多模态文档基础模型】使用多模态文档基础模型彻底改变文档 AI

【前沿技术杂谈&#xff1a;多模态文档基础模型】使用多模态文档基础模型彻底改变文档 AI 从文本到多模态模型&#xff1a;文档 AI 逐渐发展新技能。行业领先的型号Document AI 的下一步&#xff1a;开发通用和统一框架 您是否曾经被包含不同信息&#xff08;如应付账款、日期、…

成为CSDN博客优质创作者或者博客专家吧

成为CSDN博客优质创作者或者博客专家吧 文章目录 成为CSDN博客优质创作者或者博客专家吧一、前言二、如何成为CSDN的博客专家1、2009年的要求和申请方式2、最新的CSDN博客专家要求和申请方式3、创作者身份认证4、CSDN所有认证的介绍 三、写博客的好处1、比较官方的说法&#xf…

Redis 持久化对性能有何影响?

Redis 持久化对性能的影响 Redis 是一个高性能的内存数据存储系统&#xff0c;通常被用于缓存、消息队列和数据存储等方面。由于 Redis 是基于内存的&#xff0c;因此它的读写速度非常快&#xff0c;可以满足高并发、低延迟的应用需求。但是&#xff0c;当 Redis 需要持久化数…

Python实现文本情感分析

前言 文本情感分析是一种重要的自然语言处理(NLP)任务&#xff0c;旨在从文本数据中推断出情感信息&#xff0c;例如正面、负面或中性情感。它在社交媒体分析、产品评论、市场调研等领域都有广泛的应用。本文将详细介绍如何使用Python进行文本情感分析&#xff0c;包括基础概念…

公众号取关粉丝获取方法2

一、前言 之前和大家讲到了一篇关于这方面的文章&#xff0c;如下&#xff1a; 重要&#xff1a;获取公众号取关粉丝信息方法&#xff0c;全网只此一份 这种方法虽然挺好&#xff0c;不过也有一个弊端&#xff0c;那就是很多自作聪明的人如果隔一段时间再取关的话&#xff0…