1.HTML+CSS+移动web
2022-07-25 10:33:11 0 举报AI智能生成
登录查看完整内容
前端知识总结，全面
作者其他创作
大纲/内容
网页的组成：网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成
标签关系可分为包含关系和并列关系
标题标签<h1>--<h6>
段落标签<p></p>
换行标签br，是个单标签
strong加粗
em倾斜
del删除线
ins下划线
文本格式化标签
alt属性：图像不能显示的时候，的替换文本
title属性：鼠标放上去会提示该文字
图片标签img
href属性：用于指定目标的url地址，如果链接地址中是个文件或者压缩包就会下载
target属性：用于指定链接页面的打开方式_sefl默认值，_blank在新窗口打开
锚点链接：在href中设置属性为对应地方的标签Id类名
a链接
  空格
< <
等等，需要的时候网上查找
各种实体符号
标签
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径
绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
路径
语法：<table> //用于定义表格 <tr> //标签用于定义表格中的行，必须嵌套在 <table> </table>标签中 《th》《th》 表头 <td>单元格内的文字</td> 于定义表格中的单元格，必须嵌套在<tr></tr>标签中 ... </tr> ... </table>
在表格标签中，分别用：<thead>标签 表格的头部区域、<tbody>标签 表格的主体区域.
跨行合并 ：rowspan=\"合并单元格的个数\
**跨列合并**：colspan=\"合并单元格的个数\
合并单元格
表格：一般用来显示数据
各个列表项之间没有顺序级别之分，是并列的
无序列表：<ul><li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>
各个列表项之间有一定顺序排列
有序列表：<ol><li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol>
dt字体大于dd，其他关系并列
自定义列表<dl><dt>列表项1</dt> <dd>列表项2</dd> </dl>
列表：主要用来布局
一个完整的表单通常有表单域、表单控件、和提示信息3个部分构成
<form action=“url地址” method=“提交方式（取值为get或者post）” name=“表单域名称用于区分页面内的多个表单域\">各种表单元素控件</form>
表单域：是包含表单元素的区域<form> 标签用于定义表单域，以实现用户信息的收集和传递。 会把它范围内的表单元素信息提交给服务器.
type属性：值不同，表现形式不同
name属性：定义表单元素名称
value属性：规定input元素的值
checked：规定此元素首次加载时应当被选中
maxlength：规定输入字段的字符最大长度
input表单
<label> 标签
语法：<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select>
<select>下拉框
语法： <textarea rows=\"3\" cols=\"20\"> 文本内容 </textarea>
<textarea>文本域当用户输入内容较多的情况下使用
表单控件或者说是表单元素
表单：使用表单的目的是为了收集用户信息
HTML知识点
语义化标签
视频标签
音频标签
多媒体标签
新增表单元素属性
新增表单元素
HTML5新特性
HTML超文本标记语言
行内样式
内部样式（嵌入式）
引入外部样式<link rel=\"stylesheet\" href=\"css文件路径\">
CSS引入方式
常见块元素<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
- 比较霸道，自己独占一行。- 高度，宽度、外边距以及内边距都可以控制。- 宽度默认是容器（父级宽度）的100%。- 是一个容器及盒子，里面可以放行内或者块级元素。
文字类的元素不能放块级元素
块元素
常见行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
- 相邻行内元素在一行上，一行可以显示多个。- 高、宽直接设置是无效的。(能设置左右内外边距，上下不能设置)- 默认宽度就是它本身内容的宽度。- 行内元素只能容纳文本或其他行内元素。
行内元素（有的也叫内联元素）
同时具有块元素和行内元素的特点。有些资料称它们为行内块元素
<img />、<input />、<td>
- 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。- 一行可以显示多个（行内元素特点）。- 默认宽度就是它本身内容的宽度（行内元素特点）。- 高度，行高、外边距以及内边距都可以控制（块级元素特点）。
行内块元素
页码在页面中间显示:1. 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center;2. 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中
行内块元素的巧妙运用
- 转换为块元素：display:block;- 转换为行内元素：display:inline;- 转换为行内块：display: inline-block;
元素显示模式转换一个模式的元素需要另外一种模式的特性 比如想要增加链接 <a> 的触发范围。
元素的显示模式
标签选择器如：p {color：red；}
类选择器语法：.类名 {}
具有唯一性
id选择器#id名 { 属性1: 属性值1; ... }
无需调用，自动给所以元素使用样式
通配符选择器* { 属性1: 属性值1; ... }
css基础选择器：根据不同的需求把不同的标签选中出来
元素1 元素2 { }最终选择的是元素2元素1，和元素2可以是任意基础选择器
后代选择器
元素1>元素2 { }语法表示选择元素1 里面的所有直接后代(子元素) 元素2元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 也可以叫他 亲儿子选择器
子选择器只能选择作为某元素的最近一级子元素
元素1，元素2 { }
伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。
链接伪类选择器（使用多个的时候，需要按照顺序来书写）a:link 没有点击过的(访问过的)链接 a:visited 点击过的(访问过的)链接 a:hover 鼠标经过的那个链接 a:active 鼠标正在按下还没有弹起鼠标的那个链接
input:focus {这个是表单较为常用的}
:focus 伪类选择器用于选取获得焦点的表单元素。 焦点就是光标，一般情况 <input> 类表单元素才能获取
伪类选择器：伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
css复合选择器：复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）
css选择器
层叠性原则:- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式（后来居上，后面层叠掉前面的）- 样式不冲突，不会层叠
相同选择器给元素设置相同的样式一个样式就会覆盖另一个冲突样式
层叠性：主要解决样式冲突的问题
子元素可以继承父元素的样式： （text-，font-，line-这些元素开头的可以继承，以及color属性）继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞
继承性：子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。
首先，我们给选CSS择器分类：行内样式 <div style=\"xxx\"></div> ==> 标记a类ID 选择器 ==> 标记b类类，属性选择器和伪类选择器 ==> 标记c类标签选择器、伪元素 ==> 标记d类在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式 eg.{color: red !important;}**计数方法：**a/b/c/d类中，出现一类，就给a/b/c/d计一个 次数。a-d从高级到低级，a类的次数高的，其样式权重高，其余bcd类无需再比较；若a类的次数相同，则比较b类，b类的次数高的，其样式高权重高，其余cd类无需再比较。以此类推到d类。如下举例：*{} //a=0 b=0 c=0 d=0 最弱权重a:hover{} //a=0 b=0 c=1 d=1 ul ol{} //a=0 b=0 c=0 d= 2ul ol+li{} //a=0 b=0 c=0 d=3 h1+input[type=hidden]{} //a=0 b=0 c=1 d=3 [type=hiden]属性选择器ul ol li.acticce{} //a=0 b=0 c=1 d=3 #ct .box p //a=0 b=1 c=1 d=1 div#header :after{} //a=0 b=1 c=0 d=2 :after伪元素style=\"\" //a=1 b=0 c=0 d=0
当同一个元素指定多个选择器，就会有优先级的产生。- 选择器相同，则执行层叠性- 选择器不同，则根据选择器权重执行
优先级
CSS三大特性
字体大小：font-size: 20px;
字体粗细：font-weight: bold（加粗的）;normal（默认值），也可用数值表示（100--900）其中400等同于normal，700等同于bold
字体样式：font-style: normal（默认值，浏览器会显示标准字体样式）; italic（浏览器会显示斜体的字体样式）
行间距：line-height 行高的文本分为上间距 +文本高度+下间距=行间距
全文字体声明：font-family;
字体
单行文字垂直居中：让文字行高等于盒子高度，即：line-height：盒子的高度；
颜色color有16进制（开发中较常用）和RGB代码两种表达方式
文本对齐text-align: center（居中）;left左对齐right 右对齐
修饰文本text-decoration：none（默认，没有装饰线）；underline 下划线overline 上划线line-through删除线
文本属性
background-color ：颜色值；
元素背景颜色的默认值是transparent（透明）background-color ：transparent；
背景颜色
background：rgba（0，0，0，0.3）
背景色半透明css3提供
background-image ：none（默认无背景图）|url（）
背景图片
background-repeat 设置元素背景图像的平铺repeat 背景在纵向和横向上平铺（默认值）no-repeat 背景图像不平铺repeat-x 在横向上平铺repeat-y 在纵向上平铺
背景平铺
1、参数是方位名词 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐2、参数是精确单位 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中3、参数是混合单位 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标
background-position 属性可以改变图片在背景中的位置background-position：x y；可以使用 方位名词 或者 精确单位
背景图片位置
background-attachment：scroll（随对象内容移动）|fixed（固定） 属性设置背景图像是否固定或者随着页面的其余部分滚动。
背景图片固定
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;background: red url（） repeat fixed top；
背景样式合写
CSS背景
边框样式：- none：没有边框即忽略所有边框的宽度（默认值）- solid：边框为单实线(最为常用的)- dashed：边框为虚线 - dotted：边框为点线
边框粗细，边框样式，边框颜色
也可分开写：border-top: 1px solid red; /* 只设定上边框， 其余同理 */
边框简写：border: 1px solid red;
1、border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。2、语法：```css border-collapse:collapse; ```collapse 单词是合并的意思border-collapse: collapse; 表示相邻边框合并在一起
表格细线边框不重合问题解决
边框 border边框会影响盒子实际的大小一般测量盒子大小的时候不测量边框或者测量后宽高减去盒子边框宽度
内边距会影响盒子实际大小
内边距 padding边框与内容之间的距离
外边距可以让块级盒子水平居中的两个条件：- 盒子必须指定了宽度（width）。- 盒子左右的外边距都设置为 auto 。常见的写法，以下三种都可以：```cssmargin-left: auto; margin-right: auto;margin: auto;margin: 0 auto;```注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。
外边距的典型应用满足条件时可让盒子水平居中
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大值这种现象被称为相邻块元素垂直外边距的合并。
相邻块元素垂直外边距的合并解决方案：尽量只给一个盒子添加margin的值
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷为较大的外边距值。
注意：浮动 和固定定位，绝对定位的元素。不会发生外边距塌陷问题
嵌套块元素垂直外边距的塌陷解决方案：- 可以为父元素定义上边框。- 可以为父元素定义上内边距。- 可以为父元素添加 overflow:hidden（溢出隐藏的意识）。也可以使用子绝父相的方法
外边距合并问题
外边距 margin控制盒子和盒子之间的距离
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。```css * { padding:0; /* 清除内边距 */ margin:0; /* 清除外边距 */ }``` 注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了
清除内外边距因为在不同浏览器默认的不同，所以一般在布局之前先清除网页元素的内外边距
实际内容
盒子模型的组成
盒子模型把HTML页面中的元素看做是一个矩形的盒子，也是一个盛装内容的容器
- 文件→打开 ：可以打开我们要测量的图片- Ctrl+R：可以打开标尺，或者 视图→标尺- 右击标尺，把里面的单位改为像素- Ctrl+ 加号(+)可以放大视图， Ctrl+ 减号(-)可以缩小视图- 按住空格键，鼠标可以变成小手，拖动 PS 视图- 用选区拖动 可以测量大小- Ctrl+ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区
快捷键
最简单的切图方式：右击图层 → 导出 → 切片。
图层切图
利用切片工具手动划出
然后导出选中图片：文件菜单 → 存储为 web 设备所用格式 → 选择我们要的图片格式 → 存储 。
切片切图
切图插件：Cutterman 是一款运行在 Photoshop 中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 \"导出 web 所用格式\" 以及使用切片工具进行挨个切图的繁琐流程。官网：http://www.cutterman.cn/zh/cutterman注意：Cutterman 插件要求你的 PS 必须是完整版，不能是绿色版，所以大家需要安装完整版本。
切图
拓展：PS基本操作
圆角边框：birder-radius：圆角的圆的半径；
语法：box-shadow: h-shadow （必需，水平阴影的位置，允许负数值）v-shadow （必需，垂直阴影的位置 ，允许负数值）blur（可选，模糊距离） spread（可选，阴影尺寸） color（可选，阴影颜色） inset（可选，将外部阴影改为内部阴影）;
盒子阴影
语法：text-shadow: h-shadow （必需，水平阴影的位置，允许负数值）v-shadow （必需，垂直阴影的位置 ，允许负数值）blur（可选，模糊距离） color（可选，阴影颜色）;
文字阴影
其他样式css3新增
建议遵循以下顺序：1. **布局定位属性**：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）2. **自身属性**：width / height / margin / padding / border / background3. **文本属性**：color / font / text-decoration / text-align / vertical-align / white- space / break-word4. **其他属性（CSS3）**：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
CSS属性书写顺序
1. 块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em 等
标准流（普通流）就是标签按照规定好的默认方式进行排列
最典型应用：可以让多个块级元素一行内排列显示
网页布局第一准则：**多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动**
float属性用于创建浮动，将其移到一边，直到左边缘或有边缘触及包含块或另一个浮动框的边缘
语法：选择器 { float: none（元素不浮动（默认值））left（元素向左浮动）right（元素向右浮动）; }
1、浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)
2、浮动的元素会一行内显示并且元素顶部对齐
3、浮动的元素会具有行内块元素的特性 浮动元素的大小根据内容来决定 浮动的盒子中间是没有缝隙的
注意： 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
浮动的特性
浮动元素经常和标准流父级搭配使用
2、一个元素浮动了，理论上其余的兄弟元素也要浮动。一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。font color=\"#ff0000\
浮动布局注意点
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。
为什么要清除浮动
注意：- 如果父盒子本身有高度，则不需要清除浮动- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。- 父级有了高度，就不会影响下面的标准流了
1.清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度
清除浮动样式语法：选择器{clear:both;（同时清除左右两侧浮动的影响）}
2.可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。例如：```cssoverflow:hidden | auto | scroll;```优点：代码简洁缺点：无法显示溢出的部分注意：是给父元素添加代码
1.额外标签法（也称隔墙法）使用方式： 额外标签法会在浮动元素末尾添加一个空的标签。```html例如 <div style=\"clear:both\"></div>，或者其他标签（如<br />等）。``` 优点： 通俗易懂，书写方便 缺点： 添加许多无意义的标签，结构化较差 注意： 要求这个新的空标签必须是块级元素。
font color=\"#f44336\
3.父级添加after伪元素:after 方式是额外标签法的升级版。给父元素添加：```css .clearfix:after { content: \"\"; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 专有 */ *zoom: 1; } ```优点：没有增加标签，结构更简单缺点：照顾低版本浏览器代表网站： 百度、淘宝网、网易等
清除浮动的多种方式推荐使用伪元素的方式
清除浮动
浮动很多效果标准流没有办法完成浮动可以改变元素默认标签的排列方式1.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。
定位也是用来布局的，它有两部分组成：> **定位 = 定位模式 + 边偏移** **定位模式** 用于指定一个元素在文档中的定位方式。**边偏移**则决定了该元素的最终位置。（**边偏移** 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性）
无定位的意思，没有边偏移，相当于border里面的none
静态定位
相对定位的特点：（务必记住）- 1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。- 2.**原来**在标准流的**位置**继续占有，后面的盒子仍然以标准流的方式对待它。 因此，**相对定位并没有脱标**。它最典型的应用是给绝对定位当爹的。。。
相对定位：（没有脱标）是元素在移动位置的时候，是相对于它自己**原来的位置**来说的
**绝对定位的特点总结**：（务必记住）1.如果**没有祖先元素**或者**祖先元素没有定位**，则以浏览器为基准定位（Document 文档）。2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。3.绝对定位**不再占有原先的位置**。所以绝对定位是脱离标准流的。（脱标）
因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。②父盒子需要加定位限制子盒子在父盒子内显示。③父盒子布局时，需要占有位置，因此父亲只能是相对定位。（解释了为什么父盒子是相对定位）
子绝父相：子级是绝对定位的话，父级要使用相对定位
绝对定位：（完全脱标--完全不占位置）是元素在移动位置的时候，是相对于它**祖先元素**来说的（拼爹型）
- 固定定位的特点：（务必记住）： 1.以浏览器的可视窗口为参照点移动元素。 - 跟父元素没有任何关系 - 不随滚动条滚动。 2.固定定位**不在占有原先的位置**。- 固定定位也是**脱标**的，其实**固定定位也可以看做是一种特殊的绝对定位**。（认死理型） - **完全脱标**—— 完全不占位置； - 只认**浏览器的可视窗口** —— `浏览器可视窗口 + 边偏移属性` 来设置元素的位置； - 跟父元素没有任何关系；单独使用的 - 不随滚动条滚动。
固定定位fixed（完全脱标）**固定定位**是元素**固定于浏览器可视区的位置**。（认死理型） 主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变
用来做导航栏，侧边栏，进度条等等，用到的时候百度查询
1.以浏览器的可视窗口为参照点移动元素（固定定位特点）2.粘性定位占有原先的位置（相对定位特点）3.必须添加 top 、left、right、bottom **其中一个**才有效跟页面滚动搭配使用。 兼容性较差，IE 不支持
粘性定位（了解）可以被认为是相对定位和固定定位的混合。 Sticky 粘性的
语法：在 CSS 中，通过 `position` 属性定义元素的**定位模式**，语法如下：```css选择器 { position: `static**静态**定位 || ---------- | :----------: || `relative` | **相对**定位 || `absolute` | **绝对**定位 || `fixed` | **固定**定位 | ; }```定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。
1. **子绝父相** —— **子元素**使用**绝对定位**，**父元素**使用**相对定位**；2. **与浮动的对比**： * **绝对定位**：脱标，**利用边偏移指定准确位置**； * **浮动**：脱标，不能指定准确位置，**让多个块级元素在一行显示**。
在使用**定位**布局时，可能会**出现盒子重叠的情况**。此时，可以使用 **z-index** 来控制盒子的前后次序 (z轴)
**注意**：`z-index` 只能应用于**相对定位**、**绝对定位**和**固定定位**的元素，其他**标准流**、**浮动**和**静态定位**无效。
堆叠顺序
1. `left: 50%;`：让**盒子的左侧**移动到**父级元素的水平中心位置**；2. `margin-left: -100px;`：让盒子**向左**移动**自身宽度的一半**。
绝对定位盒子居中
定位的应用
绝对定位和固定定位也和浮动类似。1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:- 可以用inline-block 转换为行内块- 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）- 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。所以说， 一个行内的盒子，如果加了**浮动**、**固定定位**和**绝对定位**，不用转换，就可以给这个盒子直接设置宽度和高度等
脱标的盒子不会触发外边距塌陷
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）但是绝对定位（固定定位） 会压住下面标准流所有的内容。浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素
绝对定位（固定定位）会完全压住盒子
定位的特殊性
定位2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
### 6.1. 标准流 可以让盒子上下排列或者左右排列，**垂直的块级盒子显示就用标准流布局**。### 6.2. 浮动可以让多个块级元素一行显示或者左右对齐盒子，**多个块级盒子水平显示就用浮动布局**### 6.3. 定位定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。**如果元素自由在某个盒子内移动就用定位布局。**
网页布局总结
传统网页布局三种方式
``` display: none 隐藏对象 display：block 除了转换为块级元素之外，同时还有显示元素的意思。- 特点： display 隐藏元素后，**不再占**有原来的位置。- 后面应用及其广泛，搭配 JS 可以做很多的网页特效。实际开发场景： > 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
display设置或检索对象是否如何显示
隐藏之后，不在占用原来的位置
display: none 隐藏对象
visibility：visible ; 元素可视visibility：hidden; 元素隐藏 隐藏元素后。继续占有原来的位置
visibility可见性
元素的显示与隐藏
| **visible** | 不剪切内容也不添加滚动条 || ----------- | ------------------------------------------ || **hidden** | 不显示超过对象尺寸的内容，超出的部分隐藏掉 || **scroll** | 不管超出内容否，总是显示滚动条 || **auto** | 超出自动显示滚动条，不超出不显示滚动条 |
overflow溢出
原理将网页中的一些小背景整合到一张大图中，这样服务器只需要请求一次就可以了
通过移动背景图片位置来实现， 此时可以使用 background-position 。
精灵图：**为了有效地减少服务器接收和发送请求的次数**，**提高**页面的**加载速度**，出现了 **CSS 精灵技术**（也称 CSS Sprites、CSS 雪碧）。
**轻量级**：一个图标字体要比一系列的图像要小。一旦字体加载了， 图标就会马上渲染出来，减少了服务器请求- 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等- 兼容性：几乎支持所有的浏览器，请放心使用- 注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
使用步骤：先下载，在引入到html文件去
字体图标展示的是图标，本质属于字体
CSS三角形：使用边框画出来的，前提需要设置盒子宽和高为零，需要保留一个边框的颜色，其他边框颜色设置为透明色，就可以了
更改用户的鼠标样式鼠标样式 cursor
表单轮廓给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。
在实际开发中，文本域一般是不可以拖拽的
防止表单域拖拽textarea{ resize: none; }
**vertical-align** 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。官方解释： 用于设置一个元素的**垂直对齐方式**，但是它只针对于行内元素或者行内块元素有效。语法：vertical-align : baseline | top（把元素的顶端与行中最高元素的顶端对齐） | middle（） | bottom
图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。此时可以给图片、表单这些行内块元素的 **vertical-align 属性设置为 middle** 就可以让文字和图片垂直居中对齐了。
1.**给图片**添加 **vertical-align:middle | top| bottom** 等。 （提倡使用的）2.把图片转换为块级元素 **display: block**;
解决图片底部默认空白缝隙问题
/*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;
多行文本溢出显示省略号有较大的兼容问题
溢出文字省略号显示
CSS用户界面样式
CSS知识点
CSS3的现状
属性选择器
结构伪类选择器
应用：伪元素选择器添加字体图标
.clearfix清除浮动
伪元素选择器CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
CSS3新增选择器
CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变可以分成两种情况：- box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）- box-sizing: border-box 盒子大小为 width如果盒子模型我们改为了box-sizing: border-box ， 那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）
CSS3盒子模型
图标变模糊：css滤镜filterfilter: 函数(); --> 例如： filter: blur(5px); --> blur模糊处理 数值越大越模糊
计算盒子宽度--calc函数
其他特性：
当元素从一种样式变换为另一种样式时为元素添加效果。**过渡动画：** 是从一个状态 渐渐的过渡到另外一个状态可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。我们现在经常和 :hover 一起 搭配使用。
- 属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以- 花费时间： 单位是 秒（必须写单位） 比如 0.5s - 运动曲线： 默认是 ease （可以省略）- 何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）- **后面两个属性可以省略**- **记住过渡的使用口诀： 谁做过渡给谁加**
语法：transition: 要过渡的属性 花费时间 运动曲线 何时开始;
CSS3过渡
直接百度进行制作
使用link链接引入即可
网站 favicon 图标
#### TDK是什么##### T -- Title（网站标题）**title** 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。**建议：**网站名（产品名）- 网站的介绍 （尽量不要超过30个汉字）**例如：**- 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！- 小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站##### D -- description（网站描述）简要说明我们网站主要是做什么的。**我们提倡**，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。**例如：**`<meta name=\"description\" content=\
#### SEO是什么**SEO（Search Engine Optimization）**汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。**SEO** 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。
TDK三大标签SEO优化（★★）
CSS3新特性
页面布局思路：1确定网页版心2.分析页面中的行模块以及列模块3.制作结构，先有结构在有样式
导航栏一般用是**用 li 包含链接(li+a)的做法**
CSS网页学成在线实践
CSS层叠样式表
位移
转换原点
旋转
多重转换
缩放
渐变
平面转换概念：使用transform属性实现元素的**位移**、**旋转**、**缩放**等效果
空间位移
透视
空间旋转
立体呈现
空间缩放
动画
多组动画
空间转换
分辨率
视口
百分比布局
Flex布局
移动端特点
移动适配
媒体查询
less
bootstrap框架布局
移动web
HTML+CSS+移动web知识点
收藏
收藏
0 条评论
回复 删除
下一页
