【JAVA WEB】盒模型

news2025/1/19 2:33:17

目录

边框

内边距 

基础写法

复合写法 

外边距

基础写法

复合写法

块级元素的水平居中

弹性布局

设置行内元素的属性 ,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.coloradmin.cn/o/1441704.html

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

相关文章

掌握Vue,开启你的前端开发之路!

介绍&#xff1a;Vue.js是一个构建数据驱动的Web应用的渐进式框架&#xff0c;它以简洁和轻量级著称。 首先&#xff0c;Vue.js的核心在于其视图层&#xff0c;它允许开发者通过简单的模板语法将数据渲染进DOM&#xff08;文档对象模型&#xff09;。以下是Vue.js的几个重要特点…

EMC学习笔记(二十三)降低EMI的PCB设计指南(三)

双层板电源分配 1.单点与多点分布2.星型分布3.创建网格平面4.旁路和磁珠5.将噪声保持在芯片附近 tips&#xff1a;资料主要来自网络&#xff0c;仅供学习使用。 1.单点与多点分布 在一个真正的单点配电系统中&#xff0c;每个有源元件都有自己独立的电源和地&#xff0c;这些…

揭开Markdown的秘籍:标题|文字样式|列表

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;Markdown指南、网络奇遇记 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. ⛳️Markdown 标题二. ⛳️Markdown 文字样式2.1 &#x1f514;斜体2.2 &…

倍增c++

快速幂 区间最小值&#xff08;用倍增思想去求&#xff09; #include<bits/stdc.h> using namespace std; #define maxn 110000 #define ll long long int n, a[maxn], f[maxn][40]; int query (int l, int r) {int k (int)(log((r - l 1) * 1.0) / log(2.0));retur…

JAVA设计模式之原型模式详解

原型模式 1 原型模式介绍 定义: 原型模式(Prototype Design Pattern)用一个已经创建的实例作为原型&#xff0c;通过复制该原型对象来创建一个和原型对象相同的新对象。 西游记中的孙悟空 拔毛变小猴,孙悟空这种根据自己的形状复制出多个身外化身的技巧,在面向对象软件设计领…

MySQL ——group by子句使用with rollup

group by 子句使用with rollup关键字之后&#xff0c;具有分组加和的功能。即&#xff1a;在所有的分组记录之后&#xff0c;自动新增一条记录&#xff0c;从全局计算所有记录的数据。 0 问题描述 求出每年的学生平均成绩&#xff0c;及历史至今的平均成绩&#xff0c;结果保留…

机器学习系列——(十一)回归

引言 在机器学习领域&#xff0c;回归是一种常见的监督学习任务&#xff0c;它主要用于预测数值型目标变量。回归分析能够通过对输入特征与目标变量之间的关系建模&#xff0c;从而对未知数据做出预测。 概念 回归是机器学习中的一种监督学习方法&#xff0c;用于预测数值型目…

HarmonyOS 创建components目录 定义全局自定义组件导出供整个项目使用

之前我的文章 harmonyOS 自定义组件基础演示讲解 我们讲解了 自定义组件的基础用法 但是 我们是写在单个page文件中的 这样 我们跨文件使用就很不友好了 如下图 指向 ets目录下 创建一个目录 按我们 前端开发以往的习惯 这个目录要叫 components 专门放组件集合的地方 然后 按…

Windows Server 2025 Hyper-V 新变化

今天简单跟大家聊聊Windows Server 2025 Hyper-V一些新功能新变化&#xff0c;具体如下&#xff1a; 在 VM 之间共享 GPU 随着图形处理器的重要性日益增加&#xff0c;特别是由于它们在 AI 应用程序中的核心作用&#xff0c;Hyper-V 中对 GPU 的现有支持已不再足够。到目前为…

GPT-4模型中的token和Tokenization概念介绍

Token从字面意思上看是游戏代币&#xff0c;用在深度学习中的自然语言处理领域中时&#xff0c;代表着输入文字序列的“代币化”。那么海量语料中的文字序列&#xff0c;就可以转化为海量的代币&#xff0c;用来训练我们的模型。这样我们就能够理解“用于GPT-4训练的token数量大…

【MySQL】MySQL表的增删改查(基础)

MySQL表的增删改查&#xff08;基础&#xff09; 1. CRUD2. 新增&#xff08;Create&#xff09;2.1 单行数据全列插入2.2 多行数据 指定列插入 3. 查询&#xff08;Retrieve&#xff09;3.1 全列查询3.2 指定列查询3.3 查询字段为表达式3.4 别名3.5 去重&#xff1a;DISTINCT…

数据结构——单向链表和双向链表的实现(C语言版)

目录 前言 1. 链表 1.1 链表的概念及结构 1.2 链表的分类 2. 单链表接口实现 2.1 数据结构设计与接口函数声明 2.2 创建结点&#xff0c;打印&#xff0c;查找 2.3 尾插&#xff0c;头插&#xff0c;尾删&#xff0c;头删 2.4 插入或删除 2.4.1在指定位置后 2.4.2在…

一文讲透Python函数中的形式参数和实际参数

函数参数包括形式参数和实际参数&#xff0c;简称形参和实参。其中形式参数即是在定义函数时函数后面括号中的参数列表&#xff08;parameterlist&#xff09;&#xff0c;比如上一个帖子的示例中的width, length&#xff1b;实际参数则是调用函数时函数后面括号中的参数值&…

【OrangePi Zero2的系统移植】OrangePi Zero2 SDK说明

一、使用环境要求 二、获取Linux SDK 三、首次编译完整SDK 基于OrangePi Zero2的系统移植 之前我们讲解香橙派的使用时&#xff0c; 都是直接在香橙派上进行代码编译&#xff0c; 但在实际的项目开发过程中&#xff0c;更多 的还是使用交叉编译环境进行代码的编译。再编译完成…

学习Android的第八天

目录 Android ImageView 图像视图 ImageView 的基本使用 src属性和background属性的区别 范例 解决 anndroid:blackground 属性拉伸导致图片变形的方法 设置透明度的问题 范例 android:src 和 android:background 结合 范例 Java 代码中设置 blackground 和 src 属性…

【C语言自定义类型详解进阶】结构体(补充结构体的对齐和位段,一口气看完系列,央妈都点赞的博文)

目录 1.结构体 1.1 结构的基础知识 1.2 结构的声明 1.2.1特殊的声明&#xff08;匿名结构体类型&#xff09; 1.3结构体变量的定义 1.4关于匿名结构体类型的补充 1.5结构体的自引用 1.6结构体变量的初始化 2.结构体内存对齐&#xff08;重点&#xff09; 2.1偏移量补…

B2080 计算多项式的值(洛谷)

题目描述 假定多项式的形式为 … x1&#xff0c;请计算给定单精度浮点数 x 和正整数 n 值的情况下这个多项式的值。多项式的值精确到小数点后两位&#xff0c;保证最终结果在 double 范围内。 输入格式 输入仅一行&#xff0c;包括 x 和 n&#xff0c;用单个空格隔开。 输…

数据结构 - 线索树

一、 为什么要用到线索二叉树&#xff1f; 我们先来看看普通的二叉树有什么缺点。下面是一个普通二叉树&#xff08;链式存储方式&#xff09;&#xff1a; 乍一看&#xff0c;会不会有一种违和感&#xff1f;整个结构一共有 7 个结点&#xff0c;总共 14 个指针域&#xff0c…

Web前端框架-Vue(初识)

文章目录 web前端三大主流框架**1.Angular****2.React****3.Vue**什么是Vue.js 为什么要学习流行框架框架和库和插件的区别一.简介指令v-cloakv-textv-htmlv-pre**v-once**v-onv-on事件函数中传入参数事件修饰符双向数据绑定v-model 按键修饰符自定义按键修饰符别名v-bind(属性…