当前位置： 首页 > news >正文

CSS基础样式

news 2026/5/20 1:34:52

1.高度和宽度

.c1{height:300px;width:500px;
}

 注意事项：

        宽度，支持百分比

        行内标签：默认无效

        块级标签：默认有效（右侧区域就算是空白，也不给占用）

2.块级和行内标签

       css样式：标签--display:inline-block允许在元素上设置宽度和高度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{display:inline-block;height:100px;width:300px;border:1px solid red;}</style>
</head>
<body><span class="c1">北京</span><span class="c1">上海</span><div style="display:inline;">中</div><span style="display:block;">国</span>
</body>
</html>

 下图我们可以看到display:inline-block标签的效果

     中 #这行本来是块级标签，加上style="display:inline;"变为行内标签
     国 #这行本来是行内标签，加上style="display:block;"变为块级标签

 3.字体和颜色

.c1{color:red;/*颜色*/font-size:60px;/*字体大小*/font-weight:600;/*字体加粗*/font-family:字体;/*字体样式*/}

4.文字的对齐方式

.c1{height:60px;width:300px;text-align:center;/*水平方向居中*/line-height:60px;/*垂直方向居中,使用其值等于height属性值的line-height属性,只能用于一行数据*/
}

5.浮动

 float 属性定义元素在哪个方向浮动

<body><span >左边</span><span style="float:right">右边</span>
</body>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{float:left;height:100px;width:300px;border:1px solid red;}</style>
</head>
<body><span class="c1">1</span><span class="c1">2</span><span class="c1">3</span></body>
</html>

 float会让标签浮动之后脱离文档流（可以理解成覆盖在网页的最上面），需要加

style="clear:both;"使标签恢复正常
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{float:left;height:100px;width:300px;border:1px solid red;}</style>
</head>
<body>
<div style="color:green;"><div class="c1">1</div><div class="c1">2</div><div class="c1">3</div><div style="clear:both;"></div>
</div>
</body>
</html>

6.边距

内边距

下面这个代码是给内边距上下左右都留了20px

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.outer{border:1px solid red;height:400px;width:200px;padding-top:20px;padding-left:20px;padding-right:20px;padding-bottom:20px;}</style>
</head>
<body><div class="outer"><div style="background-color:gold;">内边距</div><div>222</div></div>
</body>
</html>

 

 可以简写成这样，顺序是顺时针 上右下左

padding:20px 10px 15px 20px;

外边距

很好理解，就是标签与周围创建的空间

p {margin-top: 100px;margin-bottom: 100px;margin-right: 150px;margin-left: 80px;
}

7.区域局中

.c1{margin:0 auto;}

父亲如果自己没有高度或宽度，会被孩子撑起来

8.hover(伪类）

选择鼠标指针浮动在其上的元素，并设置其样式,例如下面这个代码，本来显示的111111是红色的，但当鼠标挪上去时会显示黄色并变大

<head><meta charset="UTF-8"><title>Title</title><style>.c1{color:red;font-size:18px;}.c1:hover{color:yellow;font-size:50px;}</style>
</head>
<body>
<div style="color:green;"><div class="c1">1111111111</div>
</div>
</body>

 

 9.after（伪类）

在每个指定元素之后插入内容

<head><meta charset="UTF-8"><title>Title</title><style>.clearfix:after{content:"333 ";}</style>
</head>
<body>
<div ><div class="clearfix">1111111111</div><div class="clearfix">22222</div><div class="clearfix">44444</div>
</div>
</body>

10.position

fixed （生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。）

<head><meta charset="UTF-8"><title>Title</title><style>.back{position:fixed;width:600px;height:600px;border:1px solid red;right:0;}</style>
</head>
<body><div class="back"></div><div style="height:1000px;background-color:white"></div>
</body>

 固定红框，不随着页面滑动而改变位置

<head><meta charset="UTF-8"><title>Title</title><style>.back{position:fixed;width:300px;height:500px;background-color:white;left: 0;right: 0;margin:0 auto;top:200px;}.mask{background-color:black;position:fixed;left:0;right:0;top:0;bottom:0;opacity:0.3;}</style>
</head>
<body><div class="mask"></div><div class="back">登录</div>
</body>

可以用于做网页固定登录窗口

 relative生成相对定位的元素    absolute生成绝对定位的元素

<head><meta charset="UTF-8"><title>Title</title><style>.c1{height:300px;width:500px;border:1px solid red;margin:100px;position:relative;}.c1 .c2{height:59px;width:59px;background-color:green;position:absolute;right:0px;top:50px;}</style>
</head>
<body><div class="c1"><div class="c2"></div></div>
</body>

 11.border边框

<head><meta charset="UTF-8"><title>Title</title><style>.c1{height:300px;width:500px;border:3px solid red;border-left:3px solid green;margin:100px;position:relative;}</style>
</head>
<body><div class="c1"></div>
</body>

 12.background-color背景色

（在上述代码中加一行background-color:black;将框中背景改成黑色）

        .c1{height:300px;width:500px;border:3px solid red;border-left:3px solid green;background-color:black;margin:100px;position:relative;}

相关文章：

CSS基础样式

1.高度和宽度 .c1{height:300px;width:500px; } 注意事项&#xff1a; 宽度&#xff0c;支持百分比 行内标签&#xff1a;默认无效 块级标签&#xff1a;默认有效&#xff08;右侧区域就算是空白&#xff0c;也不给占用&#xff09; 2.块级和行内标签 css样式&#xff1a;标签…...

编程日记 2023/4/19 1:52:52

第03章_流程控制语句

第03章_流程控制语句 讲师&#xff1a;尚硅谷-宋红康&#xff08;江湖人称&#xff1a;康师傅&#xff09; 官网&#xff1a;http://www.atguigu.com 本章专题与脉络 流程控制语句是用来控制程序中各语句执行顺序的语句&#xff0c;可以把语句组合成能完成一定功能的小逻辑模…...

编程日记 2023/4/19 1:47:51

配电网电压调节及通信联系研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/5/29 21:16:00

stegano(图片隐写、摩斯密码)

附件是PDF&#xff0c;我们在选择内容时发现光标溢出了文本 说明这里还存在一些我们看不到的内容 直接CtrlA全选&#xff0c;CtrlC复制后新建一个纯文本文件 将复制的东西粘贴过去 粘贴后发现果然多出来了一些东西&#xff0c;提取出来 BABA BBB BA BBA ABA AB B AAB ABAA A…...

编程日记 2023/4/19 1:37:44

wsl安装torch_geometric

在官网选择需要的版本 选择安装途径&#xff0c;选择runfile 执行第一行&#xff0c;会下载一个文件到目录下 需要降低C的版本&#xff0c;否则 执行sudo sh cuda_11.1.0_455.23.05_linux.run,会出现 查看对应的文件&#xff0c;会有 可以加上override参数之后&#xff0c;…...

编程日记 2023/4/19 1:32:43

ASP.NET Core - 依赖注入(二)

2&#xff0c;NET Core 依赖注入的基本用法 话接上篇&#xff0c;这一章介绍 .NET Core 框架自带的轻量级 Ioc 容器下服务使用的一些知识点&#xff0c;大家可以先看看上一篇文章 [ASP.NET Core - 依赖注入(一)] 2.3 服务解析 通过 IServiceCollection 注册了服务之后&#xf…...

编程日记 2023/4/19 1:27:35

Scala之集合（1）

目录 ​​​​​​​集合介绍&#xff1a; 不可变集合继承图&#xff1a;​编辑 可变集合继承图 数组&#xff1a; 不可变数组&#xff1a; 样例代码&#xff1a; 遍历集合的方法&#xff1a; 1.for循环 2.迭代器 3.转换成List列表&#xff1a; 4.使用foreach()函数&a…...

编程日记 2023/5/29 21:18:29

公网使用SSH远程登录macOS服务器【内网穿透】

文章目录前言1. macOS打开远程登录2. 局域网内测试ssh远程3. 公网ssh远程连接macOS3.1 macOS安装配置cpolar3.2 获取ssh隧道公网地址3.3 测试公网ssh远程连接macOS4. 配置公网固定TCP地址4.1 保留一个固定TCP端口地址4.2 配置固定TCP端口地址5. 使用固定TCP端口地址ssh远程前言…...

编程日记 2023/4/19 1:17:33

PVE相关的各种一键脚本(一键安装PVE)(一键开设KVM虚拟化的NAT服务器-自带内外网端口转发)

PVE 原始仓库&#xff1a;https://github.com/spiritLHLS/pve 前言 建议debian在使用前尽量使用最新的系统 非debian11可使用 debian一键升级 来升级系统 当然不使用最新的debian系统也没问题&#xff0c;只不过得不到官方支持 请确保使用前机器可以重装系统&#xff0c;…...

编程日记 2023/4/19 1:12:32

CSDN目录博客(zhaoshuangjian)

总目录 一、Java1.1 高并发1.2 多线程1.3 集合1.4 I/O1.5 异常1.6 事务1.7 锁机制1.8 JVM 二、数据库2.1 mysql2.1.1 mysql索引2.1.1 mysql锁2.1.1 mysql事务2.1.1 2.2 oracle2.3 postgresql2.4 达梦2.5 人大金仓kingbase 三、设计模式四、中间件4.1 缓存中间件-redis4.2 缓存中…...

编程日记 2023/6/1 12:41:47

uniapp人脸识别解决方案

APP端&#xff1a; 因为APP端无法使用uni的camera组件&#xff0c;最开始考虑使用内嵌webview的方式&#xff0c;通过原生dom调用video渲染画面然后通过canvas截图。但是此方案兼容性在ios几乎为0&#xff0c;如果app只考虑安卓端的话可以采用此方案。后面又想用live-pusher组件…...

编程日记 2023/4/19 1:02:30

hashlib模块

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起探讨和分享Linux C/C/Python/Shell编程、机器人技术、机器学习、机器视觉、嵌入式AI相关领域的知识和技术。 hashlib模块专栏&#xff1a;《python从入门到实战》 哈希算法&#xff0c;也叫摘要算法。 加密&…...

编程日记 2023/5/31 20:46:30

NC65合并报表如何取消上报并退回以及注意事项和相关问题总结

NC65合并报表如何取消上报并退回&#xff1f; 在【企业绩效管理】-【合并报表】-【合并】-【合并执行】节点中&#xff0c;点击〖数据中心〗按钮&#xff0c;在弹出的〖合并报表数据中心〗界面中&#xff0c;点击〖报送管理〗-〖合并方案请求退回〗&#xff0c;然后到【合并综…...

编程日记 2023/4/19 0:47:22

28岁，终于从字节退休了...

大厂一直是每个程序员都向往职业目标&#xff0c;大厂意味着薪资高、福利好、倍有面儿&#xff0c;而且发展空间也大。甚至有人调侃不想进大厂的程序员不是好程序员。 而在网上&#xff0c;也有各个网友分享自己在大厂的经历&#xff0c;在某平台还有一个近2600万浏览的话题&a…...

编程日记 2023/4/19 0:42:16

数据的表示和存储——

目录 浮点数的编码表示 浮点数类型 ​编辑 浮点数的表示 &#xff08;1&#xff09;浮点数&#xff08;Float Point&#xff09;的表示范围 &#xff08;2&#xff09;规格化数形式 &#xff08;3&#xff09;IEEE 754标准 其他形式的机器数表示 个人总结 浮点数的编码表…...

编程日记 2023/4/19 0:37:15

springboot零基础到项目实战

推荐教程&#xff1a; springboot零基础到项目实战 SpringBoot这门技术课程所包含的技术点其实并不是很多&#xff0c;但是围绕着SpringBoot的周边知识&#xff0c;也就是SpringBoot整合其他技术&#xff0c;这样的知识量很大&#xff0c;例如SpringBoot整合MyBatis等等。因此…...

编程日记 2023/4/19 0:32:14

自媒体都在用的5个素材网站，视频、音效、图片全部免费下载~

推荐几个自媒体必备的素材库&#xff0c;免费可商用&#xff0c;建议收藏&#xff01; 1、菜鸟图库 视频素材下载_mp4视频大全 - 菜鸟图库 国内超大的素材库&#xff0c;在这里你可以找到设计、办公、图片、视频、音频等各种素材。视频素材就有上千个&#xff0c;全部都很高清…...

编程日记 2023/4/19 0:27:12

开放式耳机新巅峰！南卡OE Pro兼备澎湃音质、舒适佩戴、创新设计

众所周知&#xff0c;当初苹果带来TWS耳机新时代以后&#xff0c;后面有许多的蓝牙耳机相继跟随和模仿&#xff0c;但NANK南卡却独辟蹊径&#xff0c;将在近日重磅推出首款0压无感全开放无线耳机——南卡OE Pro&#xff0c;走向开放式TWS耳机的新时代。 31度黄金倾斜受力面&…...

编程日记 2023/4/19 0:22:11

1700页，卷S人的 Java《八股文》PDF手册，涨薪跳槽拿高薪就靠它了

大家好&#xff0c;最近有不少小伙伴在后台留言&#xff0c;又得准备面试了&#xff0c;不知道从何下手&#xff01; 不论是跳槽涨薪&#xff0c;还是学习提升&#xff01;先给自己定一个小目标&#xff0c;然后再朝着目标去努力就完事儿了&#xff01; 为了帮大家节约时间&a…...

编程日记 2023/4/19 0:17:10

普通人是否能从ChatGPT中分一杯羹？

ChatGPT3.0刚刚推出&#xff0c;最开始的时候&#xff0c;人们只是将ChatGPT看作一个很会聊天的机器人&#xff0c;无论问题多么天马行空&#xff0c;它的答案看上去都有理有据。后来&#xff0c;像打开潘多拉魔盒一样&#xff0c;很多人开始拿它编大纲、撰写文案、编代码、创作…...

编程日记 2023/4/19 0:12:08

SteamAutoCrack终极破解指南：三分钟移除游戏DRM保护

SteamAutoCrack终极破解指南&#xff1a;三分钟移除游戏DRM保护 【免费下载链接】Steam-auto-crack Steam Game Automatic Cracker 项目地址: https://gitcode.com/gh_mirrors/st/Steam-auto-crack 你是否遇到过Steam游戏无法离线运行的问题&#xff1f;或者想要在没有S…...

编程新知 2026/5/20 1:20:34

LeetCode 每日一题笔记 日期：2026.05.16 题目：154. 寻找旋转排序数组中的最小值 II

LeetCode 每日一题笔记 0. 前言 日期&#xff1a;2026.05.16题目&#xff1a;154. 寻找旋转排序数组中的最小值 II难度&#xff1a;困难标签&#xff1a;数组、二分查找 1. 题目理解 问题描述&#xff1a; 给定一个可能存在重复元素的升序数组&#xff0c;经过1~n次旋转后&…...

编程新知 2026/5/20 0:52:57

深度拆解Pulse算法三大剪枝策略：如何让你的路径搜索快10倍？

深度拆解Pulse算法三大剪枝策略&#xff1a;如何让你的路径搜索快10倍&#xff1f; 在解决复杂的组合优化问题时&#xff0c;如车辆路径规划&#xff08;VRP&#xff09;或旅行商问题&#xff08;TSP&#xff09;&#xff0c;算法的效率往往决定了实际应用的可行性。Pulse算法作…...

编程新知 2026/5/20 0:19:03

【锂离子电池组的被动式电池均衡】电池组由两个并联的串联电池组成，每个并联串联都包含四个串联电池，目标是通过在电阻器上放电高SOC电池，直到所有电池的SOC相等附Simulink仿真

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;擅长毕业设计辅导、数学建模、数据处理、程序设计科研仿真。 &#x1f34e;完整代码获取 定制创新 论文复现点击&#xff1a;Matlab科研工作室 &#x1f447; 关注我领取海量matlab电子书和数学建模资料 &…...

编程新知 2026/5/20 0:14:44

用HyperLynx VX2.5做LPDDR4X与高速串行总线仿真的完整工作流

HyperLynx VX2.5实战&#xff1a;LPDDR4X与高速串行总线仿真全流程解析 在当今高速电路设计领域&#xff0c;信号完整性问题已成为制约产品性能的关键瓶颈。尤其对于搭载LPDDR4X内存和高速串行总线的移动设备与服务器&#xff0c;工程师们常常陷入这样的困境&#xff1a;设计阶…...

编程新知 2026/5/20 0:07:38

别再纠结选哪种了！一文讲透无人机测深三剑客（激光雷达/测深仪/GPR）的实战选型指南

无人机测深技术三剑客&#xff1a;激光雷达、测深仪与探地雷达的深度选型指南 当无人机遇上水深测量&#xff0c;技术选型往往成为项目成败的关键。在河道整治、水库清淤、海岸线测绘等场景中&#xff0c;工程师们常面临一个核心难题&#xff1a;如何在激光雷达、测深仪和探地雷…...

编程新知 2026/5/20 0:07:38

NVDC充电器设计实战：从架构解析到动态负载响应的工程挑战

1. 项目概述&#xff1a;为什么NVDC充电器设计是个技术活最近在做一个项目&#xff0c;需要为一批采用NVDC&#xff08;Narrow Voltage DC&#xff09;架构的笔记本电脑设计配套的充电器。本以为就是个普通的电源适配器&#xff0c;照着规格书选型、画板、调试就完事了&#xf…...

编程新知 2026/5/19 22:55:42

从《GPU Gems》到实战：次表面散射（SSS）的四种“平替”方案全解析（含代码对比）

从《GPU Gems》到实战&#xff1a;次表面散射&#xff08;SSS&#xff09;的四种“平替”方案全解析&#xff08;含代码对比&#xff09; 在实时渲染领域&#xff0c;次表面散射&#xff08;Subsurface Scattering&#xff0c;简称SSS&#xff09;一直是提升材质真实感的关键技…...

编程新知 2026/5/19 22:39:03

Linux新手看过来：手把手解决TeXLive安装与VSCode配置中的那些“坑”（从镜像下载到环境变量）

Linux新手避坑指南&#xff1a;TeXLive安装与VSCode配置全流程解析 第一次在Linux系统上配置TeXLive和VSCode环境时&#xff0c;我花了整整两天时间才把所有问题解决。那些看似简单的教程在实际操作中总会遇到各种意外情况——镜像下载速度慢如蜗牛、环境变量配置错误导致命令无…...

编程新知 2026/5/19 22:02:59

C语言变量与运算符详解：从内存管理到高效编程实践

1. 从零到一&#xff1a;为什么C语言是程序员的“内功心法”&#xff1f;如果你刚看完系列的第一篇&#xff0c;对C语言有了一个模糊的印象&#xff0c;觉得它古老、复杂&#xff0c;甚至有点“过时”&#xff0c;那太正常了。我刚开始接触编程时&#xff0c;也这么想。为什么放…...

编程新知 2026/5/19 21:56:29