【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一致

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ChatGLM2-6B模型的win10测试笔记

ChatGLM2-6B介绍&#xff1a; 介绍 ChatGLM2-6B 是开源中英双语对话模型 ChatGLM-6B 的第二代版本&#xff0c;在保留了初代模型对话流畅、部署门槛较低等众多优秀特性的基础之上&#xff0c;ChatGLM2-6B 引入了如下新特性&#xff1a; 更强大的性能&#xff1a;基于 ChatGLM 初…

编程实例分享,宠物诊所电子处方怎么开,兽医电子处方模板电子版操作教程

编程实例分享&#xff0c;宠物诊所电子处方怎么开&#xff0c;兽医电子处方模板电子版操作教程 一、前言 以下操作教程以 佳易王兽医电子处方软件V16.0为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 1、在系统 设置里可以设置打印参数&#x…

【Java】eclipse连接MySQL数据库使用笔记(自用)

注意事项 相关教程&#xff1a;java连接MySQL数据库_哔哩哔哩_bilibilijava连接MySQL数据库, 视频播放量 104662、弹幕量 115、点赞数 1259、投硬币枚数 515、收藏人数 2012、转发人数 886, 视频作者 景苒酱, 作者简介 有时任由其飞翔&#xff0c;有时禁锢其翅膀。粉丝群1&…

为什么IDM下载速度很慢,IDM下载速度很慢怎么办

为什么IDM下载速度很慢&#xff0c;IDM下载速度很慢怎么办 IDM采用的是多线程下载模式。 如果说单线程下载“一个人完成一项工作”&#xff0c;那多线程下载就是“多个人完成一项工作”。它能让用户从服务器获得更高的带宽&#xff0c;从而提高资源下载速度。一般IDM会默认使用…

Transformer的PyTorch实现之若干问题探讨(二)

在《Transformer的PyTorch实现之若干问题探讨&#xff08;一&#xff09;》中探讨了Transformer的训练整体流程&#xff0c;本文进一步探讨Transformer训练过程中teacher forcing的实现原理。 1.Transformer中decoder的流程 在论文《Attention is all you need》中&#xff0…

【OrangePi Zero2 智能家居】需求及项目准备

一、需求及项目准备 二、系统框图 三、硬件接线 四、语音模块配置 五、模块测试 一、需求及项目准备 语音接入控制各类家电&#xff0c;如客厅灯、卧室灯、风扇Socket网络编程&#xff0c;实现Sockect发送指令远程控制各类家电烟雾警报监测&#xff0c; 实时检查是否存在煤气…

高级FPGA开发之基础协议PCIe(二)

高级FPGA开发之基础协议之PCIe&#xff08;二&#xff09; 一、TLP报文类型 在PCIe总线中&#xff0c;存储器读写、I/O读写和配置读写请求TLP主要由以下几类报文组成&#xff1a; 1.1 存储器读请求TLP和读完成TLP 当PCIe主设备&#xff08;RC或者EP&#xff09;访问目标设备…

Java图形化界面编程——菜单组件 笔记

2.7 菜单组件 ​ 前面讲解了如果构建GUI界面&#xff0c;其实就是把一些GUI的组件&#xff0c;按照一定的布局放入到容器中展示就可以了。在实际开发中&#xff0c;除了主界面&#xff0c;还有一类比较重要的内容就是菜单相关组件&#xff0c;可以通过菜单相关组件很方便的使用…

机器学习系列——(十二)线性回归

导言 在机器学习领域&#xff0c;线性回归是最基础且重要的算法之一。它用于建立输入特征与输出目标之间的线性关系模型&#xff0c;为我们解决回归问题提供了有效的工具。本文将详细介绍线性回归的原理、应用和实现方法&#xff0c;帮助读者快速了解和上手这一强大的机器学习…

回调地狱 与 Promise(JavaScript)

目录捏 前言一、异步编程二、回调函数三、回调地狱四、Promise1. Promise 简介2. Promise 语法3. Promise 链式 五、总结 前言 想要学习Promise&#xff0c;我们首先要了解异步编程、回调函数、回调地狱三方面知识&#xff1a; 一、异步编程 异步编程技术使你的程序可以在执行一…

除夕日的每日一题(字符个数统计,多数元素)

字符个数统计_牛客题霸_牛客网 (nowcoder.com) #include <stdio.h> #include <string.h> #include <stdlib.h>int num0,len,i,j,k,asc; int tmp[128]{0}; char str[400]; int main() {gets(str);//gets(str) 用于从标准输入读取一个字符串并存储在 str 中len…

AWD-Test2

1.已知账号密码&#xff0c;可SSH连接进行代码审计。2.登录可万能密码进入&#xff0c;也可注册后登录。3.修改url参数&#xff0c;发现报错。确定为Linux系统4.写入一句话&#xff0c;并提交。&#xff08;也可以文件上传&#xff0c;这里采用简洁的方法&#xff09; <?p…

修改SpringBoot中默认依赖版本

例如SpringBoot2.7.2中ElasticSearch版本是7.17.4 我希望把它变成7.6.1

电商商城系统网站

文章目录 电商商城系统网站一、项目演示二、项目介绍三、系统部分功能截图四、部分代码展示五、底部获取项目&#xff08;9.9&#xffe5;带走&#xff09; 电商商城系统网站 一、项目演示 商城系统 二、项目介绍 基于SpringBootVue的前后端分离商城系统网站 运行环境:idea或…

M1 Mac使用SquareLine-Studio进行LVGL开发

背景 使用Gui-Guider开发遇到一些问题,比如组件不全。使用LVGL官方的设计软件开发 延续上一篇使用的基本环境。 LVGL项目 新建项目 选择Arduino的项目,设定好分辨率及颜色。 设计UI 导出代码 Export -> Create Template Project 导出文件如图 将libraries下的ui文…

【原理图PCB专题】Cadence17.4 PCB位号重排与反标

在文章:【原理图专题】Cadence 16.6如何把PCB元件位号重排并反标到原理图 中我们讲到了Cadence16.6版本对原理图进行反标的操作。 对于反标之前我们是通过如下所示的绘制流程来讲的,一般在首板或是大改板操作器件里有很多不同的很大的位号,这时我们可以通过Backannotate功能…

C++初阶篇----新手进村

目录 一、什么是C二、C关键字三、命名空间3.1命名空间的定义3.2命名空间的使用 四、C输入和输出五、缺省参数5.1缺省参数的概念5.2缺省参数的分类 六、函数重载6.1函数重载的概念6.2函数重载的原理----名字修饰 七、引用7.1引用概念7.2引用特性7.3常引用7.4引用的使用7.5传值、…

考研高数(导数的定义)

总结&#xff1a; 导数的本质就是极限。 函数在某点可导就必连续&#xff0c;连续就有极限且等于该点的函数值。 例题1&#xff1a;&#xff08;归结原则的条件是函数可导&#xff09; 例题2&#xff1a; 例题3&#xff1a;

使用 Elasticsearch 和 OpenAI 构建生成式 AI 应用程序

本笔记本演示了如何&#xff1a; 将 OpenAI Wikipedia 向量数据集索引到 Elasticsearch 中使用 Streamlit 构建一个简单的 Gen AI 应用程序&#xff0c;该应用程序使用 Elasticsearch 检索上下文并使用 OpenAI 制定答案 安装 安装 Elasticsearch 及 Kibana 如果你还没有安装好…

FPGA_简单工程_状态机

一 理论 fpga是并行执行的&#xff0c;当处理需要顺序解决的事时&#xff0c;就要引入状态机。 状态机&#xff1a; 简写FSM&#xff0c;也称同步有限状态机。 分为&#xff1a;more型状态机&#xff0c;mealy型状态机。 功能&#xff1a;执行该事件&#xff0c;然后跳转到下…