css 基础篇

最新推荐文章于 2024-10-07 21:54:14 发布
最新推荐文章于 2024-10-07 21:54:14 发布
阅读量268 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DHLSP15/article/details/131305801
版权

css 基础篇

居中

一、水平居中

<div class="container">
	<div class="content">水平居中</div>
</div>

1.内联元素

（1）text-align

text-align 一般运用在块级元素中，使其中的文本对齐。实际上，运用在块级元素中的text-align:center会使其包含的内联元素水平对齐。

.container {
	text-align: center;
}

2.块级元素

（1）margin

如果块元素的高度和宽度固定，就可以通过将元素的左右margin值设置为auto将元素水平居中。

.content {
	width: 200px;
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}

如果有多个块元素，需要将多个元素包裹在一个元素块中，使用一下方式实现水平居中。

<div class="container">
   <div class="box">
     <div class="content">水平居中1</div>
     <div class="content">水平居中2</div>
   </div>
 </div>

.box {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

3.通用

（1）Flex布局

在Flex布局中，justify-content可以用于设置弹性盒子元素在主轴方向上的对齐方式。当其属性值为center时，其子元素整体会在主轴的中心位置。

.container {
  display: flex;
  justify-content: center;
}

如果弹性盒子的主轴是垂直方向，可以使用align-items来代替justify-content来实现元素的水平居中。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
（2）Grid布局

在Grid布局中，justify-content属性会沿着行轴线的水平方向在网格容器中对齐网格。当属性值为center时，就可以将网格对齐到容器的水平居中位置。

.container {
  display: grid;
  justify-content: center;
}
（3）绝对定位

可以通过将使用绝对定位和变换实现元素的水平居中。

.container {
  position: relative;
}

.content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

如果块元素的宽度固定，也可以使用负边距来代替transform。

.container {
  position: relative;
}

.content {
  position: absolute;
  width: 200px;
  left: 50%;
  margin-left: -100px;
}

垂直居中

<div class="container">
	<div class="content">垂直居中</div>
</div>

1.块级元素

（1）绝对定位

可以通过将使用绝对定位和变换实现元素的垂直居中。

.container {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

如果块元素的高度固定，也可以使用负边距来代替transform。

.container {
  position: relative;
}

.content {
  position: absolute;
  height: 200px;
  top: 50%;
  margin-top: -100px;
}

2.通用

（1）Flex布局

在Flex布局中，align-items属性用来定义flex子项在容器的当前行的侧轴（纵轴）方向上的对齐方式。当其属性值为center时，元素位于容器的中心。

.container {
  display: flex;
  align-items: center;
}

如果将flex的主轴切换为垂直方向，则需要使用justify-content来代替align-items来实现元素的垂直居中。

.flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
（2）Grid布局

使用Grid布局中，可以使用align-content属性将项目垂直居中到其网格区域。

.container {
  display: grid;
  align-content: center;
}

如果将网格的排列方向更改水平，垂直居中依旧是有效的。

.container {
  display: flex;
  align-content: center;
  grid-auto-flow: column;
}

三、水平垂直居中

<div class="container">
	<div class="content">水平垂直居中</div>
</div>
（1）绝对定位

使元素垂直居中最通用的方法就是使用绝对定位和transform。

.container {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

如果元素的高度和宽度固定，也可以使用margin来代替transform。

.container {
  position: relative;
}

.content {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
}
（2）Flex布局

在使用Flex布局时，可以结合上面的水平和垂直居中来实现水平垂直集中。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
（3）Grid布局

在grid布局中，可以使用以下形式来实现元素的水平垂直居中。

.container {
  display: grid;
  place-items: center;
}

place-content属性是align-content和justify-content的简写，当该属性的值为center时，所有的子元素堆叠在父元素的中间对齐。

单位

1.相对单位

相对单位就是相对另一个长度的长度。

  • 字体相对单位，它们都是根据font-size来进行计算。常用的字体相对单位有：em、rem、ex、ch
  • 视图相对单位，它们都是根据视图大小来决定的。常用的视图相对单位有：vw、vh、vmax、vmin

（1）em和rem

em是最常见的相对长度单位，适合基于特定的字号进行排版。根据CSS的规定，1em 等于元素的font-size、border-width、width、height、margin、padding、text-shadow属性的值。
rem相对于em就简单了很多，它是根据页面的根元素（根元素）的字体大小来计算的。

使用 em 和 rem 可以让我们灵活的够控制元素整体的放大和缩小，而不是固定大小。
可以根据两者的差异来进行选择：
两者在客户端中计算出来的样式都会以px的形式显示；
rem是相对于根元素html的font-size计算，em 相对于元素的font-size计算；
当需要根据浏览器的font-size设置缩放时，应该使用 rem；
使用 em 应该根据组件的font-size来定，而不是根元素的font-size来定；
rem 可以从浏览器字体设置中继承font-size值， em 可能受任何继承过来的父元素 font-size 的影响。

(2)ex和ch

ex 和 ch 都是排版用的单位，它们的大小取决于元素的font-size和font-family属性。
ex 指的是所用字体中小写字母 x 的高度。因此，如果两个字体不一样，那么 ex 的值是不一样的。因为每种字体的小写 x 的高度是不一样的。
ch 和 ex 类似，不过它是基于数字 0 的宽度计算的。会随着字体的变化而变化。而0 的宽度通常是对字体的平均字符宽度，它是一个估计值。由于 ch 是一个近似等宽的单元，所以在设置容器的宽度时很有用，比如一个容器想要显示指定个数的字符串时，就可以使用这个单位。

(3)vw、vh、vmax和vmin

这四个单位都是视窗单位，所谓的视窗，在web端指的就是可视区域，移动端的视窗指的就是布局视窗。如果视窗大小发生了变化，那么这些值都会随之变化。这四个单位指的是：
vw：视窗宽度的百分比；
vh：视窗高度的百分比；
vmax：较大的 vh 和 vw；
vmin：较小的 vh 和 vw。

假如一个浏览器的高度是800px，那么1vh的值就是8px。vh和vw的大小总是和视窗的高度和宽度有关。
vmin 和 vmax 与视窗宽度和高度的最大值和最小值有关。假如一个浏览器高度为500px，宽度为1200px，那么1vmin就是5px，1vmax就是12px。

2.绝对单元

在 CSS 中，绝对单位包括： px 、pt 、pc、 cm 、 mm 、in 等。绝对单位是一个固定的值，它反应了一个真实的物理尺寸。它不会受屏幕大小或者字体的影响。它们的大小取决于值以及屏幕的分辨率（DPI，每英寸的点数）。

1in = 25.4mm = 2.54cm = 6pc = 72pt = 96px

（1）px

px 全称为 Pixels，表示像素，它并不严格等于显示器的像素，尤其在高清屏下。

（2）pt

pt 全称为 Point，表示点。

（3）pc

pc 全程为 Picas，表示派卡。

（4）cm

cm 全称为 Centimeters，表示厘米。

1cm = 37.8px

（5）mm

mm 全称为 Millimeters，表示毫米。

1mm = 3.78px

（6）in

in 全称为 Inches，表示英寸。

3.频率单位

CSS中的频率单位有两个：赫兹（Hz）和千赫兹（kHz）。通常情况下，频率单位使用在音频样式表中。

1kHz = 1000Hz

4.时间单位

CSS中的时间单位有两个：秒（s）和毫秒（ms）。时间单位主要用于过度和动画中，用于定义持续时间或延迟时间。

1s = 1000ms

5. 分辨率单位

CSS中的分辨率单位有三个：dpi、dpcm、dppx。这三个单位都是CSS3中华新增的单位。

1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi

（1）dpi

dpi 全称为 dots per inch，表示每英寸包含的点的数量。普通屏幕通常包含 72或96个点，大于 192dpi 的屏幕被称为高分屏。

（2）dpcm

dpcm 全称为 dots per centimeter，表示每厘米包含的点的数量。

（3）dppx

dppx 全称为 dots per pixel，表示每像素（px）包含点的数量。由于CSS px的固定比率为1:96，因此1dppx相当于96dpi。它对应于由图像分辨率定义的CSS中显示的图像的默认分辨率。

6.角度单位

CSS中的角度单位有四个：deg、grad、rad、turn。这些角度单位都是CSS3中新增的单位。
CSS的旋转主要依赖于 transform 属性中的 rotate() 、rotate3d、skew()等方法。

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

（1）deg

deg 全称为 Degress，表示度，一个圆总共360度。

（2）grad

grad 全称为 Gradians，表示梯度，一个圆总共400梯度。

（3）rad

rad 全称为 Radians，表示弧度，一个圆总共2π弧度。

（4）turn

turn 全称为 Turns，表示圈（转），一个圆总共一圈（转）。

7. 百分比单位

百分比（%）也是我们比较常用的单位之一，所有长度值的属性都可以使用百分比单位。但是不同属性使用该单位的效果可能并不一样。但是都需要有一个参照值，也就是说百分比值是一个相对的值。

（1）盒模型中的百分比

在CSS中的盒模型包含的属性有：width、max-width、min-width、height、max-height、min-height、padding、margin等。

  • width、max-width、min-width：值为百分比时，其相对于包含块的 width 进行计算；
  • height、max-height、min-height：值为百分比时，其相对于包含块的 height 进行计算；
  • padding、margin：值为百分比时，如果是水平的值，就是相对于包含块的 width 进行计算；如果是垂直的值，就是相对于包含块的 height 进行计算。

（2）文本中的百分比

在CSS中文本控制的属性有font-size、line-height 、vertical-align、 text-indent等。

  • font-size：根据父元素的font-size 进行计算；
  • line-height：根据font-size进行计算；
  • vertical-align：根据line-height进行计算；
  • text-indent：如果是水平的，则根据width进行计算，如果是垂直的，则根据 height 进行计算。

（3）定位中的百分比

在CSS中用控制 position 位置的top、right、bottom、left都可以使用百分比作为单位。

  • 如果元素为静态（ static ）或相对定位（ relative ），包含块一般是其父容器；
  • 如果元素为绝对定位（ absolute ），包含块应该是离它最近的 position 为 absolute 、 relative 或 fixed 的祖先元素；
  • 如果元素为固定定位（ fixed ），包含块就是视窗（ viewport ）。

（4）变换中的百分比

CSS 中的 transform 属性中的 translate 和 transform-origin 值也可以设置百分比。

  • translateX() 根据容器的 width 计算；
  • translateY() 根据容器的 height计算；
  • transform-origin 中横坐标（ x ）相对于容器的 width 计算；纵坐标（ y ）相对于容器的 height 计算。

颜色

颜色栏目：https://www.w3schools.com/colors/colors_names.asp

1.css命名颜色

（1）transparent

transparent关键字用作rgba(0, 0, 0, 0)的快捷方式，它表示完全透明。该关键字目前在所有浏览器都是支持的。它是background-color属性的默认值。

（2）currentColor

表示当前的颜色。如果没有指定，就会从父容器继承的文本颜色。

（3）inherit

inherit 是一个保留字，它不局限于颜色，表示该属性采用与元素父级的属性相同的值。对于继承的属性，主要用途就是覆盖另一个规则。

（4）系统颜色

还有一些其他特殊的颜色关键字，它们用来匹配一些系统元素，旨在保持浏览器上应用程序的一致性。系统颜色成对出现：背景颜色-前景颜色。

背景颜色前景颜色
buttonFacebuttonText
canvasactiveText、canvasText、linkText、visitedText
fieldfieldText
highlighthighlightText

2.RGB颜色

RGB 值也是我们常用的颜色表示方式。RGB 指的就是红-绿-蓝，这个顺序非常重要。每种颜色使用 0 到 255 之间的数字指定。最常见的 RGB 值黑色：rgb(0,0,0) 和白色：rgb(255,255,255)。RGB表示法使我们以更易读的形式来访问与十六进制值相同的颜色范围。

3. Hex 颜色

我们还可以使用十六进制值来表示 CSS 中的颜色，这也是我们用的最多的颜色表示方式。十六进制使用 16 个符号表示，使用 0 - 9 表示值 0 到 9，A - F 表示值 10 到 15。

Decimal0123456789101112131415
Hexadecimal0123456789ABCDEF

4. HSL 颜色

HSL 全称是 Hue-Saturation-Lightness，分别表示色调、饱和度和亮度。它基于 RGB 色轮的。每种颜色都有一个角度以及饱和度和亮度值的百分比值。

  • 色调：色调描述了色轮上的值，从 0 到 360 度，从红色开始（0 和 360）；
  • 饱和度：饱和度是所选色调的鲜艳程度，100% 表示完全饱和的亮色，0% 表示完全不饱和的灰色；
  • 亮度：颜色的亮度级别，较低的值会更暗，更接近黑色，较高的值会更亮，更接近白色。

5. HWB 颜色

HWB 全称为Hue-Whiteness-Blackness，表示色调、白度和黑度。

  • 色调：色轮中的一个角度；
  • 白度：表示要混合的白色量的百分比。值越高，颜色越白。
  • 黑度：表示要混合的黑色量的百分比。值越高，颜色越黑。

6. LAB 颜色

LAB是一个可以在Photoshop等软件中访问的颜色空间，它代表了人类可以看到的整个颜色范围。它使用三个轴表示:亮度、a轴和b 轴。

  • 亮度：从黑色到白色。值越低，颜色越接近黑色。
  • a轴：从绿色到红色。较低的值接近绿色，较高的值更接近红色。
  • b轴：从蓝色到黄色。较低的值接近蓝色，越高的值更接近黄色。

7. LCH 颜色

LCH代表亮度、色度和色调。它与Lab具有相同的L值，但不是使用坐标a和 b，而是使用C(色度）和H(色调)。色调可以是0到360之间的值。色度代表颜色的量，它类似于HSL 中的饱和度。但是色度值可以超过100，理论上它是无上限的。
对于色度值，目前的浏览器和显示器可以显示颜色量是有限的，只有0-230之间的值是有用的，超过之后就和230的差异就不大了。

8. CMYK 颜色

CMYK代表Cyan、Magenta、Yellow和Key，它们与打印机中的墨水颜色相匹配。虽然屏幕通常以RGB.来显示颜色，而打印机通常使用青色、品红色、黄色和黑色的组合来表示颜色，这些是最常见的墨水颜色。

9. 颜色混合

在CSS Color Module Level 5提案中提出了颜色混合的概念和相关方法 color-mix()，该方法可以混合了两种颜色，类似于Sass 中的mix()函数。color-mix)允许我们指定颜色空间，默认使用LCH，具有出色的混合效果。

DHLSP15
关注
前端css基础篇（三） background背景元素position定位以及清除浮动的四种方法
qq_41363062的博客
01-05 1886
一、 background背景元素 1. background-color背景颜色 可以简写 background；默认值是transparent。（透明） 不能继承 2. background-image背景图片 可以简写background url（“图像的url路径地址”）图像的URL； none 表示背景上没有设置任何图像，这是默认值； inherit 指定背景图像应该从父元素继承 b...
HTML&CSS基础篇之三：HTML基础结构之ML篇
浪子大侠 江湖
06-30 848
HTML 基础结构
CSS基础
欢迎光临 我的心
08-12 454
文章目录为网页添加样式术语解释选择器声明块CSS代码书写位置内部样式表内联样式表，元素样式表外部样式表[推荐]常见样式声明font-sizefont-weightfont-familyfont-styletext-decorationtext-indentline-heightletter-spacetext-align选择器简单选择器选择器的组合选择器的并列层叠1. 比较重要性2. 比较特殊性3. 比较源次序应用继承属性值的计算过程盒模型盒子的组成部分盒模型应用改变宽高范围改变背景覆盖范围溢出处理断词规则
CSS入门
最新发布
scj1022的博客
10-07 1387
CSS入门
前端知识点面试题CSS基础篇1.docx
07-09
**CSS基础篇** 1. **盒模型** CSS盒模型是网页布局的核心概念，它描述了元素在网页中占据的空间。标准盒模型（W3C）包括内容(content)、内填充(padding)、边框(border)和外边距(margin)，其中元素的宽度和高度仅指...
html/css基础篇——html代码编写过程中的几个警惕点(必看)
12-01
本文想说的警惕点与浏览器兼容无关，主要是几个本人在项目中遇到的几个小问题的总结，问题虽小，但是却有时很困扰人，在此记录一下，如果后期有此类问题会持续添加到这里。 1.内联标签之间的空格 ...
javascript CSS画图之基础篇
10-29
利用JavaScript和CSS，我们可以在浏览器上创建和操作矢量图形，而无需依赖外部插件或图像文件。本文将重点介绍在浏览器中动态绘制矢量图的基础知识点，包括图形的显示样式、绘制算法以及如何通过抽象和精简代码来...
前端面试必备：CSS基础篇重点解析
"前端知识点面试题CSS基础篇1" 在前端面试中，CSS基础是不可或缺的部分。以下是一些关键的CSS知识点： 1. **盒模型**：标准的CSS盒模型包括内容区域(content)、内边距(padding)、边框(border)和外边距(margin)。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值