HTML & CSS

发表于 分类于 阅读次数： 本文字数： 5.1k 阅读时长 ≈ 19 分钟
很久前搞前端开发时的笔记，偶尔可能查一下（不过现在有 ChatGPT、Copilot 也用不大上了）

HTML5

meta标签

1
2
3
4
5
6
7
8
<meta charset="utf-8">
<meta name="keywords" content="关键字1,关键字2">
<meta name="description" content="网站描述">
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">


<!-- 设置视口大小 device-width表示设备的宽度（完美视口） -->
<meta name="viewport" content="width=device-width， initial-scale=1.0">

其他标签

hgroup标签

用来为标题分组，可以将一组相关的标题同时放到hgroup中

1
2
3
4
<hgroup>
  <h1>标题1</h1>
  <h2>标题2</h2>
</hgroup>

引用标签

blockquote表示一个长引用

1
2
3
<blockquote>
    引用内容
</blockquote>

q表示一个短引用

1
子曰：<q>学而时习之，不亦说乎</q>

下拉列表

1
2
3
4
5
<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

块元素 行内元素

块元素（Block Element）

网页中一般通过块元素来进行页面布局

行内元素（Inline Element）

主要用来包裹文字，一般情况下会在块元素中放行内元素

布局标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<header>
  <!-- 表示网页头部 -->
</header>
<main>
  <!-- 表示网页主体(一个页面中只有一个) -->
</main>
<footer>
  <!-- 表示网页底部 -->
</footer>
<nav>
  <!-- 导航 -->
</nav>
<aside>
  <!-- 表示和主体相关的内容(侧边栏) -->
</aside>
<article>
  <!-- 表示一个独立的文章 -->
</article>
<section>
  <!-- 表示一个独立的区块 -->
</section>

图片格式

图片格式
jpeg(jpg) 支持的颜色比较丰富，不支持透明效果，不支持动图，一般用来显示照片
gif 支持的颜色比较少，支持简单透明，支持动图
png 支持的颜色丰富，支持复杂透明，不支持动图 （专为网页而生）
webp

表单

  • autocomplete="off" 关闭自动补全
  • readonly 将表单项设置为只读，数据会提交
  • disabled 将表单项设置为禁用，数据不会提交
  • autofocus 设置表单项自动获取焦点

CSS3

CSS工具网页

  1. 颜色板：
  2. CSS代码片段： http://caibaojian.com/30-seconds-of-css/

选择器权重

选择器 权重
内联样式 1000
id选择器 100
类和伪类选择器 10
元素选择器 1

长度单位

像素

百分比：

可以将属性值设置为相对于父元素属性的百分比

em

em是相对于元素的字体大小来计算的

1em = 1 font-size

rem

rem是相对于根元素（html）字体大小来计算的

颜色

RGB

RGB通过三种颜色的不同深度来调配出不同的颜色。

语法：

1
background-color: rgb(红色,绿色,蓝色);

RGBA

在RGB的基础上增加一个a表示不透明度

十六进制RGB值

颜色浓度通过 00-ff

如果颜色两位两位重复可以进行简写：

1
#aabbcc-->#abc

语法：#红色绿色蓝色

1
background-color: #ff0000;

HSL值

H 色相（0-360）

S 饱和度，颜色的浓度 （0%-100%）

L 亮度，颜色的亮度 （0%-100%）

其他

1
2
inherit // 继承
transparent // 透明

CSS布局

http://zh.learnlayout.com/toc.html

文档流

normal flow

  • 网页是一个多层的结构，一层摞一层。
  • 通过CSS可以分别为每一层来设置样式
  • 作为用户来讲只能看到最顶上一层
  • 最底下一层称为文档流，文档流是网页的基础
  • 元素在文档流中的特点：
    • 块元素
      • 块元素会在页面中独占一行
      • 默认宽度是父元素的全部（会把父元素撑满）
      • 默认高度是被内容撑开（子元素）
    • 行内元素
      • 行内元素不会独占页面的一行，只占自身的大小
      • 行内元素在页面中左向右平行排列，如果一行之中不能容纳所有的行内元素，则元素会换到第二行继续自左向右排列
      • 行内元素的默认宽度和高度都是被内容撑开

display属性

1
2
3
4
display: block;			/*块级元素(自动换行)*/
display: inline;		/*行内元素*/
display: none;			/*隐藏(不占据原显示空间)*/
  [visibility: hidden;] /*隐藏(占据原显示空间)*/

一个块级元素会新开始一行并且尽可能撑满容器，常用的块级元素： div、 p 、 form 、 header 、 footer 、 section 等等。

一个行内元素可以在段落中包裹一些文字而不会打乱段落的布局，常用的块级元素：span、a，常见的例子是：把 li 元素修改成 inline，制作成水平菜单。

margin: 0 auto;

1
2
3
4
#main {
  max-width: 600px;
  margin: 0 auto;
}

盒子模型

box-sizing: border-box; 元素的内边距和边框不再会增加它的宽度。

1
2
3
4
5
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

定位(position)

1
2
3
4
5
postion: static;    /*默认值，不会被"positioned"*/
position: relative; /*相对定位(表现的和static一样，除非添加了一些额外的属性)*/
position: fixed;    /*相对视窗定位,top,right,bottom和left属性均可用*/
position: absolute; /*绝对定位*/
position: sticky;   /*粘滞定位*/

相对定位

  • 元素开启相对定位后，如果不设置偏移量（offset），元素不会发生任何变化。
  • 相对定位是参照于元素在文档流中的位置进行定位的
  • 相对定位会提升元素的层级
  • 相对定位不会使元素脱离文档流
  • 相对定位不会改变元素的性质
1
2
3
4
5
6
.relative{
    position: relative;
    top: -20px;
    left: 20px;
    width: 500px;
}

top , left , right , bottom 属性会使偏离其正常位置，其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

绝对定位

  • 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
  • 开启绝对定位后，元素会从文档流中脱离
  • 绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
  • 绝对定位会使元素提升一个层级
  • 绝对定位元素是相对于其包含块进行定位的
    • 包含块
      • 正常情况下，包含块就是离当前元素最近的祖先块元素
      • 绝对定位情况下，包含块就是离它最近的开启了定位的祖先元素（position值不是static）

水平布局：

1
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块宽度

  • 开启绝对定位后，水平方向布局需要添加left和right两个值，当发生过度约束，如果值中没有auto则自动调整right值使等式满足

  • 可设置auto的值：

    margin，width，left，right

  • 因为 left 和right 的默认值是 auto，所以如果不知道 left 和 right ，则等式不满足时，会自动调整这两个值

固定定位

  • 固定定位也是一种绝对定位，大部分特点和绝对定位一样。唯一不同的是固定定位永远参照于浏览器的视窗进行定位

移动浏览器对 fixed 的支持很差。

1
2
3
4
5
6
7
8
9
10
11
12
.relative {
 	position: relative;
 	width: 600px;
 	height: 400px;
}
.absolute {
 	position: absolute;
 	top: 120px;
	right: 0;
	width: 300px;
 	height: 200px;
}

absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的 “positioned” 祖先元素。如果绝对定位（position属性的值为absolute）的元素没有 “positioned” 祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个 “positioned” 元素是指 position 值不是 static 的元素。

fixed 定位不能存在有 translate 操作的 div 中，否则会失效。

粘滞定位

  • 粘滞定位和相对定位特点基本一致，不同的是粘滞定位可以在到达某个位置时将其固定
1
2
position: sticky;
top: 0;

浮动

  • 元素设置浮动以后，水平布局的等式边不需要强制成立
  • 元素设置成浮动以后，会完全从文档流中脱离，不在占用文档流的位置
  • 浮动元素默认不会从父元素中移出
  • 浮动元素向左或向右移动时，不会超过它前面的浮动元素
  • 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围

float

float可用于实现文字环绕图片

1
2
3
4
img {
 	float: right;
 	margin: 0 0 1em 1em;
}

clear

控制浮动

  • 作用：清除浮动元素对当前元素所产生的影响
  • 原理：设置清除浮动后，浏览器会自动为元素添加一个上外边距，以使其元素不受其他元素的影响
1
2
3
4
5
6
7
8
9
.box {
    float: left;
    width: 200px;
    height: 100px;
    margin: 1em;
}
.after-box {
    clear: left; /*清除左浮动*/
}
1
2
3
4
<div class="box">
    ...
</div>
<section class="after-box">...</section>

高度坍塌

  • 在浮动布局中，父元素的高度默认是被子元素撑开的
  • 当子元素发动后，其会完全脱离文档流，子元素从文档流中脱离，将无法撑起父元素的高度，导致父元素的高度丢失
  • 父元素高度丢失以后，其下的元素会自动上移，导致页面布局混乱，所以高度坍塌是浮动布局中比较常见的一个问题。

BFC

BFC（Block Formatting Context）块级格式化环境

  • BFC是CSS中的一个隐含的属性，可以为一个元素开启BFC，开启BFC后该元素会变成一个独立的布局区域

  • 元素开启BFC后的特点：

    • 开启BFC的元素不会被浮动元素所覆盖
    • 开启BFC的元素子元素和父元素外边距不会重叠
    • 开启BFC的元素可以包含浮动的子元素

  • 可以通过一些特殊方式来开启元素的BFC：

    1
    2
    3
    .inner{
        float: left;
    }

    • 设置元素的浮动（不推荐）

      1
      2
      3
      .outer{
          float: left;
      }

    • 将元素设置为行内块元素（不推荐）

      1
      2
      3
      .outer{
          display: inline-block;
      }

    • 将元素的overflow设置为一个非visible的值

      1
      2
      3
      .outer{
          overflow: hidden;
      }

使用::after伪类解决高度塌陷

1
2
3
4
5
.box1::after{
    content: '';
    display: block;
    clear: both;
}

clearfix 解决高度塌陷和外边距重叠

1
2
3
4
5
6
.clearfix::before, 
.clearfix::after{
    content: '';
    display: table;
    clear: both;
}

弹性盒

  • flex（弹性盒、伸缩盒）

    • 是CSS中的又一种布局手段，它主要是用来代替浮动来完成页面的布局

    • flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

    • 弹性容器

      • 要使用弹性盒，必须先将一个元素设置为弹性容器

      • 我们通过display来设置弹性容器

        1
        2
        display: flex;        // 设置为块级弹性容器
        display: inline-flex; // 设置为行内弹性容器

    • 弹性元素

      • 弹性容器的子元素是弹性元素（弹性项）
      • 一个元素可以同时是弹性容器和弹性元素

    • flex-direction 指定容器中弹性元素的排列方式

      • row 默认值，水平排列（从左向右）
      • row-reverse 反向水平排列
      • column 纵向排列（自上向下）
      • column-reverse 反向纵向排列

    • 主轴：

      • 弹性元素的排列方向称为主轴

    • 侧轴：

      • 与主轴垂直方向的称为侧轴

  • flex-grow 指定弹性元素的伸展的系数

    • 当父元素有多余空间时，子元素如何伸展
    • 父元素的剩余空间，会按照比例进行分配

  • flex-shrink 指定弹性元素的收缩系数

    • 当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩

  • flex-wrap 设置弹性元素是否在弹性容器中自动换行

    • nowrap 默认值，元素不会自动换行
    • wrap 元素沿着辅轴方向自动换行

  • justify-content 如何分配主轴上的空白空间（主轴上的元素如何排列）

    • flex-start 元素沿着主轴起边排列
    • flex-end 元素沿着主轴终边排列
    • center 元素居中排列
    • space-around 空白分布到元素两侧
    • space-between 空白均匀分布到元素间

  • align-items 元素在辅轴上如何对齐

    • 元素间的关系
      • stretch 默认值 将元素的长度设置为相同的值
      • flex-start 元素不会拉伸，沿着辅轴起边对齐
      • flex-end 沿着辅轴的终边对齐
      • center 居中对齐
      • baseline 基线对齐
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
ul{
    display: flex;
    flex-firection: row;
}

li{
    flex-grow: 1;
}
li:nth-child(1){
    flex-grow: 1;
}
li:nth-child(2){
    flex-grow: 2;
}
li:nth-child(3){
    flex-grow: 3;
}

像素

  • 屏幕是由一个个发光的小点构成的，一个点就是一个像素
  • 分辨率 说的就是屏幕中点的数量
  • 在前端开发中像素要分两种情况讨论：CSS像素和物理像素
  • 默认情况下，在PC端，一个CSS像素 = 一个物理像素
  • 不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰
  • 智能手机的像素点远远小于计算机的像素点
  • 默认情况下，移动端的网页都会将视口设置为980像素（CSS像素）
    • 确保PC端网页可以在移动端正常访问，但是如果网页的宽度超过980px，浏览器会自动最网页缩放以完整显示网页

百分比宽度

1
2
3
img {
    width: 50%;
}

响应式

  • 网页可以根据不同的设备或窗口大小呈现出不同的效果
  • 使用响应式布局，可以使一个网页适用于所有设备
  • 相应布局的关键是媒体查询
    • 媒体查询语法: @media 查询规则{}
      • all 所有设备
      • print 打印设备
      • screen 带屏幕设备
      • speech 屏幕阅读器
  • 样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化
    • 一般常用的断点：
      • 小于768 超小屏幕 max-width=768px
      • 大于768 小屏幕 min-width=768px
      • 大于992 中型屏幕 min-width=992px
      • 大于1200 大屏幕 min-width=1200px
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}
1
<link rel="stylesheet" type="text/css" media="screen and (max-width: 700px)" href="css/index_max_700.css"/>

inline-block

创建很多网格来铺满浏览器

1
2
3
4
5
6
.box {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

column

文字多列布局

1
2
3
4
5
6
7
8
9
.three-column {
  padding: 1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}

flexbox

使用 Flexbox 的居中布局

1
2
3
4
5
6
7
8
9
.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

渐变

  • 线性渐变
    • 开头可指定渐变方向
      • to left
      • to right
      • to bottom
      • to top
      • xx deg deg表示度数
      • turn 表示圈
1
2
3
4
/*向右渐变*/
background: linear-gradient(to right, 颜色1, 颜色2);
/*向上渐变*/
background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
  • 径向渐变（放射性效果）
1
background: radial-gradient();

对半颜色

1
background: linear-gradient(to right, red 50%, blue 50%);

2D移动

1
2
/*demo: 向右移动10px, 向下移动5px*/
transform: translate(10px, 5px);

2D旋转

1
2
3
4
5
6
7
8
/*旋转25度*/
transform: skewX(25deg);


transform: rotateZ(360deg);

/*是否显示元素背面*/
backface-visibility: hidden;

盒子前置

1
2
3
/*z-index 在z轴上的位置,值越大位置越靠前*/
z-index: 100;
position: relative;

透明度

1
2
/*透明度40%*/
opacity:0.4;

阴影

box-shadow

1
2
3
4
5
6
7
8
9
10
.box{
    box-shadow: 0px 0px 50px 5px rgba(0, 0, 0, .3);
    /*
    	第一个值 水平偏移量
    	第二个值 垂直偏移量
    	第三个值 阴影的模糊半径
    	第四个值 阴影的大小
    	第五个值 阴影的颜色
    */
}

圆角

1
2
3
4
5
6
7
8
9
.box{
    border-radius: 30px;
    /*
    	设置圆角，设置的圆的半径大小
    	border-radius: 1px 2px 3px 4px;
    	左上角，右上角，右下角，左下角。(顺时针)
    */
    border-radius: 50%;/*设置成圆角*/
}

溢出部分隐藏

1
overflow: hidden;

间距

1
2
3
4
/*字间距*/
letter-spacing: 1px;
/*行高*/
line-height:30px;

禁用指针样式

1
pointer-envents: none;

居中

1
2
3
4
/*整体水平居中*/
body{
    margin: 0 auto;
}
1
2
3
4
5
/*水平 垂直居中*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
1
2
3
4
/*相对于父元素垂直居中*/
position: relative;
top: 50%;
transform: translateY(-50%);
1
2
3
display: flex;
justify-content: center;
align-items: center;

默认样式清除

超链接a

1
text-decoration: none; /*清除文本样式 如下划线*/
1
2
3
4
5
6
7
8
9
10
11
a:link{	/*未访问的超链接*/
	
}
a:visited{	/*访问过的超链接*/

}

a, a:visited{
  text-decoration: none;
  color: #333;
}

列表li

1
2
3
4
5
ul, li{ 
    padding:0;
    margin:0;
    list-style:none
}

按钮button

1
2
3
4
5
6
7
button{
    margin: 0;
    padding: 0;
    border: 1px solid transparent;  
    outline: none; 
    cursor: pointer;
}

文本框textarea

1
2
3
textarea{
    resize: none;
}

输入框input

1
2
3
4
5
input{
    background: none;
    outline: none;
    border: none;
}

表格table

1
2
3
4
5
6
7
table {
	border-collapse: collapse;
	margin: 0 auto;
}
table th, table td {
    border: 1px solid #f7f7f7;
}

子元素

nth-child(): https://www.w3h5.com/post/101.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*选择span元素的第n个子元素*/
span:nth-child(n){ 
}
:nth-child(even){} /*偶数元素*/
:nth-child(odd){} /*奇数元素*/
:nth-child(n+m){} /*第m个元素及以后的元素*/

/*选中第一个子元素*/
span:first-child(){
}
/*选中最后一个子元素*/
span:last-child(){
}

:not()/*否定伪类*/

伪元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
p::first-letter{ /*第一个字母*/
    font-size: 30px;
}
p::first-line{ /*第一行*/
    background-color: yellow;
}
p::selection{ /*选中内容*/
    background-color: greenyellow;
}

div::before{ /*元素开始*/
    content: 'aaa';
}	
div::after{ /*元素最后*/
    content: 'bbb';
}

图片

1
2
3
4
5
img {
    backgroud: url('bg.jpg') repeat-x; /*水平重复*/
    background-repeat: repeat-x;
    background-position: bottom;
}

导入外部字体

注意版权问题

1
2
3
4
5
6
@font-face{
    /*指定字体名字*/
    font-family: '思源宋体';
    /*指定字体路径*/
    src : url('../fonts/syst.ttf');
}

图标字体

段落首行缩进

1
text-indent: 25px;

元素对齐方式

  • vertical-align 设置元素垂直对齐的方式
    • baseline 默认值 基线对齐
    • top 顶部对齐
    • bottom 底部对齐
    • middle 居中对齐
1
vertical-align: bottom;

文本修饰

  • text-decoration 设置文本修饰
    • none 什么都没有
    • underline 下划线
    • line-through 删除线
    • overline 上划线

处理空白

  • white-space 设置网页如何处理空白
    • normal 正常
    • nowrap 不换行
    • pre 保留空白

设置多余部分变省略号效果

1
2
3
4
5
6
.box{
    width: 20
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

背景图片

1
background-image: url(./img/bg.png);
  • background-repeat
    • repeat 默认值，背景会沿x轴 y轴双方向重复
    • repeat-x
    • repeat-y
    • no-repeat 不重复
  • background-position
    • center center 居中
  • background-size
    • cover 图片比例不变，将元素铺满
    • contain 图片比例不变，将图片在元素中完整显示

过渡

  • 过渡（transition)

    • 通过过渡可以指定一个属性发生变化时的切换方式
    • 通过过渡可以创建一些非常好的效果，提升用户体验

  • transition-property 指定要执行过渡的属性

    • 多个属性间使用 , 隔开

    • 如果所有书序都需要过渡，则使用all关键字

    • 大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡

    • transitiion-property: height, width;

  • transition-duration 指定过渡效果的持续时间

  • 时间单位 s 和 ms

  • transition-duration: 100ms;

  • transition-timing-function 过渡的时序函数

    • 指定过渡的执行方式

    • 可选值

      • ease 默认值 慢速开始，先加速后减速

      • linear 匀速运动

      • ease-in 加速运动

      • ease-out 减速运动

      • ease-in-out 先加速 后减速

      • cubic-bezier() 指定时序函数

    • transition-timing-function: ease;

  • transition-delay 过渡效果的延迟，等待一段时间后再执行过渡

1
scroll-behavior: smooth; /*平滑滚动*/

动画

  • 动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果

  • 设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤

  • animation-name 要对当前元素生效的关键帧的名字

  • animation-duration 动画的执行时间

  • animation-delay 动画的延时

  • animation-iteration-count 动画执行的次数

    • infinite 无限执行

  • animation-direction 动画运行方向

    • normal 默认值，从 from 向 to 运行
    • reverse 反方向执行
    • alternate from->to->from

  • animation-play-state 设置动画执行状态

    • running 默认值 动画执行
    • paused 动画暂停

  • animation-fill-mode 动画的填充方式

    • none 默认值 动画执行完毕后元素回到原来位置
    • forwards 动画执行完毕后元素会停止在动画结束的位置
    • backwards 动画延时等待时，元素就会处于开始位置
    • both 结合了 forwards 和 backwards
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@keyframs test{
    /* from 表示动画的开始位置，也可以是0%*/
    from{
        
    }
    
    /* to 动画的结束位置，也可以是100%*/
    to{
        
    }
}

.box{
    animation-name: test;
    animation-duration: 2s;
}

缩放

  • 对元素进行缩放
    • scaleX() 水平方向缩放
    • scaleY() 垂直方向缩放
    • scale() 双方向缩放
1
transform: scaleY(2);

移动端

vw

  • vw 表示的是视口的宽度（viewport width）
    • 100 vw = 一个视口的宽度
    • 1 vw = 1% 视口宽度
  • 通常设计图的宽度为 750px 或1125px
    • 0.13333333333333vw = 1px
1
2
3
4
5
6
7
8
9
10
html{
    font-size: 5.3333vw;
}

.box{
    /*
    	1 rem = 40px;
    */
    width: 18.75rem;
}