HTML+CSS学习笔记（pink老师前端课程笔记--补档）_Tiimmi丶_pink老师前端笔记

网络 02-07 1372

开始于2021年8月3日09点59分

课程学习路线：HTML5-> CSS3->H5C3提高->项目拼优购电商网站

仅更新到H5C3提高的C3提高部分（新增选择器），忙于其他事情，暂不继续更新

文章目录 HTML1. HTML标签2. HTML基本结构标签3. 网页开发工具4. 标签语义5. 特殊字符6. 表格标签7. 列表8. 表单 CSS基础1. 简介2. 选择器3. 字体属性4. 文本属性5. 引入方式6. chorme调试工具 CSS入门1. Emmet语法1.1 快速生成HTML结构语法1.2 快速生成css样式语法 2.复合选择器2.1 复合选择器2.2 后代选择器2.3 子选择器2.4 并集选择器2.5 伪类选择器2.6 链接伪类选择器2.7 :focus伪类选择器2.8 复合选择器总结 3. 元素显示模式3.1 什么是元素显示模式3.2 块元素3.3 行内元素3.4 行内块元素3.5 元素显示模式总结3.6 元素显示模式转换 4. 背景4.1 背景颜色4.2 背景图片4.3 背景平铺4.4 背景图片位置4.5 背景固定4.6 背景复合写法4.7 背景颜色半透明4.8 背景总结 CSS三大特性1. 层叠性2. 继承性3. 优先级盒子模型1. 盒子模型1.1 网页布局本质1.2 盒子模型组成1.3 边框 border1.4 表格的细线边框1.5 边框影响盒子的实际大小1.6 内边距 padding1.7 padding会影响盒子实际大小1.8 外边距 margin1.8.1 外边距的典型应用：1.8.2 外边距合并 1.9 清除内外边距 2. PS基本操作3. 综合案例4. 圆角边框5. 盒子阴影6. 文字阴影 CSS浮动1. 浮动 float1.1传统网页的三种布局1.2 标准流1.3 为什么需要浮动1.4 什么是浮动1.5 浮动特性（重难点）1.6 浮动元素经常和标准流父级搭配使用 2. 常见网页布局2.1 常见网页布局2.2 浮动布局注意点 3. 清除浮动3.1 为什么需要清除浮动3.2 清除浮动本质3.3 清除浮动的方法3.3.1 额外标签法3.3.2 父级添加overflow属性3.3.3 :after 伪元素法3.3.4 双伪元素清除浮动 3.4 清除浮动总结 4. PS切图4.1 常见的图片格式4.2 图层切图4.3 切片切图4.4 PS插件切图 5. 学成在线案例5.1 准备素材和工具5.2 案例准备工作5.3 CSS属性书写顺序(重要)5.4 页面布局整体思路5.5 确定版心5.6 头部制作 CSS定位1. 定位1.1 为什么需要定位1.2 定位组成1.2.1 定位模式1.2.2 边偏移 1.3 静态定位 static（了解）1.4 相对定位 relative （重要）1.5 绝对定位 absolute （重要）1.6 子绝父相的由来1.7 固定定位 fixed （重要）1.8 粘性定位 sticky （了解）1.9 定位总结1.10 定位叠放次序 z-index1.11 定位的拓展 2. 案例——淘宝焦点轮播图3. 网页布局总结4. 元素的显示和隐藏4.1 display属性4.2 visibility 可见性4.3 overflow 溢出 CSS高级技巧1. 精灵图1.1 为什么需要精灵图1.2 精灵图（sprites）的使用 2. 字体图标2.1 字体图标的产生2.2 字体图标的优点2.3 字体图标的下载2.4 字体图标的引入2.5 字体图标的追加 3. CSS三角4. CSS用户界面样式4.1 什么是界面样式4.2 鼠标样式 cursor4.3 轮廓线 outline4.4 防止表单拖拽 5. 垂直居中 vertical-align5.1 属性应用5.2 解决图片底部默认留白 6. 溢出文字显示为省略号6.1 单行文本溢出6.2 多行文本溢出 7. 常见布局技巧7.1 margin负值的运用7.2 文字围绕浮动元素7.3 行内块的巧妙运用7.4 CSS制作直角三角形 8. CSS初始化 HTML5和CSS3提高1. HTML5的新特性1.1 HTML5新增的语义标签1.2 多媒体标签1.2.1 视频\1.2.2 音频\1.2.3 多媒体标签总结 1.3 新增input表单1.4 新增表单属性 2. CSS3的新特性2.1 CSS3的现状2.2 新增选择器2.3 属性选择器2.4 结构伪类选择器1.2.3 多媒体标签总结 1.3 新增input表单1.4 新增表单属性 2. CSS3的新特性2.1 CSS3的现状2.2 新增选择器2.3 属性选择器2.4 结构伪类选择器

HTML

HTML简介

网页

什么是网页什么是HTML网页的形成

常用浏览器及内核

Web标准

为什么需要Web标准Web标准构成结构（Structure）、表现（presentation）、行为（behavior） 1. HTML标签 1.1 语法规范1.2 标签关系包含关系、并列关系 2. HTML基本结构标签 2.1 第一个HTML <html></html> <head></head> <body></body> <title></title> 3. 网页开发工具 3.1 VSCode3.2 网页声明标签 <!DOCTYPE>3.3 lang语言种类<html lang = 'en'> or <html lang = 'zh-CN'>3.4 charset 字符集常用的 GB2312 BIG5 GBK UTF-8 4. 标签语义

4.1 标题<h1> - <h6>

4.2 段落<p></p>

文本在一个段落中会根据浏览器大小自动换行段落与段落之间会保有比较大的空隙

4.3 换行<br />

4.4 文本格式化标签

语义标签说明加粗<strong></strong>或者<b></b>更推荐<strong>标签加粗语义更强烈斜体<em></em>或者<i></i>更推荐<em>标签加粗语义更强烈下划线<ins></ins>或者<u></u>更推荐<ins>标签加粗语义更强烈删除线<del></del>或者<s></s>更推荐<del>标签加粗语义更强烈

4.5 <div>和<span> 没有语义，只是一个盒子

<div>今日头条</div> <span>今日价格</span> div是division的缩写，表示分割、分区。span意为跨度、跨距。

特点：

<div>标签用来布局，一行只能放一对。大盒子 <span>标签用来布局，一行可以放多个。小盒子

4.6 图形标签和路径

4.6.1 图片标签<img src = ‘图片url’/>

属性属性值说明src图片路径必须属性alt文本替换文本。图片不能显示时，显示该文本title文本提示文本。鼠标放在图片上时，显示该文本width像素设置图片的宽度height像素设置图片的高度border像素设置图片的边框粗细

属性间部分先后顺序，采用空格分开，采取键值对的格式。

4.6.2 路径

4.6.2.1 相对路径

以文件所在的位置参考基础，而建出的目录路径

相对路径分类符号说明同一级路径图片文件位于HTML文件同一级如<img src='img.jpg'>下一级路径/图片文件位于HTML文件下一级如<img src='images/img.jpg'>上一级路径…/图片文件位于HTML文件上一级如<img src='../img.jpg'>

4.6.2.2 绝对路径

指目录下的绝对路径，通常以盘符开始。或者完整的网络地址。

4.7 链接标签<a></a>

4.7.1语法规范<a herf="https://·/zh/cutterman">http://·/zh/cutterman

注意: Cutterman插件要求PS是完整版. 即可以使用扩展功能的版本.

5. 学成在线案例 5.1 准备素材和工具学成在线PSD源文件。开发工具：PS(切图)/cutterman插件+vscode (代码） + chrome(测试)。 5.2 案例准备工作

我们本次采取结构与样式相分离思想∶

创建study目录文件夹(用于存放我们这个页面的相关内容)。用vscode打开这个目录文件夹.study目录内新建images文件夹，用于保存图片。新建首页文件index.html (以后我们的网站首页统一规定为index.html).新建style.css样式文件。我们本次采用外链样式表。将样式引入到我们的HTML页面文件中。样式表写入清除内外边距的样式，来检测样式表是否引入成功。 5.3 CSS属性书写顺序(重要)

建议遵循以下顺序∶

布局定位属性:display / position / float / clear / visibility / overflow(建议display第一个写，毕竟关系到模式)自身属性: width / height / margin / padding / border / background文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word其他属性(CSS3 ) : content / cursor / border-radius / box-shadow / text-shadow / backgroundlinear-gradient .

示例:

.jdc { diaplay: block; position: relative; float: left; /*布局定位*/ width: 100px; height: 100px; margin: 0 10px; padding: 20px 0; /*自身属性*/ font-family: Arial,'Helvetica Neue',Helvetica,sans-serif; color: #333; /*文本属性*/ background: rgba(0,0,0,0.5); border-radius: 10px; /*其他rgba属于CCS3新增的内容*/ } 5.4 页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的整体思路:

必须确定页面的版心（可视区），我们测量可得知分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则.一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置.页面布局第二准则制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要.所以,先理清楚布局结构,再写代码尤为重要.这需要我们多写多积累 5.5 确定版心

这个案例的版心为1200px, 定义一个公共版心类:

.w { width: 1200px; margin: auto; } 5.6 头部制作 1号是版心盒子header 1200*42 的盒子水平居中对齐,上下给一个margin版心盒子里面包括2号盒子logo版心盒子里面包括3号盒子nav导航栏版心盒子里面包括4号盒子search搜索栏版心盒子里面包括5号盒子user个信息注意: 要求里面4个盒子必须都是浮动

导航栏注意点：

实际开发中，我们不会之间用链接a而是用li包含链接的做法(li+a)

li+a 语义更清晰, 一看这就是有条理的列表型内容如果直接用a, 搜索引擎容易辨别为有堆砌关键字嫌疑,从而影响网站排名

注意:

让导航栏一行显示,给li加浮动,因为li是块级元素,需要一行显示.这个nav导航栏可以不给宽度,将来可以继续添加其余文字.因为导航栏里面文字不一样多所以最好给链接a左右padding撑开盒子,而不是指定宽度 CSS定位

目标：

能够说出为什么要用定位

能够说出定位的4种分类

能够说出4种定位各自的特点

能够说出为什么常用子绝父相布局

能够写出淘宝轮播图布局

能够说出显示隐藏的2种方式以及区别

1. 定位 1.1 为什么需要定位

提问:以下情况使用标准流或者浮动能实现吗? 1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子. 2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的。

所以：

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。 1.2 定位组成

定位：将盒子定在某一个位置，所以定位也是再摆盒子，按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式。边偏移决定了该元素的最终位置。

1.2.1 定位模式

通过CSS的position属性来设置，有四个值：

值语义static静态定位relative相对定位absolute绝对定位fixed固定定位

1.2.2 边偏移

通过四个属性来设置：

边偏移属性示例描述toptop: 80px顶端偏移量，定义元素相对于其父元素上边线的距离bottombottom: 80px底部偏移量，定义元素相对于其父元素下边线的距离leftleft: 80px左侧偏移量，定义元素相对于其父元素左边线的距离rightright: 80px右侧偏移量，定义元素相对于其父元素右边线的距离

1.3 静态定位 static（了解）

静态定位是元素的默认定位方式，无定位的意思

选择器 { position: static; } 静态定位按照标准流特性摆放位置，它没有边偏移静态定位在布局时很少用到 1.4 相对定位 relative （重要）

相对定位是元素在移动位置的时候，是相对于自身原来的位置来的

选择器 { position: relative; }

相对定位的特点：（务必记住）

它是相对于自己原来的位置来移动的原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，原来的位置保留）

因此，相对定位并没有脱标，最典型的应用是限制绝对定位的

1.5 绝对定位 absolute （重要）

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

选择器 { position: absolute; }

绝对定位的特点：（务必记住）

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准来定位如果祖先元素有定位(相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。绝对定位不再占有原先的位置（脱标） 1.6 子绝父相的由来

这句话的意思是：“子级是绝对定位的话，父级就要用相对定位”

子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子父盒子需要加定位限制子盒子在父盒子内显示父盒子布局时，需要占有位置，因此父元素只能是相对定位

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会用到

1.7 固定定位 fixed （重要）

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素位置不会改变。

选择器 { position: fixed; }

固定定位的特点：（务必记住）

以浏览器的可视窗口为参照点移动

跟父元素没有任何关系

不随滚动条滚动

固定定位不再占有原先的位置

固定定位也是脱标的，可以看作是一个特殊的绝对定位

小技巧：固定在版心右侧位置

让固定定位的盒子left: 50%、走到浏览器可视区（也可以看做版心)的一半位置。让固定定位的盒子**margin-left:**版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。 1.8 粘性定位 sticky （了解）

粘性定位可以被认为是相对定位和固定定位的混合

选择器 { position: sticky; top: 10px; }

粘性定位的特点：

以浏览器的可视窗口为参照点（固定定位特点）粘性定位占有原先位置（相对定位特点）必须添加top、left、right、bottom其中一个才有效

跟页面滚动搭配使用。兼容性较差，IE不支持

1.9 定位总结定位模式是否脱标移动位置使用频率static 静态定位否不能使用边偏移很少relative 相对定位否（占有位置）相对于自身常用absolute 绝对定位是（不占有位置）相对于带有定位的父级常用fixed 固定定位是（不占有位置）浏览器可视区常用sticky 粘性定位否（占有位置）浏览器可视区目前很少

1.10 定位叠放次序 z-index 选择器 { z-index: 1; } 数值可以是正整数，负整数或者0，默认是auto，数值越大，盒子越靠上如果属性值相同，则按照书写顺序，后来居上数字后面不可以加单位只有定位的盒子才有z-index属性 1.11 定位的拓展

绝对定位的盒子水平居中、垂直居中

加了绝对定位的盒子不能通过margin: 0 auto;水平居中，但是可以通过下面方法计算实现水平和垂直居中

left: 50%：让盒子左侧移动到父级元素的水平中心位置；margin-left: -100px;让盒子向左移动自身宽度的一半（假设盒子宽是200px）

定位特殊特性

绝对定位和固定定位也和浮动类似

行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度块级元素添加绝对定位或者固定定位，如果不设置宽度或高度，默认大小就是内容的大小

脱标的盒子不会触发外边距塌陷

用浮动元素、绝对定位、固定定位元素的都不会触发外边距合并的问题

绝对定位、固定定位会完成压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住盒子里的内容

但是绝对定位（固定定位）会压住下面标准流所有的内容

浮动之所以特殊，是因为浮动最初目的就是做文字环绕效果的。

2. 案例——淘宝焦点轮播图 3. 网页布局总结通过盒子模型，清楚知道大部分html标签是一个盒子。通过CSS浮动、定位可以让每个盒子排列成为网页。

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

标准流可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。浮动可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。定位定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。 4. 元素的显示和隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新显示

本质：让一个元素在页面中因此或者显示出来

display 显示隐藏visibility 显示隐藏overflow 溢出显示隐藏 4.1 display属性

display属性用于设置一个元素如何显示

display: none; 隐藏对象；display: block; 除了转换为块级元素外，同时还有显示元素的意思

display隐藏元素后，不在占有原来的位置

应用及其广泛，搭配JS可以做很多网页特效。

4.2 visibility 可见性

visibility属性用于指定一个元素可见还是隐藏

visibility: visible; 元素可见；visibility: hidden; 元素隐藏

visibility隐藏元素后，继续占有原来的位置

如果隐藏元素想要原来位置，就用visibility: hidden;

如果隐藏元素不想要原来位置，就用display: none; （用处更多，重点）

4.3 overflow 溢出

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

属性值描述visible不剪切内容也不添加滚动条hidden不显示超过对象尺寸的内容，超出的部分隐藏掉scroll不管超出内容否，总是显示滚动条auto超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。但是如果有定位的盒子，请慎用overflow:hidden; 因为它会隐藏多余的部分。 CSS高级技巧

目标：

能够使用精灵图能够使用字体图标能够写出CSS三角能够写出常见的CSS用户界面样式能够说出常见的布局技巧 1. 精灵图 1.1 为什么需要精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称css Sprites、CSS雪碧)。

核心技术：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

1.2 精灵图（sprites）的使用

使用精灵图核心：

精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。这个大图片也称为sprites精灵图或者雪碧图移动背景图片位置，此时可以使用background-position.移动的距离就是这个目标图片的×和y坐标。注意网页中的坐标有所不同因为一般情况下都是往上往左移动，所以数值是负值。使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

使用精灵图核心总结：

精灵图主要针对于小的背景图片使用主要借助于背景图片位置来实现一般情况下精灵图都是负值（网页的坐标：x轴右边走是正值，y轴下边走是正值） 2. 字体图标 2.1 字体图标的产生

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标

精灵图是有很多优点，但是缺点很明显：

图片文件还是比较大的。图片本身放大缩小会失真一旦图片制作完成想要更换非常复杂

此时，字体图标iiconfont很好解决了以上的问题。

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

2.2 字体图标的优点轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等兼容性：几乎支持所有的浏览器，请放心使用

注意:字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

总结：

如果遇到一些结构和样式比较简单的小图标，就用字体图标。如果遇到一些结构和样式复杂一点的小图片，就用精灵图。 2.3 字体图标的下载

推荐下载网站：

iconmoon字库：https://iconmoon.io

icoMoon成立于2011年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

阿里 iconfont 字库 https://·

这个是阿里妈妈M2UX的一个iconfont字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用Al制作图标上传生成。重点是，免费!

2.4 字体图标的引入

下载完成后，注意压缩文件不要删，后面会用

把压缩包解压，里面的fonts文件夹放入项目的根目录下；

不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

在CSS样式中全局声明字体︰简单理解把这些字体文件通过css引入到我们页面中。

一定注意字体文件路径的问题。

@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?drjfm0'); src: url('fonts/icomoon.eot?drjfm0#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?drjfm0') format('truetype'), url('fonts/icomoon.woff?drjfm0') format('woff'), url('fonts/icomoon.svg?drjfm0#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; }

这段代码可以在压缩包里的style.css文件里找到！！！

直接link这个css文件

html标签内添加小图标

在压缩包里打开demo.html文件，找到需要的图标复制字体图标到标签内给使用了字体图标的标签声明字体样式：font-family: ‘iconmoon’; 2.5 字体图标的追加

把压缩包里面的selection.json 重新上传到网站，然后选中自己想要的新图标，重新下载替换源文件即可

3. CSS三角

网页常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标

div { width: 0; height: 0; line-height: 0; font-size: 0; border: 10px solid transparent; border-left-color: pink; } 4. CSS用户界面样式 4.1 什么是界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提升用户的体验

鼠标样式表单轮廓防止表单域拖拽 4.2 鼠标样式 cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

选择器 { cursor: pointer; } 属性值说明default默认的鼠标样式pointer小手（链接时）move移动（查看大图时）text文本（打字时）not-allowed禁止

4.3 轮廓线 outline

给表单添加 outline: 0 或者outline: none;之后，就可以去掉表单默认的蓝色边框

input { outline: none; } 4.4 防止表单拖拽

实际开发中，文本域右下角是不允许拖拽的，可以通过 resize属性取消

textarea { resize: none; } 5. 垂直居中 vertical-align 5.1 属性应用

使用场景：设置图片或者表单（行内块元素）和文字垂直居中对齐

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效

vertical-align: baseline | top | middle | bottom; 属性值说明baseline默认。与父元素的基线对齐top把元素的顶端与行中最高元素的顶端对齐middle把此元素放置在父元素的中部bottom把元素的顶端与行中最低元素的底端对齐

图片、表单都属于行内块元素、默认的 vertical-align是基线对齐的

设置为 vertical-align: middle;可以让文字与图片垂直居中对齐。

5.2 解决图片底部默认留白

图片底侧会有一个空白空隙，原因是行内块元素默认是和文字基线对齐

主要的解决方法有两种：

给图片添加 vertical-align: middle | top | bottom;都行，只要不是基线对齐就行（推荐）把图片转换为块级元素 display: block; 6. 溢出文字显示为省略号 6.1 单行文本溢出

必须满足下面三个条件：

文本强制单行显示；溢出隐藏省略号代替溢出部分 1. 强制单行显示 white-space: nowarp; 2. 溢出隐藏 overflow: hidden; 3. 省略号代替溢出部分 text-overflow: ellipsis; 6.2 多行文本溢出

多行文本溢出显示省略号，有较大兼容性问题，适用于webkit浏览器或移动端（移动端大部分是webkit内核）

overflow: hidden; text-overflow: ellipsis; 弹性伸缩盒子模型显示 display: -webkit-box; 限制在一个块元素显示的文本的行数 -webkit-line-clamp: 2; 设置或检索伸缩盒子对象的子元素的排列方式 -webkit-box-orient: vertical; 更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单 7. 常见布局技巧 margin负值的运用文字围绕浮动元素行内块的巧妙运用 7.1 margin负值的运用让每个盒子 margin-left: -1px;正好压着相邻盒子边框鼠标经过某个盒子的时候，提高当前盒子的层级即可如果没有定位，则加相对定位（保留当前位置）如果都有定位，则设置 z-index提高层级 7.2 文字围绕浮动元素

文字标准流，会环绕浮动的元素

7.3 行内块的巧妙运用

行内块元素之间默认会有间距，制作页码很方便，给父元素添加 text-align: center;后会很便捷的水平居中，十分方便

7.4 CSS制作直角三角形

在原先CSS三角的基础上：（以直角在右边的直角三角形为例）

把底部、左侧边框的宽度设为0，颜色设为透明；把顶部边框的宽度调大，把等边直角三角形拉高，颜色设置为透明； border-width: 150px 100px 0 0; border-style: solid; border-color: transparent #ccc transparent transparent; 8. CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾刘览器的兼容，我们需要对CSS初始化

简单理解:CSS初始化是指重设浏览器的样式。(也称为CSS reset )

每个网页都必须首先进行CSS初始化。

这里我们以京东css初始化代码为例。

Unicode编码字体∶

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

比如:

黑体 \9ED1\4F53

宋体 \5B8B\4F53

微软雅黑 \5FAE\8F6F\96C5\9ED1

HTML5和CSS3提高能够说出3~5个HTML5新增布局和表单标签能够说出CSS3的新增特性有哪些 1. HTML5的新特性

HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

声明︰

新特性增加了很多，但是我们专注于开发常用的新特性。基础班我们讲解部分新特性，到了就业班还会继续讲解其他新特性。 1.1 HTML5新增的语义标签 <header> 头部标签<nav> 导航标签<article> 内容标签<section> 定义文档某个区域<aside> 侧边栏标签<footer> 底部标签

注意：

这些语义化标准主要是针对搜索引擎的这些新标签页面中可以使用多次在IE9中，需要把这些元素转化为块级元素移动端不存在兼容性，更喜欢使用这些标签HTML5新增了很多标签，需要慢慢学习 1.2 多媒体标签

新增的多媒体标签主要包含两个：

音频：<audio>视频：<video>

使用他们可以很方便的在页面中嵌入音频和视频，而不再去使用flash或其他浏览器插件

1.2.1 视频<video>

HTML5在不使用插件的情况下，也可以原生地支持视频格式播放，但是支持的格式有限

浏览器MP4WebMoggInternet Explorer支持不支持不支持Chorme支持支持支持Firefox支持（从Firefox21 版本开始、Linux系统从Firefox30 开始）支持支持Safari支持不支持不支持Opera支持支持支持

兼容性写法：

<video width="300"> <source src="media.mp4" type="video/mp4"> <source src="media.ogg" type="video/ogg"> 您的浏览器暂不支持video标签播放视频 </video>

常见的属性：

属性值说明autoplayautoplay视频自动播放（chorme需要添加muted属性才可以自动播放）controlscontrols向用户展示视频控件width像素设置播放器宽度height像素设置播放器高度looploop是否循环播放视频preloadauto(预先加载视频)；none(不预加载视频)规定是否预加载视频（若设置了autoplay属性则会忽略）src视频路径视频urlposter图片路径加载等待时显示的图片mutedmuted静音播放

1.2.2 音频<audio> <audio src="url" controls="controls"></audio>

source写法：

<audio controls="controls"> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> 您的浏览器暂不支持audio标签。 </audio>

常见属性：

属性值说明autoplayautoplay音频就绪后自动播放controlscontrols向用户展示音频控件looploop音频循环播放srcurl要播放音频的url

chorme禁止了音频的自动播放 1.2.3 多媒体标签总结音频标签和视频标签使用方式基本一致浏览器支持情况不同chorme禁止了音频和视频的自动播放属性视频标签是重点，我们经常设置自动播放，取消控件，循环和设置大小属性 1.3 新增input表单属性值说明type=“email”限制用户输入的必须为邮箱type=“url”限制用户输入的必须为URLtype=“date”限制用户输入的必须为日期type=“time”限制用户输入的必须为时间type=“month”限制用户输入的必须为月份type=“week”限制用户输入的必须为周type=“number”限制用户输入的必须为数字type=“tel”限制用户输入的必须为手机号码type=“search”搜索框type=“color”生成一个颜色选择表单

重点记住 number、tel、search 1.4 新增表单属性属性值说明requiredrequired表示内容不能为空，必填项placeholder提示文本提示信息autofocusautofocus自动聚焦，页面加载完成自动聚焦光标autocompleteoff/on当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete=“on”，关闭autocomplete =”"off"需要放在表单内，同时加上name属性，同时成功提交multiplemultiple可以多选文件提交

可以通过以下设置方式修改placeholder里面的字体颜色∶

input::placeholder { color: pink; } 2. CSS3的新特性 2.1 CSS3的现状新增的CSS3特性有兼容性问题，ie9+才支持移动端支持优于PC端不断改进中应用相对广泛现阶段主要学习∶新增选择器和盒子模型以及其他特性 2.2 新增选择器属性选择器结构伪类选择器伪元素选择器 2.3 属性选择器

属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。

选择符简介E[att]选择具有att属性的E元素E[att=“val”]选择具有att属性且属性值等于val的E元素E[att^=“val”]匹配具有att属性且值以val开头的E元紊E[att$=val]匹配具有att属性且值以val结尾的E元素E[att*=“val”]匹配具有att属性且值中含有val的E元素

类选择器、属性选择器、伪类选择器权重都是10 2.4 结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

选择符说明E:first-child匹配父元素中的第一个子元素EE:last-child匹配父元素中最后一个E元素E:nth-child(n)匹配父元素中的第n个子元素EE:first-of-type指定类型E的第一个E:last-of-type指定类型E的最后一个E:nth-of-type(n)指定类型E的第n个

属性：

属性值说明autoplayautoplay音频就绪后自动播放controlscontrols向用户展示音频控件looploop音频循环播放srcurl要播放音频的url

可以通过以下设置方式修改placeholder里面的字体颜色∶

属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。

类选择器、属性选择器、伪类选择器权重都是10 2.4 结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

范围越小，权重越大 ??

添加在某一属性的后边 ??