css的各种样式

一,css的样式选择器

1.1 字体相关

font

  • font-fanmily 字体的样式默认为黑体
  • font-size 字体大小
  • font-style 字体风格 斜体
  • font-width 字体的宽度 默认为400

1.2 文本相关

text-transform

  • capitalize 首字母大写
  • lowercase 全部小写
  • uppercase 全部大写
    text-align
  • left 默认居右
  • right 默认居左
  • center 默认居中
    text-indent
  • 缩进
  • 2em 缩进两个字符
    text-decoration
  • none 去除下划线

二,css 的背景选择

backgroup

  • color 背景色
  • image 图片插入 要使用url
  • repeat 图片铺满 一般使用no-repeat
  • position 位置
    分为 left
    top
    bottom
    right
    也可以使用像素点
  • size 100%
  • contain 场边完全展示,短边补空
  • cover 短边完全展示 长边隐藏

三,列表的样式属性

list-type

  • type circle 圆形样式
  • position outside 外围
  • position intside 内围
  • image url 图片
  • mone 没有任何样式

四,css包围盒

一个元素占用空间
border

  • width
  • style
  • color
  • 1px soilde red 设置盒子线的颜色
    padding
    内补 只有宽度
    外部 只有宽度
    padding与margin支持四种写法
  • 一个数值 上下左右一样
  • 两个数值 上下一致 左右一致
  • 三个数值 上 左右一致 下
  • 四个数值 上左下右

五,css中的display

  • inline 行元素 一行可以出现多个元素
  • block 块元素 自己独占一行,可以给宽高
  • inline-block 行内块,多个快在一起,可以给宽高
  • none 隐藏

六, css中的定位

1,static 静态定位 从左到右,从上向下排列
2, relative 相对定位
相对定位文档流静态定位 发生偏移
占用文档位置
left top
3,absolute
绝对定位
参考位置:外层第一个非static的标签发生偏移直到html
不占用文档流
left/top/right/bottom
4,fixed 固定位置
参考位置:浏览器窗口
5, sticky 粘性定位
没有到达位置之前一直在 选哪个党羽静态定位
到达粘性位置 相当于静态定位

七,弹性容器

display:flex

7.1 flex-direction

  • row 默认
  • row-reverse 主洲倒
  • columu主轴向下
  • columu-severse 倒

7.2 flex-wrap

  • wrap 换行
  • no-wrap 不换行
  • wrap-severse

7.3 justify-content

  • flex-start 主轴开始位置
  • flex-end 主轴结束位置
  • center 主轴居中
  • space-between 中间有空白
  • spac-aroud 两边都有空白

7.4 align-itmes

  • flex-start 交叉轴起始位置
  • flex-end 交叉轴结束
  • center 居中
  • 当交叉轴方向只有一行使用交叉轴

7.5 align-content

  • flex-start 交叉轴起始位置没有空白
  • flex-end 交叉轴结束位置
  • center 居中
  • 当交叉轴有多啊很难过使用交叉轴对齐

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

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

相关文章

.NET DES加密算法实现

简介: DES(Data Encryption Standard)加密算法作为一种历史悠久的对称加密算法,自1972年由美国国家标准局(NBS)发布以来,广泛应用于各种数据安全场景。本文将从算法原理、优缺点及替代方案等方…

XUbuntu22.04之激活Linux最新Typora版本(二百二十五)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…

技巧 Win10电脑打开SMB协议共享文件,手机端查看

一. 打开 SMB1.0/CIFS文件共享支持 ⏹如下图所示,打开SMB1.0/CIFS文件共享支持 二. 开启网络发现 ⏹开启网络发现,确保共享的文件能在局域网内被发现 三. 共享文件夹到局域网 ⏹根据需要勾选需要共享的文件夹,共享到局域网 四. 共享文件查…

Linux重点思考(下)--shell脚本使用以及内核开发

Linux重点思考(下)--shell脚本使用和组合拳 shell脚本的基础算法shell脚本写123...n的值,说思路Shell 脚本用于执行服务器性能测试的死循环Shell 脚本备份和定时清理垃圾文件 shell脚本的内核开发正向映射反向映射 shell脚本的基础算法 shell脚本写123……

单点登录原理与实现方案探究(二)

本系列文章简介: 本系列文章将深入探究Java中的单点登录原理与实现方案。首先,我们将介绍单点登录的基本原理,探讨其在多应用环境下的工作流程。然后,我们将详细讨论目前流行的三种单点登录实现方案我们将分析每种实现方案的优缺点…

WARNING: No output specified with docker-container driver

这个警告信息是说 docker build 出现的,指出你没有指定任何输出目的地,因此构建后的镜像不会被持久保存,只会存留在构建缓存中。以至于后面 docker tag 命令会找不到镜像,从而导致build 和push流程失败. 两种解决的做法&#xff…

JDBC远程连接mysql报错:NotBefore: Sat Mar 30 16:37:41 UTC 2024

虚拟机docker已经部署了mysql,用navicat可以直接远程连接,datagrip却不能,如图: 需要在最后加上 ?useSSLfalse , 如:jdbc:mysql://192.168.30.128:3306?useSSLfalse navicat不用加的原因是没有使用jdbc连接&#x…

java数据结构与算法刷题-----LeetCode1091. 二进制矩阵中的最短路径

java数据结构与算法刷题目录(剑指Offer、LeetCode、ACM)-----主目录-----持续更新(进不去说明我没写完):https://blog.csdn.net/grd_java/article/details/123063846 文章目录 广度优先双分裂蛇 广度优先双分裂蛇 双分裂蛇:是求二…

Linux 学习之路--工具篇--yum

前面介绍了权限有关的内容&#xff0c;这里继续介绍有关Linux里面常用的工具之一yum 目录 一、简单介绍 <1> 源代码安装 <2>rpm 包安装 <3>yum / apt-get(ubuntu) 安装 二、简单使用 <1>安装包介绍 <2> yum 的基本指令 -- install <…

C++:数据类型—布尔(12)

布尔类型代表就是真和假&#xff08;bool&#xff09; 真就是1&#xff08;true&#xff09; 假就是0&#xff08;false&#xff09; 也可以任务非0即为真 bool 直占用1个字节大小 语法&#xff1a;bool 变量名 (true | false&#xff09; 提示&#xff1a;bool在后期判断也是…

2024年150道高频Java面试题(十)

19. 解释一下 Java 中的封装、继承和多态。 封装、继承和多态是面向对象编程&#xff08;OOP&#xff09;的三个核心概念&#xff0c;在Java中得到了广泛应用。 封装&#xff1a; 概念&#xff1a;封装是指隐藏一个对象的内部细节&#xff0c;仅对外暴露需要公开的部分。这可以…

Capture One Pro 23中文---颠覆性的图像编辑与色彩配置

Capture One Pro 23是一款功能强大且专业的RAW图像编辑处理软件。它拥有全球领先的色彩管理技术和精细的图像编辑工具&#xff0c;可以对图片进行多种精细调整&#xff0c;包括曝光、色温、对比度、锐度等&#xff0c;以满足用户特定的后期处理需求。此外&#xff0c;Capture O…

第二百三十一回

文章目录 1. 概念介绍2. 符号和平台2.1 符号2.2 平台 3. 问题与解决3.1 常见问题3.2 解决方法 4.内容总结 我们在上一章回中介绍了"关于intl报错的问题"相关的内容&#xff0c;本章回中将介绍不同平台上换行的问题.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1…

Excel函数-总

目录 1.概述 2.数组公式 2.1.数组的类别 2.2.数组的构成元素 2.3.数组运算时需要用到的运算符 3.数学与三角函数 3.1.RANDBETWEEN 3.2.ABS 3.3.MOD 3.4.PI ​​​​​​​3.5.PRODUCT ​​​​​​​3.6.RADIANS ​​​​​​​3.7.DEGREES ​​​​​​​3.8.POWER ​​​​​…

FastAPI+React全栈开发17 让我们创建一个React应用

Chapter04 Setting Up a React Workflow 17 Let’s Create a React App FastAPIReact全栈开发17 让我们创建一个React应用 As I mentioned earlier, create-react-app takes away much of the heavy work when starting a project, and we will be using it throughout this…

Python中对象的创建于使用

创建对象 在Python中&#xff0c;创建对象是通过实例化类来完成的。一个类是一个包含属性和方法的蓝图&#xff0c;它定义了一种对象的行为和特征。我们可以使用class关键字来定义一个类&#xff0c;然后使用类的名称和括号来实例化对象。 以下是一个创建对象的例子&#xff…

使用Docker搭建Sonarr

Sonarr是一款用于自动化管理电视节目的开源应用程序。它能够根据用户设定的规则自动搜索、下载并整理电视剧集&#xff0c;支持多用户、多队列管理&#xff0c;并且可以与下载客户端如SABnzbd、NZBGet等集成&#xff0c;以及与媒体服务器如Plex、Emby等配合使用&#xff0c;为用…

【3】3道链表力扣题:删除链表中的节点、反转链表、判断一个链表是否有环

3道链表力扣题 一、删除链表中的节点&#x1f30f; 题目链接&#x1f4d5; 示例&#x1f340; 分析&#x1f4bb; 代码 二、反转链表&#x1f30f; 题目链接&#x1f4d5; 示例&#x1f340; 分析① 递归② 迭代 三、判断一个链表是否有环&#x1f30f; 题目链接&#x1f4d5; …

ES6 模块化操作

ES6模块化主要有两个操作&#xff1a;import 和 export 如果在html文件的script中引用模块的话&#xff0c;要设置<script type"module"> 一种导入导出方法&#xff1a; a.js//分别暴露 export let num 1 export function compute(a, b){return a b }//统…

C++中使用虚函数实现多态

虚函数是C中用于实现多态&#xff08;Polymorphism&#xff09;的重要特性。下面是关于虚函数的讲解和代码示例&#xff1a;### 虚函数的定义&#xff1a; 虚函数是在基类中声明为 virtual 的成员函数。 在派生类中重写&#xff08;override&#xff09;这个虚函数&#xff0c;…