html+css总结

一、h1一个网页就用一次，用来放新闻标题或者网页logo。

二、strong、em、ins、del 标签自带强调含义(语义)。

标签名 效果
strong 文字加粗
em 倾斜
ins 下划线
del 删除线行内元素与

三、行内元素、块级元素以及行内块元素

  1. 行内元素有：a b span img input select strong；一行可以显示多个，设置宽高属性不生效，宽高尺寸由内容撑开。
  2. 级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；独占一行，宽度默认是父级的100%，添加宽高属性生效。
  3. 行内块元素：一行可以显示多个，设置宽高属性生效，宽高尺寸也可以有内容撑开。

四、img标签属性说明

属性 作用 说明
alt 替换文本 图片无法显示的时候显示的文字
title 提示文本 鼠标悬停在图片上面的时候显示的文字
width 图片的宽度 值为数字，没有单位
height 图片的高度 值为数字，没有单位

五、a标签 超链接标签

href 属性值是跳转地址，是超链接的必须属性。

超链接默认是在当前窗口跳转页面，添加 target=”_blank” 实现新窗口打开页面。

拓展:开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。

六、audio音频标签

属性 作用 特殊说明
src(必须的属性) 音频URL 支持格式:MP3,Ogg,wav
controls 显示音频控制面板
loop 循环播放
autoplay 自动播放 为了提升用户体验，浏览器一般会禁用自动播放功能

七、书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。

八、 video视频标签

属性 作用 特殊说明
src(必须的属性) 视频URL 支持格式:MP4，WebM,Ogg
controls 显示视频控制面板
loop 循环播放
muted 静音播放
autoplay 自动播放 为了提升用户体验，浏览器支持在静音状态自动播放

九、标签:dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。

  • dl 里面只能包含dt 和 dd
  • dt 和 dd 里面可以包含任何内容

十、表格

table 嵌套 tr，tr 嵌套 td / th。

table表格 tr行 th表头单元格 td内容单元格

合并单元格

作用:将多个单元格合并成一个单元格，以合并同类信息。

合并单元格的步骤:

  1. 明确合并的目标
  2. 保留最左最上的单元格，添加属性(取值是数字，表示需要合并的单元格数量)
    1. 跨行合并，保留最上单元格，添加属性 rowspan
    2. 跨列合并，保留最左单元格，添加属性 colspan
  3. 删除其他单元格

注意:不能跨表格结构标签合并单元格(thead、tbody、tfoot)

十一、文字控制属性

描述 属性 说明
字体大小 font-size
字体粗细 font-weight
字体倾斜 font-style (normal正常 italic倾斜 注意与em标签分开这里是css)
行高 line-height 1数字+px 数字(当前标签font-size属性值的倍数) 行高的测量方法:从一行文字的最顶端(最底端)量到下一行文字的最顶端(最底端）
字体族 font-family
字体复合属性 font 顺序：是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写)。字号和字体值必须书写，否则 font 属性不生效
文本缩进 text-indent 数字+px 数字 + em(推荐:1em = 当前标签的字号大小)
文本对齐 text-align left 左对齐（默认） center居中对齐 right右对齐。text-align本质是控制内容的对齐方式，属性要设置给内容的父级。
修饰线 text-decoration none无 underline下划线 line-through删除线 overline上划线
颜色 color 开发常用1、rgba表示法 a表示透明度0-1 0表示完全透明，1表示完全不透明。2、十六进制表示法

十二、css中的选择器 也叫复合选择器

  1. 后代选择器：选中某元素的后代元素。

    • 写法：父选择器 子选择器 { CSS 属性}，父子选择器之间用空格隔开。

  2. 子代选择器：选中某元素的子代元素(最近的子级)。

    • 写法：父选择器 > 子选择器 { CSS 属性}，父子选择器之间用 > 隔开。

  3. 并集选择器：选中多组标签设置相同的样式。

    • 写法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , 隔开。

  4. 交集选择器：选中同时满足多个条件的元素。

    • 写法：选择器1选择器2 { CSS 属性}，选择器之间连写，没有任何符号。如果交集选择器中有标签选择器，标签选择器必须书写在最前面。

  5. 伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。

    选择器 作用
    :link 访问前
    :visited 访问后
    :hover 鼠标悬停
    :active 点击时(激活)

    提示:如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写。

  6. 相邻兄弟选择器：选择紧接在另一个特定元素之后的元素，并且两个元素有相同的父元素。

    • 写法：选择器1 + 选择器2 { CSS 属性}，选择器之间用 + 隔开。

  7. 通用兄弟选择器：选择在另一个特定元素之后的所有兄弟元素，不论是否紧邻。

    • 写法：选择器1 ~ 选择器2 { CSS 属性}，选择器之间用 ~- 隔开。

十三、优先级或者叫权重

规则：选择器优先级高的样式生效。

公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important (选中标签的范围越大，优先级越低)

叠加计算规则：

如果是复合选择器，则需要权重叠加计算。

公式:(每一级之间不存在进位)

(行内样式, id选择器个数, 类选择器个数, 标签选择器个数) 规则:

从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较

!important 权重最高

继承权重最低

十四、背景属性

描述 属性 说明
背景色 backgroud-color 背景图默认有平铺(复制)效果。
背景图 background-image
背景图平铺方式 background-repeat no-repeat不平铺 repeat平铺(默认效果) repeat-x水平方向平铺 repeat-y垂直方向平铺
背景图位置 background-position 两种写法1、关键字 left左侧 right右侧 center居中 top顶部 bottom底部2、坐标(数字 + px，正负都可以) 水平:正数向右;负数向左垂直:正数向下;负数向上 。关键字取值方式写法，可以颠倒取值顺序。可以只写一个关键字，另一个方向默认为居中;数字只写一个值表示水平方向，垂直方向为居中
背景图缩放 background-size 三种写法：1关键字cover:等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见 contain:等比例缩放背景图片以完全装入背景区，可能背景区部分空白。2、百分比：根据盒子尺寸计算图片大小。数字 + 单位(例如:px)
背景图固定 background- attachment 属性值:fixed，背景不会随着元素的内容滚动。
背景复合属性 background 背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定。不区分顺序，不像font属性要区分顺序

十五、结构伪类选择器，根据元素的结构关系查找元素。

选择器 说明
E:first-child 查找第一个E元素
E:last-child 查找最后一个元素
E:nth-child(N) 查找第N个元素（第一个元素N值为1）

十六、nth-child(公式)，根据元素的结构关系查找多个元素

功能 公式
偶数标签 2n
奇数标签 2n+1或2n-1
找到5的倍数的标签 5n
找到第5个以后的标签 n+5
找到第5个以前的标签 -n+5

提示:公式中的n取值从 0 开始。

十七、伪元素选择器，创建虚拟元素(伪元素)，用来摆放装饰性的内容。

选择器 说明
E::before 在E元素里面最前面添加一个伪元素
E::after 在E元素里面最后面添加一个伪元素

  • 必须设置 content: ””属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可

  • 伪元素默认是行内显示模式

  • 权重和标签选择器相同

1
2
3
4
5
6
div::before{
	content:"before伪元素";
}
div::after{
  content:"after伪元素";
}

十八、盒子尺寸=内容尺寸 + 内边距尺寸 + border 尺寸

给盒子加 border / padding 会撑大盒子

解决

  1. 手动做减法，减掉 border / padding 的尺寸
  2. 内减模式:box-sizing: border-box。设置盒子宽度后。内容宽度会自动调整以容纳内边距和边框。

十九、版心居中 – 左右 margin 值 为 auto(盒子要有宽度)

二十、overflow，控制溢出元素的内容的显示方式

属性值 效果
hidden 溢出隐藏
scroll 溢出滚动(无论是否溢出，都显示滚动条位置)
auto 溢出滚动(溢出才显示滚动条位置)

二十一、外边距问题-合并现象

垂直排列的兄弟元素，上下 margin 会合并，取两个 margin 中的较大值生效

二十二、外边距问题-塌陷问题

父子级的标签，子级的添加 上外边距 会产生塌陷问题，导致父级一起向下移动

解决：

  • 取消子级margin，父级设置padding
  • 父级设置 overflow: hidden
  • 父级设置 border-top

二十三、行内元素-内外边距问题

行内元素添加 margin 和 padding，无法改变元素垂直位置，给行内元素添加 line-height 可以改变垂直位置

1
2
3
4
5
6
span {
/* margin 和 padding 属性，无法改变垂直位置 */ margin: 50px;
	padding: 20px;
/* 行高可以改变垂直位置 */
  line-height: 100px;
}

二十四、border-radius圆角

左上 右上 右下 左下

  • 正圆：给正方形盒子设置圆角属性值为 宽高的一半 / 50%
  • 胶囊：给长方形盒子设置圆角属性值为 盒子高度的一半

二十五、box-shadow

X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影

X轴偏移量和Y轴偏移量必须书写

默认是外阴影，内阴影需要添加 inset

模糊半径 (blur-radius)：定义阴影的模糊程度。值越大，阴影越模糊，值为 0 时阴影是锐利的。

扩散半径 (spread-radius)：控制阴影的大小。正值会使阴影变大，负值会使阴影变小。

二十六、flex也叫弹性布局

设置方式:给父元素设置 display: flex，子元素可以自动挤压或拉伸

组成部分:

  • 弹性容器
  • 弹性盒子

主轴:默认在水平方向

侧轴 / 交叉轴:默认在垂直方向

描述 属性
创建flex容器 display:flex
主轴对齐方式 justify-content
侧轴对齐方式 align-items
某个弹性盒子侧轴对齐方式 align-self
修改主轴方向 flex-direction
弹性伸缩比 flex
弹性盒子换行 flex-wrap
行对齐方式 align-content

二十七、position: relative相对定位

特点:

  • 不脱标，占用自己原来位置
  • 显示模式特点保持不变
  • 设置边偏移则相对自己原来位置移动

拓展:很少单独使用相对定位，一般是与其他定位方式配合使用

二十八、position: absolute绝对定位

使用场景:子级绝对定位，父级相对定位(子绝父相)

特点:

  • 脱标，不占位
  • 显示模式具备行内块特点
  • 设置边偏移则相对最近的已经定位的祖先元素改变位置
  • 如果祖先元素都未定位，则相对浏览器可视区改变位

二十九、子盒子居中在父盒子中

步骤

  1. 绝对定位
  2. 水平、垂直边偏移为 50%
  3. 子级向左、上移动自身尺寸的一半
  • 左、上的外边距为 –尺寸的一半
  • transform: translate(-50%, -50%)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centered Element</title>
    <style>
        .parent {
            position: relative;
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
        }
        .child{
            position: absolute;
            width: 50px;
            height: 50px;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            background-color: aquamarine;
            text-align: center;
            line-height: 25px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">居中元素</div>
    </div>
</body>
</html>

三十、position: fixed固定定位

元素的位置在网页滚动时不会改变

特点:

  • 脱标，不占位
  • 显示模式具备行内块特点
  • 设置边偏移相对浏览器窗口改变位置

总结

定位模式 属性值 是否脱标 显示模式 参照物
相对定位 relative 否 保持标签原有显示模式 自己原来位置
绝对定位 absolute 是 行内块特点 1、已经定位的祖先元素2、浏览器可视区
固定定位 fixed 是 行内块特点 浏览器窗口

三十一、vertical-align垂直对齐方式

属性值 效果
baseline 基线对齐（默认）
top 顶部对齐
middle 居中对齐
bottom 底部对齐

三十二、transition过渡

作用:可以为一个元素在不同状态之间切换的时候添加过渡效果 属性名:transition(复合属性)

属性值:过渡的属性 花费时间 (s)

提示:

  • 过渡的属性可以是具体的 CSS 属性
  • 也可以为 all(两个状态属性值不同的所有属性，都产生过渡效果)
  • transition 设置给元素本身

三十三、opacity透明度

作用:设置整个元素的透明度(包含背景和内容) 属性名:opacity

属性值:0 – 1

  • 0:完全透明(元素不可见)
  • 1:不透明
  • 0-1之间小数:半透明

三十四、cursor光标类型

属性值 效果
default 默认值
pointer 小手效果，提示用户可以点击
text 工字型，提示用户可以选择文字
move 十字光标，提示用户可以移动

三十五、transform平面转换 也叫2D转换。

作用:为元素添加动态效果，一般与过渡配合使用

概念:改变盒子在平面内的形态(位移、旋转、缩放、倾斜)

平移：transform: translate(X轴移动距离, Y轴移动距离);

取值：（正负均可）

  • 像素单位数值

  • 百分比(参照盒子自身尺寸计算结果)

技巧

  • translate() 只写一个值，表示沿着 X 轴移动
  • 单独设置 X 或 Y 轴移动距离:translateX() 或 translateY()

旋转：transform: rotate(旋转角度);

单位deg，

技巧：

  • 取值 （正负均可）

  • 取值为正，顺时针旋转

  • 取值为负，逆时针旋转

改变转换原点：transform-origin: 水平原点位置 垂直原点位置

默认情况下，转换原点是盒子中心点

取值：

  • 方位名词(left、top、right、bottom、center)
  • 像素单位数值
  • 百分比

多重转换:先平移再旋转：transform：translate() rotate();

缩放：transform: scale(缩放倍数); transform: scale(X轴缩放倍数, Y轴缩放倍数);

技巧:

  • 通常，只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
  • 取值大于1表示放大，取值小于1表示缩小

倾斜:transform: skew();

取值：角度单位deg

三十六、渐变。 是多个颜色逐渐变化的效果，一般用于设置盒子背景

分类：线性渐变，径向渐变

线性渐变：

1
2
3
4
5
6
7
8
9
10
11
background-image: linear-gradient( 

渐变方向, 可以为方向名词，角度

颜色1 终点位置, //注意终点位置写百分比

颜色2 终点位置,

......

);

如：

1
background: linear-gradient(to right, red 40%,  orange, yellow, green, blue, indigo, violet);

重复线性渐变：

1
background: repeating-linear-gradient(to right, red, yellow 10%, green 20%);

径向渐变：

1
2
3
4
5
6
background-image: radial-gradient( 
半径 at 圆心位置,  //
颜色1 终点位置,
颜色2 终点位置,
...... 
);

如：

1
background: radial-gradient(circle at center, red, yellow, green, blue);

重复径向渐变：

1
background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Gradients</title>
    <style>
        body {
            /* 使用线性渐变作为背景 */
            background: linear-gradient(to right, red 40%,  orange, yellow, green, blue, indigo, violet);
            height: 100vh;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            /* 重复线性渐变 */
            /* background: repeating-linear-gradient(to right, red, yellow 10%, green 20%); */

            
        }

        .radial-gradient {
            /* 使用径向渐变 */
            background: radial-gradient(40% 50% at center, red, yellow, green, blue);
            width: 300px;
            height: 300px;
            border-radius: 50%;
            /* 重复径向渐变 */
            /* background: repeating-radial-gradient(circle, red, yellow 10%, green 20%); */
        }
    </style>
</head>
<body>
    <div class="radial-gradient"></div>
</body>
</html>

三十七、transform空间转换 也叫3D转换。

取值(正负均可)

  • 像素单位数值

  • 百分比(参照盒子自身尺寸计算结果)

  • 提示：默认情况下，Z 轴平移没有效果

未完待续。。。

三十八、perspective视距

作用:指定了观察者与 Z=0 平面的距离，为元素添加透视效果

透视效果:近大远小、近实远虚

属性:(添加给父级，取值范围 800-1200)

三十九、animation动画

  • 过渡与动画的区别

过渡：实现两个状态间的变化过程。

动画：实现多个状态间的变化过程，动画过程可控(重复播放、最终画面、是否暂停)

步骤：

  1. 先定义动画

    1
    2
    3
    4
    @keyframes 动画名称 { 
      from {}
    	to {} 
    }
    1
    2
    3
    4
    5
    6
    7
    @keyframes 动画名称 { 
      0% {}
      10% {}
      ......
      100% {}
    }
    注意：百分比 表示的意思是动画时长的百分比

  2. 使用动画

    1
    animation:动画名称 动画花费时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

  • 动画名称和动画时长必须赋值

  • 取值不分先后顺序

  • 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

四十、rem适配方案

  • rem单位，是相对单位

  • rem单位是相对于HTML标签的字号计算结果

  • 1rem = 1HTML字号大小

目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

四十一、媒体查询media

1
2
3
4
5
@media(媒体特性) {
  选择器{
    css属性；
  }
}

如：

1
2
3
4
5
@media (width:320px) {
  html {
    background-color: green;
  }
}

四十二、less

运算:

  • 加、减、乘直接书写计算表达式
  • 除法需要添加 小括号 或 .

注意:表达式存在多个单位以第一个单位为准

less嵌套：可以快速生成后代选择器

less变量：

概念:容器，存储数据 作用:存储数据，方便使用和修改

语法:

  • 定义变量:@变量名: 数据;
  • 使用变量:CSS属性:@变量名;

四十三、vm适配方案

  • 相对单位

  • 相对视口的尺寸计算结果

  • vw:viewport width

    • 1vw = 1/100视口宽度

  • vh:viewport height

    • 1vh = 1/100视口高度

vw 布局

  • 确定设计稿对应的vw尺寸 (1/100视口宽度)
    • 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定 vw 尺寸 (1/100 视口宽度)
  • vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )

vh 布局

  • 确定设计稿对应的vh尺寸 (1/100视口高度)
    • 查看设计稿高度 → 确定参考设备高度 (视口高度) → 确定 vh 尺寸 (1/100 视口高度)
  • vh单位的尺寸 = px 单位数值 / ( 1/100 视口高度 )