前端开发:盒子模型、块元素
1.border边框
*{box-sizing:border-box; } //使所有边框不再撑大盒子模型
粗细 : border-width样式 : border-style, 默认没边框 . solid 实线边框 dashed 虚线边框 dotted 点线边框颜色 : border-color
div {width : 200px ;height : 200px ;border : 2px solid green ; 简写没有顺序规定//边框宽2px 实线 绿色border-radius : 100px ; 变成圆角矩形;/* 或者用 50% 表示宽度的一半 */border-radius : 50% ;}
也可以如此控制他的四个角;
border-top-left-radius : 2em ;border-top-right-radius : 2em ;border-bottom-right-radius : 2em ;border-bottom-left-radius : 2em ;也可以按顺时针书写从左上角开始;border-radius : 10px 20px 30px 40px ;
更多的细节请看菜鸟教程;因为太多了;无法演示
2.内边距 padding
padding 设置内容和边框之间的距离.
默认内容是顶着边框来放置的 . 用 padding 来控制这个距离可以给四个方向都加上边距padding-toppadding-bottompadding-leftpadding-right使用 box - sizing: border - box 属性也可以使内边距不再撑大盒子 . ( 和上面 border 类似 )
div {height : 200px ;width : 300px ;padding-top : 5px ;padding-left : 10px ;padding : 5px ; 表示四个方向都是 5pxpadding : 5px 10px ; 表示上下内边距 5px , 左右内边距为 10pxpadding : 5px 10px 20px ; 表示上边距 5px , 左右内边距为 10px , 下内边距为 20pxpadding : 5px 10px 20px 30px ; 表示 上 5px , 右 10px , 下 20px , 左 30px ( 顺时针 )}
3.外边距 margin
控制盒子和盒子之间的距离 .可以给四个方向都加上边距margin-topmargin-bottommargin-leftmargin-right
margin-bottom: 20px;
margin: 10px; // 四个方向都设置margin: 10px 20px; // 上下为 10, 左右 20margin: 10px 20px 30px; // 上 10, 左右 20, 下 30margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40
块级元素水平居中
指定宽度 ( 如果不指定宽度 , 默认和父元素一致 )把水平 margin 设为 auto三种写法:使块级元素居中;使div块剧中;margin-left : auto ; margin-right : auto ;margin : auto ;margin : 0 auto ;这个水平居中的方式和 text-align 不一样 .margin: auto 是给块级元素用得到 .text-align: center 是让行内元素或者行内块元素居中的 .另外 , 对于垂直居中 , 不能使用 " 上下 margin 为 auto " 的方式
4.块元素
使用 display 属性可以修改元素的显示模式.可以把 div 等变成行内元素 , 也可以把 a , span 等变成块级元素display: block 改成块级元素 [ 常用]display: inline 改成行内元素 [ 很少用]display: inline- block 改成行内块元素
举例:将超链接元素变成每一行,只显示一个超链接;
<style>
a{
display:block;
}
</style>
相关文章:
前端开发:盒子模型、块元素
1.border边框 *{box-sizing:border-box; } //使所有边框不再撑大盒子模型 粗细 : border-width 样式 : border-style, 默认没边框 . solid 实线边框 dashed 虚线边框 dotted 点线边框 颜色 : border-color div { width : 200px ; height : 200px ; border : …...
升级 CentOS 7.x 系统内核到 4.4 版本
问题描述 在 CentOS 7.x 系统中,默认内核版本是 3.10.x,这个版本可能会带来一些与 Docker 和 Kubernetes 兼容性的问题,导致系统性能不稳定或功能异常。为了提高系统的稳定性和兼容性,建议升级到更高版本的内核,例如 …...
播放音频文件同步音频文本
播放音频同步音频文本 对应单个文本高亮显示 使用audio音频文件对应音频文本资源 音频文本内容(Json) [{"end": 4875,"index": 0,"speaker": 0,"start": 30,"text": "70号二啊,","tex…...
springboot使用Easy Excel导出列表数据为Excel
springboot使用Easy Excel导出列表数据为Excel Easy Excel官网:https://easyexcel.opensource.alibaba.com/docs/current/quickstart/write 主要记录一下引入时候的pom,直接引入会依赖冲突 解决方法: <!-- 引入Easy Excel的依赖 -->&l…...
day07_Spark SQL
文章目录 day07_Spark SQL课程笔记一、今日课程内容二、Spark SQL函数定义(掌握)1、窗口函数2、自定义函数背景2.1 回顾函数分类标准:SQL最开始是_内置函数&自定义函数_两种 2.2 自定义函数背景 3、Spark原生自定义UDF函数3.1 自定义函数流程&#x…...
高性能现代PHP全栈框架 Spiral
概述 Spiral Framework 诞生于现实世界的软件开发项目是一个现代 PHP 框架,旨在为更快、更清洁、更卓越的软件开发提供动力。 特性 高性能 由于其设计以及复杂精密的应用服务器,Spiral Framework框架在不影响代码质量以及与常用库的兼容性的情况下&a…...
LeetCode - #182 Swift 实现找出重复的电子邮件
网罗开发 (小红书、快手、视频号同名) 大家好,我是 展菲,目前在上市企业从事人工智能项目研发管理工作,平时热衷于分享各种编程领域的软硬技能知识以及前沿技术,包括iOS、前端、Harmony OS、Java、Python等…...
《解锁鸿蒙Next系统人工智能语音助手开发的关键步骤》
在当今数字化时代,鸿蒙Next系统与人工智能的融合为开发者带来了前所未有的机遇,开发一款人工智能语音助手应用更是备受关注。以下是在鸿蒙Next系统上开发人工智能语音助手应用的关键步骤: 环境搭建与权限申请 安装开发工具:首先需…...
【Linux网络编程】数据链路层 | MAC帧 | ARP协议
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站 🌈个人主页: 南桥几晴秋 🌈C专栏: 南桥谈C 🌈C语言专栏: C语言学习系…...
《自动驾驶与机器人中的SLAM技术》ch7:基于 ESKF 的松耦合 LIO 系统
目录 基于 ESKF 的松耦合 LIO 系统 1 坐标系说明 2 松耦合 LIO 系统的运动和观测方程 3 松耦合 LIO 系统的数据准备 3.1 CloudConvert 类 3.2 MessageSync 类 4 松耦合 LIO 系统的主要流程 4.1 IMU 静止初始化 4.2 ESKF 之 运动过程——使用 IMU 预测 4.3 使用 IMU 预测位姿进…...
基于spingbott+html+Thymeleaf的24小时智能服务器监控平台设计与实现
博主介绍:硕士研究生,专注于信息化技术领域开发与管理,会使用java、标准c/c等开发语言,以及毕业项目实战✌ 从事基于java BS架构、CS架构、c/c 编程工作近16年,拥有近12年的管理工作经验,拥有较丰富的技术架…...
全栈面试(一)Basic/微服务
文章目录 项目地址一、Basic InterviewQuestions1. tell me about yourself?2. tell me about a time when you had to solve a complex code problem?3. tell me a situation that you persuade someone at work?4. tell me a about a confict with a teammate and how you…...
python安装完成后可以进行的后续步骤和注意事项
安装Python3完成后,你可以开始使用它进行编程和开发。以下是一些安装完成后可以进行的后续步骤和注意事项: 验证安装 检查Python版本: 打开“终端”应用程序。输入python3 --version,应该显示安装的Python3版本号。 检查pip版本…...
[Qt] 窗口 | 菜单栏MenuBar
目录 QMainWindow 概述 一、菜单栏 1、创建菜单栏 2、在菜单栏中添加菜单 3、创建菜单项 4、在菜单项之间添加分割线 5、添加快捷键 6、添加子菜单 7、添加图标 综合示例 QMainWindow 概述 Qt 窗口是通过 QMainWindow 类来实现的。 QMainWindow 是一个为用户 提供主…...
[读书日志]从零开始学习Chisel 第十三篇:Scala的隐式参数与隐式转换(敏捷硬件开发语言Chisel与数字系统设计)
10. 隐式转换与隐式参数 假设编写了一个向量类MyVector,并且包含一些向量的基本操作。因为向量可以与标量做数乘运算,所以需要一个计算数乘的方法“*”,它应该接收一个类型为基本值类的参数,在向量对象myVec调用该方法时…...
CMake学习笔记(1)
1. CMake概述 CMake 是一个项目构建工具,并且是跨平台的。关于项目构建我们所熟知的还有Makefile(通过 make 命令进行项目的构建),大多是IDE软件都集成了make,比如:VS 的 nmake、linux 下的 GNU make、Qt …...
cursor+deepseek构建自己的AI编程助手
文章目录 准备工作在Cursor中添加deepseek 准备工作 下载安装Cursor (默认安装在C盘) 注册deepseek获取API key 在Cursor中添加deepseek 1、打开cursor,选择设置 选择Model,添加deepseek-chat 注意这里去掉其他的勾选项&…...
Kotlin实现DataBinding结合ViewModel的时候,提示找不到Unresolved reference: BR解决方案
在用Kotlin语言实现DataBinding结合ViewModel的代码的时候,如下所示: class UserModel(private val userName: String, private val userAge: Int) : BaseObservable() {get:Bindablevar name: String userNameset (value) {field valuenotifyPropert…...
java项目启动时,执行某方法
1. J2EE项目 在Servlet类中重写init()方法,这个方法会在Servlet实例化时调用,即项目启动时调用。 import javax.servlet.ServletException; import javax.servlet.http.HttpServlet;public class MyServlet extends HttpServlet {Overridepublic void …...
详解如何自定义 Android Dex VMP 保护壳
版权归作者所有,如有转发,请注明文章出处:https://cyrus-studio.github.io/blog/ 前言 Android Dex VMP(Virtual Machine Protection,虚拟机保护)壳是一种常见的应用保护技术,主要用于保护 And…...
synchronized 学习
学习源: https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖,也要考虑性能问题(场景) 2.常见面试问题: sync出…...
【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)
🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...
dify打造数据可视化图表
一、概述 在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队…...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时,性能会显著下降。以下是优化思路和简易实现方法: 一、核心优化思路 减少 JOIN 数量 数据冗余:添加必要的冗余字段(如订单表直接存储用户名)合并表:将频繁关联的小表合并成…...
LangFlow技术架构分析
🔧 LangFlow 的可视化技术栈 前端节点编辑器 底层框架:基于 (一个现代化的 React 节点绘图库) 功能: 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...
SpringAI实战:ChatModel智能对话全解
一、引言:Spring AI 与 Chat Model 的核心价值 🚀 在 Java 生态中集成大模型能力,Spring AI 提供了高效的解决方案 🤖。其中 Chat Model 作为核心交互组件,通过标准化接口简化了与大语言模型(LLM࿰…...
es6+和css3新增的特性有哪些
一:ECMAScript 新特性(ES6) ES6 (2015) - 革命性更新 1,记住的方法,从一个方法里面用到了哪些技术 1,let /const块级作用域声明2,**默认参数**:函数参数可以设置默认值。3&#x…...
在golang中如何将已安装的依赖降级处理,比如:将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7
在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤: 第一步: 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为: // 改为 v…...
Xcode 16 集成 cocoapods 报错
基于 Xcode 16 新建工程项目,集成 cocoapods 执行 pod init 报错 ### Error RuntimeError - PBXGroup attempted to initialize an object with unknown ISA PBXFileSystemSynchronizedRootGroup from attributes: {"isa">"PBXFileSystemSynchro…...
