css基本样式的使用

1、高度和宽度

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

注意事项:

  • 宽度,支持百分比
  • 行内标签,默认无效
  • 块级标签,默认有效(即使右侧空白,也不给你占用)

块级和行内标签
css样式 标签: display: inline-block
加上这个标签后行内标签具有了块级标签的特性,可以设置宽高了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册</title><style>input[type='text']{border: 1px solid red;}.c1{display: inline-block;height: 100px;width: 300px;border: 2px solid red;}</style>
</head>
<body><span class="c1">安娜</span><span class="c1">安娜</span>
</body>
</html>

在这里插入图片描述

  • 块级和行内标签的转换
<span style="display: block;">安娜</span>
<div style="display: inline;">安娜</div>

使用这个标签后行内标签具有块级标签的特性,块级标签的属性具有行内标签的属性

2、字体设置

  • 颜色: 出来可以使用英文还可以使用rgb值,如:#00FF7F
  • 大小
  • 加粗
  • 字体格式:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册</title><style>.c1{color: red;font-size: 58px;font-weight: 400;font-family: Microsoft Yahei;}</style>
</head>
<body><div class="c1">安娜</div><div style="display: inline;">安娜</div>
</body>
</html>

在这里插入图片描述

3、字体对齐方式

text-align: center 水平方向居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册</title><style>.c1{color: #00FF7F;height: 100px;width: 300px;border: 2px solid red;text-align: center;}</style>
</head>
<body><div class="c1">安娜</div><div style="display: inline;">安娜</div>
</body>
</html>

在这里插入图片描述
line-height:100px 垂直方向居中,指定高度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册</title><style>.c1{color: #00FF7F;height: 100px;width: 300px;border: 2px solid red;text-align: center;line-height:100px;}</style>
</head>
<body><div class="c1">安娜</div><div style="display: inline;">安娜</div>
</body>
</html>

在这里插入图片描述

4、浮动

本来span标签两个是挨在一起的,使用向右浮动,就会一个显示在左边一个在右边

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册</title>
</head>
<body><span>安娜</span><span style="float:right">伏伦斯基</span>
</body>
</html>

在这里插入图片描述
div 默认是块级标签,如果浮动起来了就不一样了。

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

在这里插入图片描述
浮动起来后,自己有多宽就占多宽。
如果让标签浮动起来后,就会脱离文档流。会使得父级div的样式无法显示,需要加上

<body><div style="background-color: blue"><div class="c1"></div><div class="c1"></div><div class="c1"></div><div class="c1"></div><div style="clear: both;"></div></div>
</body>

5、内边距

距离自己标签内部的距离

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册</title><style>.outer{height: 300px;width: 300px;border: 2px solid red;padding-top: 20px;padding-left: 20px;}</style>
</head>
<body><div class="outer"><div>你的眼里都是光</div><div>真是那样吗</div></div>
</body>
</html>

在这里插入图片描述
如果是上下左右的内边距都是20px ,可以按下面的方法写

 padding: 20px;

按上右下左的顺时针方向的内边距大小

padding: 40px 30px 20px 10px;

6、外边距

当前标签与其他标签的距离

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册</title>
</head>
<body><div style="background-color:red; height:100px">你的眼里都是光</div><div style="border: 2px solid blue; margin-top:30px">真是那样吗</div>
</body>
</html>

在这里插入图片描述

7、其他注意点

  • body标签,默认有一个边距,造成页面四边都有白色间隙,如何去除呢?
body {margin: 0
}
  • 内容居中
    文本居中,文本会在这个区域中居中。
<div style="width: 200px; text-align: center;">安娜</div>

区域居中,自己要有宽度+ margin- left:auto;margin-right:auto

. container {width: 980px;margin: 0 auto;
}
<div class=" container" >adfasdf</div>

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

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

相关文章

我在VScode学Java(Java方法method)

​ 我的个人博客主页&#xff1a;如果’真能转义1️⃣说1️⃣的博客主页 关于Java基本语法学习---->可以参考我的这篇博客&#xff1a;《我在VScode学Java》 关于Java数组学习、JVM中的堆和栈—>可以参考我的这篇文章我在VScode学Java(Java一维数组、二维数组、JVM中的堆…

Android JNI线程的同步 (十三)

🔥 Android Studio 版本 🔥 🔥 了解线程同步的两个变量 🔥 pthread_mutex_t 互斥锁 线程的互斥: 目前存在两个线程 , 线程A和线程B, 只允许只有一个资源对临界资源进程操作 (大概意思就是 : A线程 进入操作临界资源的时候 , 那么 B线程 就要进行等待 . 等到 A线程…

Spark(22):SparkStreaming之DStream创建

目录 0. 相关文章链接 1. RDD队列 1.1. 用法及说明 1.2. 案例实操 2. 自定义数据源 2.1. 用法和说明 2.2. 案例实操 3. Kafka数据源 3.1. 版本选型 3.2. Kafka 0-8 Receiver 模式&#xff08;当前3.x版本不适用&#xff09; 3.3. Kafka 0-8 Direct 模式&#xff08;…

离线安装docker

目录 1、下载docker 安装包 2、上传docker 到服务器目录/opt/ 3、解压docker-19.03.9.tgz 4、解压的docker文件夹全部移动至/usr/bin目录 5、将docker注册为系统服务 6、重启生效 6.1、重新加载配置文件 6.2、启动Docker服务 6.3、查看启动状态 6.4、 设置docker为开…

CS 144 Lab Two -- TCPReceiver

CS 144 Lab Two -- TCPReceiver TCPReceiver 简述索引转换TCPReceiver 实现 测试 对应课程视频: 【计算机网络】 斯坦福大学CS144课程 Lab Two 对应的PDF: Lab Checkpoint 2: the TCP receiver TCPReceiver 简述 在 Lab2&#xff0c;我们将实现一个 TCPReceiver&#xff0c;用…

如何在Ubuntu上安装OpenneBula

OpenNebula是一个开源云计算平台&#xff0c;允许我们在完全虚拟化云中组合和管理VMware和KVM虚拟机 第1步&#xff1a;安装MariaDB数据库服务器 OpenNebula还需要一个数据库服务器来存储其内容。 安装MariaDB&#xff1a; 1 2 sudo apt update sudo apt install mariadb-s…

mac idea 常用快捷键

mac idea 常用快捷键 代码生成&#xff1a; Command N&#xff1a;在代码编辑界面生成setter、getter等代码。当光标在左侧的工程结构时&#xff0c;使用Command N可以创建新的类、包等。 删除和复制&#xff1a; Command Delete&#xff1a;删除当前行。Command D&#…

SringCloud集成Redis工具类

1、pom文件 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency>2、redis工具类 Service(value "redisService") Slf4j public class RedisServi…

【深度学习笔记】训练 / 验证 / 测试集

本专栏是网易云课堂人工智能课程《神经网络与深度学习》的学习笔记&#xff0c;视频由网易云课堂与 deeplearning.ai 联合出品&#xff0c;主讲人是吴恩达 Andrew Ng 教授。感兴趣的网友可以观看网易云课堂的视频进行深入学习&#xff0c;视频的链接如下&#xff1a; 神经网络和…

Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面

Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面 虽然说IE6除了部分要求苛刻的需求以外已经被可以不考虑了&#xff0c;但是WIN7自带的浏览器IE8还是需要支持的。 本文这个方法主要的优点&#xff0c;个人觉得就是准备少&#xff0c;不需要上网寻找大量的图片做素材&…

CSS ::file-selector-button伪元素修改input上传文件按钮的样式

默认样式 修改后的样式 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdev…

CNN学习记录

目录 CNN基础知识——卷积(Convolution)、填充(Padding)、步长(Stride): 卷积的三种模式:full, same, valid:

【MySQL】查询进阶

查询进阶 数据库约束约束类型NULL , DEFAULT , UNIQUE 约束主键约束外键约束 聚合查询聚合函数group by子句HAVING 联合查询内连接外连接自连接子查询单行子查询多行子查询 数据库约束 约束类型 NOT NULL #表示某行不能储存空值 UNIQUE #保证每一行必须有唯一的值 DEFAULT #规…

CSS科技感四角边框

实现效果:使用before和after就可以实现,代码量不多,长度颜色都可以自己调整 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}html,body{…

PostgreSQL MVCC的弊端

数据库有很多种&#xff08;截至 2023 年 4 月有 897 个&#xff09;。面对如此多的数据库&#xff0c;很难知道该选择什么&#xff01;但有一个有趣的现象&#xff0c;互联网集体决定新应用程序的默认选择。在 2000 年代&#xff0c;传统观点选择 MySQL 是因为像 Google 和 Fa…

vue3+vite+pinia+vue-router+ol项目创建及配置

一、vite (一)、定义 vite官网 (二)、操作步骤 注意&#xff1a;两种方式创建目录结构一致 方式一&#xff1a;vite创建脚手架命令&#xff1a; 命令行&#xff1a;npm create vitelatest 然后选择 方式二&#xff1a;命令行直接声明带上vue 二、pinia (一)、定义 定义&#xf…

快速批量改名文件!随机字母命名,让文件名更有创意!

想要让文件名更加有创意和个性化吗&#xff1f;不妨尝试使用随机字母来批量改名文件&#xff01;无论是照片、文档还是其他文件&#xff0c;只需要简单的几个步骤&#xff0c;您就可以为它们赋予一个独特的随机字母命名。这不仅可以帮助您整理文件&#xff0c;还能增加一些乐趣…

非50欧系统阻抗的S参数测试

1. S参数依赖于系统阻抗 S参数的定义需要约定一个系统阻抗。同一个微波电路&#xff0c;在不同系统阻抗下的S参数是不同的。例如&#xff0c;50欧电阻在50欧系统阻抗下的S11为零&#xff0c;是没有反射的匹配状态&#xff1b;但50欧电阻在75欧系统阻抗下的S11不为零&#xff0…

WebRTC系列--WebRTC音频支持RedFEC的修改

文章目录 1. FEC流程综述1.1 offer中sdp的red1.2 setRemoteSdp中创建red编码流程2. 编码端2.1 编码缓存数据2.2 RED协议简介3. 解码端WebRTC在最新的代码中对opus的编码的包,默认使用red的方式进行一次冗余处理;冗余包在解码端的处理在其他版本中都有支持;这篇文章讲分两部分…

Orange:一个基于 Python 的数据挖掘可视化平台

本篇介绍一个适合初学者入门的机器学习工具。 Orange 简介 Orange 是一个开源的数据挖掘和机器学习软件。Orange 基于 Python 和 C/C 开发&#xff0c;提供了一系列的数据探索、可视化、预处理以及建模组件。 Orange 拥有漂亮直观的交互式用户界面&#xff0c;非常适合新手进…