CSS知识点总结

[删除(380066935@qq.com或微信通知)]

更好的阅读体验请查看原文:https://www.cnblogs.com/feixianxing/p/html-css-frequently-used-attribute-values-transform-flex.html

CSS知识点总结

文章内容可能较多且杂乱,可以查看页面右方的目录,以及使用Ctrl+F搜索页面内容进行内容定位。

常用属性

推荐搭配文档使用,可以复制属性名,到文档查看该属性对应的可选值。

👉MDN Web Docs

盒模型

  • 宽度:width

  • 高度:height

  • 边框:border

  • 圆角:border-radius

  • 外边距:margin

  • 内边距:padding

  • 阴影效果:box-shadow

  • 背景:background

    • 背景颜色:background-color

    • 背景图片:background-image

    • 背景位置:background-position

    • 背景大小:background-size

    • 背景(图片)是否重复直到铺满:background-repeat

    • 过渡效果:transition

字体

  • 字体大小:font-size
  • 字体颜色:color
  • 字体粗细:font-weight
  • 字体(备选)族:font-family
  • 文字间距:letter-spacing
  • 文字对齐方式:text-align
  • 文字超出范围的显示处理:text-overflow

图片

  • object-fit:contain/cover

flex布局

  • 使用display: flex;

  • align-items:垂直于主轴方向上的排列方式

  • justify-content:主轴方向上的排列方式

  • flex-grow:容器空间有剩余时的扩大策略

  • flex-shrink:容器空间不够时的缩小策略

  • flex-wrap:是否自动换行

  • flex-direction:排布方向

伪元素

  • ::before:在DOM元素的前方添加内容
  • ::after:在DOM元素的后方添加内容
  • ::empty:在DOM元素内容为空时添加内容,可以用于提示用户"...没有内容"之类的情景

伪类

  • :hover:鼠标覆盖时触发
  • :focus:鼠标点击或者通过tab按键聚焦时触发,常用于输入框
  • :blur:失去焦点时,常用于输入框

transform

  • scale:放缩大小
  • translate:平移
  • rotate:旋转

动画

  • animation:使用动画

  • keyframes:定义动画


基础知识点

行内元素与块级元素

  • 块级元素独占一行,行内元素与其它元素在同一行;
  • 行内元素的width和height无效;
  • 行内元素与块级元素的切换:display: inline;display: block;
  • 行内块元素同时拥有二者的特点:display: inline-block;

常见块级元素

<div>     // 定义文档中的分区或节 
<form>  // 创建 HTML 表单 
<h1>    // 定义最大的标题
<h2>    // 定义副标题
<h3>     // 定义标题
<h4>     // 定义标题
<h5>     // 定义标题
<h6>     // 定义最小的标题
<hr>     // 创建一条水平线
<li>     // 标签定义列表项目
<ol>     // 定义有序列表
<ul>    // 定义无序列表
<p>     // 标签定义段落
<table>     // 标签定义 HTML 表格
<tbody>     // 标签表格主体(正文)
<td>    // 表格中的标准单元格
<tfoot>     // 定义表格的页脚(脚注或表注)
<th>    // 定义表头单元格
<thead>    // 标签定义表格的表头
<tr>     // 定义表格中的行

常见行内元素

<a>     // 标签可定义锚 
<b>     // 字体加粗 
<br>     // 换行 
<i>     // 
<label>     // 标签为 input 元素定义标注(标记)
<span>     // 组合文档中的行内元素
<sub>     // 定义下标文本
<sup>     // 定义上标文本
<textarea>     // 多行的文本输入控件

常见行内块元素

<button> 	// 按钮
<input>   	// 文本输入框
<textarea> 	// 文本域(多行文本输入)
<select> 	// 下拉选择框
<img>		// 图片

盒模型

图片来源于:盒模型 - 学习 Web 开发 | MDN (mozilla.org)

内容区:指上图中的蓝色矩形区域,是一个节点的内容区域,可以是文字或图片等内容。

在CSS盒子模型的默认定义里,你对一个元素所设置的 widthheight只会应用到这个元素的内容区。

源自:box-sizing - CSS:层叠样式表 | MDN (mozilla.org)

案例

如果存在一个父盒子包含一个子盒子,子盒子的width设置为100%,如果子盒子存在边框或内边距,则子盒子会溢出父盒子的范围,如下图:

image-20230428211125542

box-sizing

该CSS属性的默认值是content-box,即以内容区决定实际宽高。

另一个常用的值是border-box,指的是以(边框+内边距+内容区)决定实际宽高,更符合直觉,推荐使用。

推荐写法

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  • *是通配符,表示每一个页面元素都会匹配该规则。

  • 由于部分html元素会自带内外边距,根据个人习惯可以考虑将自带的内外边距清空,后续需要再设置。

  • box-sizing设置为人性化的border-box


居中方法

基本上所有主流浏览器都支持弹性布局(flex布局),下文的多种思路大多数都只是提供参考,flex布局可以完成绝大多数对齐需求。

水平居中对齐

元素居中对齐

使用margin: auto;,需要设置width属性。

文本居中对齐

文本在元素内居中对齐:text-align: center;

图片居中对齐

变成元素,然后使

用margin:

img{
	display: block;
    margin: auto;
    width: 40%;
}

左右对齐

使用定位方式

position: absolute;

使用position通常<body>元素会设置marginpadding.

使用float方式

float: right; float: left;

通常对<body>元素的外边距和内边距进行预定义。

如果子元素的高度大于父元素,且子元素设置了浮动,那么子元素将溢出。可以在父元素上添加overflow: auto;来解决子元素溢出的问题。

垂直居中对齐

使用padding

父盒子使用padding,子元素可以实现垂直居中:

.center{
	padding: 70px 0;
    /*...*/
}

如果要文本水平和垂直都居中:

.center{
    padding: 70px 0;
    text-align: center;
    /*...*/
}
使用line-height
.center{
	line-height: 200px;
    height: 200px;
    text-align: center;
}
使用position和transform
.center{
    height: 200px;
    position: relative;
    border: 3px solid green;
}

.center p{
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

长度单位

绝对长度单位

长度单位 说明
cm 厘米
mm 毫米
in 英寸,inch,(1in = 96px = 2.54cm)
px 像素( 1px = \(\frac1{96}\) in)
pt point,磅,点,(1pt = \(\frac1{72}\)in)
pc pica,派卡,(1pc = 12pt)

相对长度单位

长度单位 说明
em 相对于自身 font-size(字体大小)属性的值,如果自身没有设置,则继承父元素 font-size 属性的值,1em 等同于 font-size 属性值。
rem 相对于根元素<html>的 font-size 属性的大小,比如根元素的 font-size 是 100px,那么 1.2rem 就相当于 120px。
ex 相对于所用字体中小写英文字母 x 的高度,若无法确定 x 的高度则使用 0.5em 计算.。
ch 相对于所用字体中数字 0 的高度,若无法确定 0 的高度则使用 0.5em 计算。
vw 相对于浏览器窗口的宽度,1vw = 窗口宽度的 1%。
vh 相对于浏览器窗口的高度,1vh = 窗口高度的 1%。
vmin vw与vh中较小的值。
vmax vw与vh中较大的值。
% 相对于父元素宽度或字体大小的百分比.

transform

平移translate()

两个参数:向右平移的距离,向下平移的距离。

旋转rotate()

一个参数:角度,单位deg

  • 正值:顺时针旋转;
  • 负值:逆时针旋转。

缩放scale()

如果输入两个参数,则表示:宽度倍数,高度倍数。

如果输入一个参数,则表示:宽高倍数。

倾斜skew()

两个参数:X轴倾斜角度,Y轴倾斜角度。

矩阵matrix()

矩阵是最万能,但是最繁琐的写法,使用线性变化可以实现以上的各种变化。

包含六个参数:a,b,c,d,e,f 分别对应如下矩阵的位置的参数值

\[\left( \begin{matrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{matrix} \right) \]

下面是矩阵和上文其它变化的关系

matrix() & translate()
transform:matrix(1,0,0,1,tx,ty);

tx:水平偏移距离

ty:垂直偏移距离

matrix() & scale()
transform:matrix(sx,0,0,sy,0,0);

sx:水平缩放倍数

sy:垂直缩放倍数

matrix() & rotate()
transform:matrix(cosθ,sinθ,-sinθ,cosθ,0,0);

θ是顺时针旋转的角度。

matrix() & skew()
transform:matrix(1,tan(θy),tan(θx),1,0,0);

θx表示X轴倾斜的角度,θy表示Y轴倾斜的角度。

镜像对称
matrix((1-k*k)/(1+k*k),2k/(1+k*k),2k/(1+k*K),(k*k-1)/(1+k*k),0,0)

其中 \(k\) 是轴的斜率。