2025寒假第三周笔记 - HTML5和CSS3部分新特性

阴影

盒子阴影

• 属性：box-shadow

• value：

1. h-shadow：水平阴影的位置
2. v-shadow：竖直阴影的位置
3. blur：模糊距离（虚实）
4. spread：阴影的尺寸
5. color：阴影颜色
6. inset：将外部阴影改为内部阴影

• 注意事项：阴影不占据实际空间，不会影响其他盒子的排列

文字阴影

• 属性：text-shadow

• value：

1. h-shadow：水平阴影的位置
2. v-shadow：竖直阴影的位置
3. blur：模糊距离（虚实）
4. color：阴影颜色

CSS Tips

CSS属性书写顺序

1. 布局定位属性
2. 自身属性
3. 文本属性
4. 其他属性（CSS3）

设置图片与父元素大小相同

width: 100%;
height: 100%;

精灵图

目的: 为了有效地减少服务器接受和发送请求的次数, 提高页面加载的次数, 主要针对小的背景图片的

实现: 利用background-position属性

字体图标

本质是字体

应用场景: 主要用于显示网页中通用、常用的一些小图标。

优点:

1. 轻量级: 一个字体图标比一系列图片要小, 一旦字体加载了, 图片就会马上渲染出来, 减少了服务器请求

2. 灵活性: 本质其实是文字, 可以很随意的改变颜色、产生阴影、透明效果、旋转等

3. 兼容性: 几乎支持所有浏览器

CSS三角形

.box{
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 100px solid pink;
}

.box{
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-left-color: pink;
}

CSS用户界面样式

• 鼠标样式

  1. default: 默认
  2. pointer: 小手
  3. move: 十字架
  4. text: 杠
  5. not-allowed: 禁止

• 表单

  1. 轮廓线: outline: none;
  2. 防止拖拽文本域: resize: none;

• 贯穿线: text-decoration: line-through;

垂直居中

• 使用vertical-align属性, 只针对于行盒或行块盒有效

• 一般使用middle值来垂直居中对齐

解决图片底边空白问题

1. 使用vertical-align属性
2. 把图片转换为块盒
3. font-size: 0;

单行溢出文本省略号显示

1. 先强制一行内显示文本: white-space: nowrap;(默认normal自动换行)
2. 超出部分隐藏: overflow: hidden;
3. 省略号代替: text-overflow: ellipsis;

多行溢出文本省略号显示

1. overflow: hidden;
2. text-overflow: ellipsis;
3. display: -webkit-box;
4. -webkit-line-clamp: 2;
5. -webkit-box-orient: vertical;

布局技巧

margin负值的运用

• 应用场景: 边框叠加加粗问题

• 解决方法: 设置margin为负值(值为边框的宽度)可叠加边框

• 若要有hover效果, 则

1. 如果盒子没有定位, 则添加相对定位
2. 若有定位, 则添加z-index属性

文字环绕

使图片浮动, 文字为标准流

CSS三角进阶

制作不同形状的三角形

eg:

.box{
        width: 0;
        height: 0;
        border-top: 100px solid transparent;
        border-right: 50px solid color;
        border-bottom: 0 solid color;
        border-left: 0 solid color;
    }   

定位补充

粘性定位

定义: 可以被认为是相对定位和固定定位的混合

特点:

1. 以浏览器的可视窗口为参照点移动元素
2. 粘性定位占有原先的位置
3. 必须添加top\left\right\bottom其中一个才有效

元素的显示与隐藏

• display

  display: none; 隐藏(不再占据原来的位置)

  display: block; 显示

• visibility

  inherit: 继承上一个父元素的可见性

  visible: 对象可视

  hidden: 对象隐藏(继续占据原来的位置)

  collapse: 主要用来隐藏表格的行或列

• overflow

  visible: 默认值(显示)

  auto: 此为body和textarea的默认值(根据条件添加滚动条)

  hidden: 不显示超出内容(定位时慎用)

  scroll: 滚动条

HTML5新特性

新增语义化标签

• < header >: 头部标签
• < nav >: 导航标签
• < article >: 内容标签
• < section >: 定义文档的某个区域
• < aside >: 侧边栏标签
• < footer >: 尾部标签

这种语义化主要针对于搜索引擎

新增视音频标签

• 视频: < video >

支持三种视频格式: .MP4 .WebM .ogg

尽量使用MP4

常见属性:

1. autoplay = “autoplay”, 自动播放
2. muted = “muted”, Chrome/静音播放
3. controls = “controls”, 播放控件
4. loop = “loop”, 循环播放
5. preload = “auto”/“none”, 预先加载视频/不应加载视频, (如果有了autopaly属性, 就忽略该属性)
6. poster = “imgurl(图片地址)”, 加载等待的画面图片

• 音频: < audio >

支持三种音频格式: .mp3 .wav .ogg

常见属性:

1. autoplay = “autoplay”, 自动播放
2. controls = “controls”, 播放控件
3. loop = “loop”, 循环播放

新增input表单

type =

1. “email”
2. “url”
3. “date”
4. “time”
5. “month”
6. “week”
7. “number”
8. “tel”(电话)
9. “search”
10. “color”(颜色选择表)

新增表单属性

1. required = “required”, 表示内容不能为空
2. palceholder, 提示文本
3. autofocus = “autofocus”, 打开页面时自动聚焦
4. autocomplete = “off/on”, 显示搜索过得内容, 必须有name属性
5. multiple = “mutiple”, 提交多个文件

CSS3新特性

CSS3新增选择器

• 属性选择器(权重为10)

eg:

1. input[value/type = "text"] {
    --------;
    --------;
}

2. ---[class^=icon] {
    --------;
    --------;
}(具有class属性且值以icon开头)

3. ---[class&=icon] {
    --------;
    --------;
}(具有class属性且值以icon结尾)

4. ---[class*=icon] {
    --------;
    --------;
}(具有class属性且值中有icon)

• 结构伪类选择器

1. E: first-child: 匹配父元素中的第一个子元素E
2. E: last-child: 匹配父元素中最后一个子元素E
3. E: nth-child(n/even/odd/3n): 匹配父元素中的第n/even/odd/3n个子元素E
4. E: first-of-type: 指定类型E的第一个
5. E: last-of-type: 指定类型E的最后一个
6. E: nth-of-type(n): 指定类型E的第n个

区别

1. nth-child对父元素里所有孩子排序选择, 先找到第n个孩子, 再和E匹配
2. nth-of-type对父元素里指定子元素进行排序, 先匹配E, 再根据E找到第n个孩子

• 伪元素选择器(权重为1)

利用css创建html标签, 从而简化html结构

1. ::before

2. ::after

注意:

1. 必须有content属性
2. 创建后为行盒
3. 新创建的元素在文档树中找不到

CSS3图片模糊处理

使用filter属性

filter: 函数();

eg: filter: blur(5px); blur模糊处理, 数值越大越模糊

CSS3 clac函数

clac()此CSS函数让你在声明CSS属性值时执行一些计算(+ - * /)

eg:

width: clac(100% - 30px);

表示子盒子永远比父盒子小30px

CSS3过渡(动画)

语法: transition: 要过渡的属性 花费时间(单位是s, 必写) 运动曲线(默认是ease, 可以省略) 何时开始(默认是0s, 必写单位, 可以省略);

eg:

div {
    width: 200px;
    height: 100px;
    background-color: red;
    transition: width .5s ease 0s, height .5s ease 0s; 或transition: all .5s ease 0s;
}   

div:hover {
    width: 400px;
    height 200px;
}