2021-11-15 入门前端VScode必装的常用插件, HTML+CSS常用属性速记.
Html + Css 学习一、VSCode常用( 前端还在学习, 待更新… )//1. VScode常用快捷键* 新建文件：ctrl + N* 切换自动换行：alt + Z* 复制当前行：ctrl + C；ctrl + V；* 执行在默认浏览器 ：alt + B;* 设置vscode文件折叠属性: 打开设置 -> 搜索compact -> 勾选* (Win10桌面上)直接打开Power
·
Html + Css 学习
一、VSCode常用
//1. VScode常用快捷键
* 新建文件：ctrl + N
* 切换自动换行：alt + Z
* 复制当前行：ctrl + C；ctrl + V；
* 执行在默认浏览器 ：alt + B;
* 设置vscode文件折叠属性: 打开设置 -> 搜索compact -> 勾选
* (Win10桌面上)直接打开Powershell窗口: shift+右键
* 打开终端: "ctrl+`"
* vue_shop项目: 每次复制过去,记得导入node_modules和npm install; 开启:先开node app.js;再开vue ui;
//2.VScode我的常用插件
1.Debugger for Chrome: --调试插件
2.A Touch of Lilac Theme:
3.Auto Close Tag: --同时关闭首尾标签⭐
4.Auro Rename Tag:
5.background: --设置图片背景⭐
6.Beautify: --美化代码⭐
7.Bracket Pair Colorizer: --彩色括号,会让不同层级的括号有颜色.
8.Chinese: --中文显示⭐
9.CSS Peek:
10.css-class-intellisense:
11.EditorConfig for VS Code:
12.ESLint: --规范代码(格式化)
13.FreeMarker:
14.GitLens -- Git supercharged:
15.Highlight Matching Tag:
16.HTML CSS Support:
17.HTML to CSS autocompletion:
18.JavaScript (ES6) code snippets:
19.Live Server: --代码保存时浏览器自动刷新;
20.markdownlint:
21.Meterial Icon Theme: --文件图标⭐
22.open in browser: --打开在浏览器⭐
23.Path intellisense:
24.Vetur: --vue代码颜色插件.
25.Vue Theme: --vue颜色主题⭐
26.Vue 3 Snippets: --提示vue2和3的代码;
27.Prettier-Code formatter:
28.Preview on Web Server: --在VSCode内部预览效果;
29.JS-CSS-HTML Formatter: --格式化代码
30.
//3. VScode必须要配置的设置⭐⭐⭐
3.1 设置代码自动保存: 文件→首选项→设置→搜索框输入"autosave"→设置为afterDelay模式,1000ms自动保存!
3.2
二、HTML
2.1 HTML 初识
-
HTML注释:
-
「HTML」(Hyper Text Markup Language):超文本标记语言
2.2.1 html常用标签
<!-- 1.html5文档结构基础标签 -->
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<!-- 2.1 排版标签 -->
<h1> 标题标签,有<h1>~<h6>六个标签.
<p> 段落标签;
<hr> 水平线标签;
<br> 换行标签;
<div> 和 <span>: 网页布局中最主要的2个盒子标签, 没有语义.
<!-- 2.2 排版标签,以下标签尽量用CSS实现效果 -->
<b>和<strong> 文字以粗体显示标签;
<i>和<em> 文字以斜体显示
<s>和<del> 文字以加删除线显示
<u>和<ins> 文字以加下划线显示
<!-- 3. 含复杂属性的标签 -->
<!-- 3.1 图像标签 -->
<img src="images/pic.jpg" width="300" height="300" border="3" alt="图像不能显示时的替换文本" title="鼠标悬停显示内容" />
<!-- 3.2 链接标签(重点)
href="#" ->链接依然会跳转(在地址栏会多出一个#符号)
href="javascriptvoid(0);" 或者 href="javascript:;" ->阻止链接跳转 -->
<a href="#/跳转目标" target="目标窗口的弹出方式">*文本或图像*</a>
target="_self": 默认窗口弹出方式
target="_blank": 新窗口弹出
<a href="#two"> <h3 id="two">第2集</h3>: 锚点
<!-- 3.3 表格标签 (属性:border, cellspacing, cellpadding, width, height, align, rowspan, colspan) -->
<table>
<caption>表格标题, 居中显示在表格之上</caption>
<tr>
<th>表头单元格标签</th>
...
</tr>
<tr>
<td>单元格</td>
...
</tr>
...
</table>
<!-- 3.4.1 列表标签:无序列表ul (<li>与</li>之间相当于一个容器，可以容纳所有元素) -->
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
<!-- 3.4.2 列表标签:无序列表ol (常用的type属性值分别为是1，a，A，i，I) -->
<ol type="A">
<li>列表项1</li>
<li>列表二</li>
<li>列表三</li>
</ol>
<!-- 3.4.3 列表标签:自定义列表dl (自定义列表常用于对术语或名词进行解释和描述) -->
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
<!-- 3.5 表单标签 (<input />标签为单标签, 含属性:type, name, value, size, checked, maxlength) -->
<input type="属性值" value="你好">
//常用的type属性如下:
<input type="text" name="username" value="请输入用户名" maxlength="6"> =>单行文本输入框
<input type="password" name="pwd"> =>密码输入框
<input type="radio" name="sex" value="女" checked="checked"> =>单选按钮
<input type="checkbox" name="hobby" value="打豆豆" checked="checked"> =>复选框
<input type="button" value="获取短信验证码"> =>普通按钮
<input type="submit" value="免费注册"> =>提交按钮
<input type="reset" value="重新填写" > =>重置按钮
<input type="image" > =>图像形式的提交按钮
<input type="file" > =>文件域
<!-- 3.6 label标签的使用⭐ -->
<!-- 第一种: 用label标签直接包含input表单，适合单个表单选择 -->
<label> 用户名：
<input type="radio" name="usename" value="请输入用户名">
</label>
<!-- 第二种:for 属性规定 label 与哪个表单元素绑定(通过id)。 -->
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
<!-- 3.7 文本域标签 (cols="每行中的字符数" rows="显示的行数", 我们实际开发不用.) -->
<textarea >
文本内容
</textarea>
<!-- 3.7 select下拉列表标签 -->
<select>
<option selected ="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
<!-- 3.8 form表单域标签 -->
<form action="url地址" method="提交方式:get/post" name="表单名称">
各种input表单控件
</form>
<!-- 3.9 iframe标签(基本不使用!) -->
* iframe 标签用于在一个页面中嵌入另一个页面.
* 配合 a 标签使用时, 可以用a标签指定 iframe指向的页面.
<a href="http://www.so.com" target="iframe-test1">显示360搜索</a>
<iframe name="iframe-test1" width="600" height="600" src="./12-select下拉表单.html"></iframe>
- HTML基础面试题
- GET 和 POST 的区别
- GET在浏览器回退时是无害的，而POST会再次提交请求。
- GET请求会被浏览器主动cache，而POST不会，除非手动设置。
- GET请求只能进行url编码，而POST支持多种编码方式。
- GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
- GET请求大小一般是(1024字节)，http协议并没有限制，而与服务器，操作系统有关，POST理论上来说没有大小限制，http协议规范也没有进行大小限制，但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。
- 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
- GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
link和@import的区别？
1、从属关系区别：
link属于html标签，而@import是css提供的。
2、加载顺序区别：
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载。
3、兼容性区别：
import只在IE5以上才能识别，而link是html标签，无兼容问题。
4、dom可操作性区别：
可以通过JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式
5、权重区别：
如果已经存在相同样式，@import引入的这个样式将被该 CSS 文件本身的样式层叠掉，表现出link方式的样式权重高于@import的权重这样的直观效果。
（简而言之，link和@import，谁写在后面，谁的样式就被应用，后面的样式覆盖前面的样式。）
src与href的区别？
1、href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
2、src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
2.2.2 HTML特殊字符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ypLiNs29-1637815946895)(learnPic\html特殊字符.jpg)]
2.3 HTML5 新增的语义化标签
<!-- 新增的布局标签.
注意: 1.在IE9中, 需要把这些元素转化为块级元素(display: block;).
2.这些标签在移动端更常用. -->
* <header>: 头部标签
* <nva>: 导航标签
* <article>: 内容标签
* <section>: 块级标签(定义文档某个区域)
* <aside>: 侧边栏标签
* <footer>: 尾部标签
<!-- 新增的多媒体标签 -->
<audio>: 音频
<vedio>: 视频
<!-- 新增的input类型 -->
<input type="** number/ tel/ search/** email/ url/ date/ time/ month/ week/ color">
<!-- 新增的表单属性(若要表单中有需要上传文件的表单项时，则必须设置enctype：enctype="multipart/form-data") -->
<form action="" method="post" enctype="multipart/form-data">
<input type="search" name="sear" id=""
required="required" //表示必填.
placeholder="文字提示" //表单的提示信息.
autofocus="autofocus" //鼠标自动聚焦属性.
autocomplete="off/on" //显示浏览器基于之间键入过的值.>
<input type="file" name="" id=""
multiple="multiple"> //可以多选文件提交.
<input type="submit" value="提交">
</form>
三、CSS
3.1 初识CSS
- **「 CSS」**CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表)。
- 「CSS注释」
/* 这是CSS中的注释. */
3.1 引入CSS样式表
「1.行内式(内联样式)」
/* 通过标签的style属性来设置元素的样式, 缺点是没有实现样式和结构相分离。*/
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
例如：
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
「2.内部样式表(内嵌样式表)」
/* 也称为内嵌式，将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。缺点是没有彻底分离结构与样式 */
<head>
<style type="text/CSS">
选择器(选择的标签) {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
「3.外部样式表(外链式)」
/*
也称链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。
rel:定义当前文档与被链接文档之间的关系，在这里需指定为“stylesheet”，表示被链接的文档是一个样式表文件。
href:定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
*/
<link rel="stylesheet" href="index.css">
3.3 CSS选择器: 基础选择器, 复合选择器, 伪类选择器
3.3.1「 CSS基础选择器总结」
| 选择器 | 作用 | 缺点 | 用法 |
|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签. | 不能差异化选择. | p { color：red;} |
| 类选择器 | 可以选出1个或者多个标签. | 可以根据需求选择. | .nav { color: red; } |
| id选择器 | 一次只能选择器1个标签. | 只能使用一次(不推荐使用). | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签. | 会匹配页面所有的元素，降低页面响应速度(不推荐使用). | ***** {color: red;} |
3.3.2「 CSS复合选择器总结」
| 选择器 | 作用 | 特征 | 隔开符号及用法 |
|---|---|---|---|
| 后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代. | 符号是空格: .nav a |
| 子代选择器 | 选择 最近一级元素 | 只选亲儿子. | 符号是> : .nav>p |
/* 8.1 链接伪类选择器: 跟链接相关, 注意记住LVHA的声明顺序-> :link/:visited/:hover/:active;
8.2 :focus选择器: 跟表单相关, 记住input:focus{…} */
3.3.3 「CSS3 - 属性选择器」
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YS2TeYnd-1637815946897)(learnPic\CSS3属性选择器.png)]
3.3.4 「CSS3 - 结构伪类选择器」
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xSA0U5PK-1637815946897)(learnPic\CSS3 - 结构伪类选择器.png)]
nth-child(n)参数n详解: n可以是数字、关键字、公式; 常见的关键字有 even 偶数、odd 奇数;
常见的公式如下(如果n是公式，则从 0 开始计算, 必须写成类似`2n 或 2n+1 或 -n+5`的公式), 但是第 0 个元素或者超出了元素的个数会被忽略.
3.3.5 「CSS3 - 伪元素选择器」
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pIJg9QJr-1637815946899)(learnPic\CSS3 - 伪元素选择器.png)]
伪元素选择器注意事项
1. before 和 after 必须有 content 属性; before 在内容前面，after 在内容后面.
2. before 和 after 创建的是一个元素，但是属于行内元素
3. 创建出来的元素在 Dom 中查找不到，所以称为伪元素. 伪元素和标签选择器一样，权重为 1
3.4 常用属性样式⭐
-
CSS基础属性
//1.CSS字体样式--font字体 font-style: 用于定义字体风格，如设置斜体、倾斜或正常字体. font-weight: 用于设置字体粗细(normal, bold, 100~900). font-size: 用于设置字号(em, *px*, in, cm, mm, pt). font-family: 用于设置哪一种字体. font: 综合设置字体样式. /* 选择器 { font: font-style font-weight font-size/line-height font-family;} 注意: 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以 空格 隔开. 其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性，否则font属性将不起作用. */ //2.CSS外观属性 color: 用于定义文本的颜色. text-align: 用于设置文本内容的水平对齐方式，相当于html中的align对齐属性(left, right, center). line-height: 用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高(要设置在font属性下面，否则无效). text-indent: 用于设置首行文本的缩进. text-decoration: 用于给链接修改装饰效果(none, underline, overline, line-through). //3.CSS背景(background) background-color: 颜色值; ->用于设置背景颜色.(默认的值是 transparent透明的). background-image: none | url (url); ->用于设置背景图片. background-repeat : repeat | no-repeat | repeat-x | repeat-y; ->用于设置背景平铺; background-position : position || position; ->用于设置背景位置. background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; /* 如果有背景图片则背景颜色可以不用写, 例如: background: [transparent] url(image.jpg) repeat-y scroll center top ; */ background: rgba(0, 0, 0, .3); ->用于设置背景半透明. opacity: .2; ->用于设置盒子半透明(设置opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度). //4. 标签显示模式.(HTML标签一般分为块标签 和 行内标签两种类型，它们也称为块元素和行内元素。) display:inline; 块元素转为行内元素. display:block; 行内元素转为块元素. display: inline-block; 块、行内元素转换为行内块. /* 4.1 块级元素: 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。 4.2 行内元素: 常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。 4.3 行内块元素: 在行内元素中有几个特殊的标签比如<img>、<input >、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。 */
3.5 CSS三大特性
-
CSS 层叠性
1.所谓层叠性是指多种CSS样式的叠加. 2.样式冲突，遵循的原则是就近原则。 哪个样式离着结构近，就执行哪个样式。样式不冲突，不会层叠。 -
CSS 继承性
1.子标签会继承父标签的某些样式，如文本颜色和字号。 2.子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）. -
CSS 优先级
1.选择器相同，则执行层叠性; 选择器不同，就会出现优先级的问题。 2.CSS 权重计算问题: 2.1 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。 2.2 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性） 2.3 div { color: pink !important; }-
权重计算公式：
标签选择器 计算权重公式 继承或者 * 0,0,0,0 每个元素（标签选择器） 0,0,0,1 每个类，伪类 0,0,1,0 每个ID 0,1,0,0 每个行内样式 style="" 1,0,0,0 每个!important 最重要的 ∞ 无穷大
-
3.6 盒子模型 ( css学习三大重点: CSS盒子模型, 浮动, 定位 )
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WUkMa0i1-1637815946901)(learnPic\CSS盒子模型.png)]
- 标准 w3c 盒子模型的范围包括 margin、border、padding、content
3.6.1 盒子模型
//1.两种盒子模型
box-sizing: content-box; //W3c标准盒子模型; 盒子的实际大小：内容的宽度和高度 + 内边距 + 边框.
box-sizing: border-box; //IE盒子模型; 将采用怪异模式解析计算;
//2.盒子边框(border)
border-width //定义边框粗细，单位是px.(还有border-top /bottom /left /right-style:样式;)
border-style //边框的样式.
border-color //边框颜色.
border : border-width || border-style || border-color;
border-top /bottom /left /right:宽度 样式 颜色;
border-collapse: collapse; //表示相邻边框合并在一起。
//3.内边距(padding)
padding: 上内边距 右内边距 下内边距 左内边距 ；
padding: 上内边距 左右内边距 下内边距;
...
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
//4.外边距(margin)
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距
//5.外边距合并问题(略)
//6.CSS3新增
//6.1 圆角边框
border-radius: length;
border-radius: 左上角 右上角 右下角 左下角;
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度
//6.2盒子阴影(box-shadow)
box-shadow: offset-x offset-y [blur [spread]] [color] [inset];
3.6.2 浮动
-
CSS 提供了3种机制来设置盒子的摆放位置，分别是普通流**（标准流）、浮动 和 定位**;
//1. 什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制(脱标),不占位置; 移动到指定位置。 //2.作用 * 让多个盒子(div)水平排列成一行，使得浮动称为布局的重要手段。 * 可以实现盒子的左右对齐等等。 * 浮动最早是用来控制图片，实现文字环绕图片效果。 * float属性会改变元素的display属性，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和我们前面的行内块极其相似。 //3.浮动: 选择器 { float: 属性值; } float: none | left | right; //4.清除浮动⭐⭐⭐ //4.1 额外标签法(隔墙法). W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如: <div style="clear:both"></div>，或则其他标签br等亦可。 //4.2 父级添加overflow属性方法. 可以给父级添加： overflow: hidden| auto| scroll 都可以实现。 //4.3 使用after伪元素清除浮动:after 方式为空元素额外标签法的升级版，好处是不用单独再加标签. .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } /* IE6、7 专有 */ .clearfix { *zoom: 1; } //4.4 使用双伪元素清除浮动 .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }
3.6.3 定位
-
将盒子**「定」在某一个「位」**置 自由的漂浮在其他盒子(包括标准流和浮动)的上面。
-
定位是用来布局的，它有两部分组成：定位 = 定位模式 + 边偏移. ( **「边偏移」: **
top、bottom、left和right属性定义元素的边偏移.)//1.定位模式: 选择器 { position: 属性值; } static 「静态」定位//静态定位按照标准流特性摆放位置。默认使用(即标准流). relative「相对」定位//注意: 1.相对定位是元素相对于它原来在标准流中的位置来移动的。 2.原来在标准流的区域继续占有(不脱标)，后面的盒子仍然以标准流的方式对待它。 absolute「绝对」定位//1.绝对定位是元素以带有定位的父级元素来移动位置; 2.完全脱离标准流(脱标)--完全不占位置；若父元素没有定位，则以浏览器为准定位(Document文档)。 fixed 「固定」定位//1.固定定位是绝对定位的一种特殊形式; 2.只认"浏览器可视窗口+边偏移属性"来设置元素的位置; 3.跟父元素没有任何关系, 单独使用; 不随滚动条滚动. //2.边偏移 top 上边偏移 bottom 下边偏移 left 左边偏移 right 右边偏移 //3.口诀: 子绝父相 ->相对定位经常用来作为绝对定位的父级. (总结: 1.因为父级需要占有位置, 因此是相对定位, 子盒子不需要占有位置则是绝对定位. 2.注意不要直接放图片, 最好给图片套一个div盒子. ) //4.定位(position)的扩展 //4.1 绝对定位的盒子居中 绝对定位/固定定位的盒子不能通过设置margin: auto设置水平居中 在使用绝对定位时要向实现水平居中，可以按照下面的方法： 一. left: 50%; 让盒子的左侧移动到父级元素的水平中心位置. 二. margin-left: -100px; 让盒子向左移动自身宽度的一半。 三. 同理垂直居中。 //4.2 堆叠顺序（z-index） 1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；(数字后面不能加单位) 2. 如果属性值相同，则按照书写顺序，后来居上； 3. z-index只能用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。 //4.3 定位改变display属性 (一个行内的盒子，如果加了「浮动」、「固定定位」和「绝对定位」，则不用转换就可以给这个盒子直接设置宽度和高度等。) 前面提过， display 是显示模式，可以通过以下方式改变显示模式: ① 可以用inline-block 转换为行内块. ② 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的） ③ 绝对定位和固定定位也和浮动类似， 默认转换的特性转换为行内块。 -
定位小结
定位模式 是否脱标占有位置 移动位置基准 模式转换（行内块） 使用情况 静态static 不脱标，正常模式 正常模式 不能 几乎不用 相对定位relative 不脱标，占有位置 相对自身位置移动 不能 基本单独使用 绝对定位absolute 完全脱标，不占有位置 相对于定位父级移动位置 能 要和定位父级元素搭配使用 固定定位fixed 完全脱标，不占有位置 相对于浏览器移动位置 能 单独使用，不需要父级
3.6.4 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 / background:linear-gradient …
/* 形如以下: */
.jdc {
display: 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,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
3.7 CSS3的新特性
-
CSS3新增属性
/* 0.过渡 transition: 谁做动画给谁加 */ transition: all 0.3s; //1. 2D转换transform //1.1 移动: translate; (translate 对于行内元素是无效的) transform: translate(x, y); transform: translateX(x); transform: translateY(y); //1.2 旋转: rotate; transform: rotate(45deg); //45deg度数 transform-origin: 50px 50px; //设置旋转中心点. //1.3 缩放: scale(x, y); (没有单位) transform: scale(2, 2); => transform: scale(2) //1.4 综合写法(按顺序) transform: translate(150px, 50px) rotate(180deg) scale(1.2); //2. 2D动画 /* 1. 定义动画 */ @keyframes move { /* 开始状态 */ 0% { transform: translateX(0px); } /* 结束状态 */ 100% { transform: translateX(1000px); } } div { width: 200px; height: 200px; background-color: pink; /* 2. 调用动画 */ /* 动画名称 */ animation-name: move; /* 持续时间 */ animation-duration: 2s; } div:hover { /* 鼠标放入section 停止动画 */ animation-play-state: paused; } //3. 3D转换 //3.1 移动 transform: translateX(100px) translateY(100px) translateZ(100px); => ransform: translate3d(x,y,z); //3.2 透视 /* 透视写到被观察元素的 父盒子 上面 */ perspective: 200px; //3.3 3D旋转 transform: rotateX(45deg) 沿着x轴正方向旋转45deg. transform: rotateY(45deg); transform: rotateZ(45deg); transform: rotate3d(x,y,z,deg); ->transform: rotate3d(1, 0, 0, 45deg); //3.4/* 让子元素保持3d立体空间环境 给父级添加的 */ transform-style: preserve-3d; //flat属性是不开启3d立体空间. //4.浏览器私有前缀 浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。 1.私有前缀 -moz-: 代表firefox浏览器私有属性· -ms-∶ 代表ie浏览器私有属性. -webkit-: 代表safari、chrome私有属性· -O-: 代表Opera私有属性. //4.1 提倡的写法 -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;
3.8 CSS常见问题及解决方法 (CSS高级技巧)
//1.去除a标签的下划线
a {
color: gray;
text-decoration: none; /* 清除链接默认的下划线*/
}
a:hover { /* :hover 是链接伪类选择器->鼠标经过事件 */
color: red;
}
//2.1 清除li标签中样式
li {
list-style: none;
}
//2.2 清除内外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
//3. 给按钮添加图片背景
.search button {
float: left;
width: 50px;
height: 42px;
/* 按钮button 默认有个边框，需要我们手动去掉 */
border: 0;
/* 给按钮添加图片背景 */
background: url(images/btn.png);
}
// 4. 文字在盒子中的位置
.text {
height: 35px;
line-height: 35px; /* 行高=盒子高度,使文字垂直居中 */
text-align: center; /* 使文字左右居中 */
}
// 5. 超出区域的文字用省略号表示
.news-bd ul li {
height: 24px;
line-height: 24px;
white-space: nowrap; /* 强制文字一行显示 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出文字用省略号显示 */
}
//6.文字居中和盒子居中区别👇👇
盒子内的文字水平居中是 text-align: center; 而且还可以让行内元素和行内块居中对齐.
块级盒子水平居中: 左右margin 改为 auto
//7. 用户界面样式-表单轮廓和防止拖拽文本域
<style>
input,textarea {
/* 取消表单轮廓 */
outline: none;
}
textarea {
/* 防止拖拽文本域 */
resize: none;
}
</style>
//8.元素的显示与隐藏 (特点：隐藏之后，不再保留位置。)
//8.1 display 显示（重点）
display: none; 隐藏对象.
display: block; 除了转换为块级元素之外，同时还有显示元素的意思。
//8.2 visibility 可见性 (特点：隐藏之后，继续保留原有位置。)
visibility: visible; 对象可视
visibility: hidden; 对象隐藏
//8.3 overflow 溢出
overflow: visible | hidden | scroll | auto;
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉(重要).
scroll 不管超出内容否，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条
//9.CSS用户界面样式
//9.1 鼠标样式:
style="cursor:default/pointer/move/text/not-allowed"
//9.2 轮廓线: outline //
平时都是去掉的,最直接的写法: outline: 0; 或者 outline: none;
//9.3 防止拖拽文本域resize //
<textarea style="resize: none;"></textarea>
//10.vertical-align 垂直对齐, 它只针对于「行内元素」或者「行内块元素」, 通常用来控制图片/表单与文字的对齐。
/* 有宽度的块级元素居中对齐，是margin: 0 auto;
让文字居中对齐，是 text-align: center;*/
//10.1 图片、表单和文字对齐
vertical-align : baseline |top |middle |bottom;
//10.2 去除图片底侧空白缝隙 (原因：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。就是图片底侧会有一个空白缝隙。)
解决方法：
①给img 添加 vertical-align:middle | top| bottom等等。让图片不要和基线对齐。
②给img 添加 display：block; 转换为块级元素就不会存在问题了。
//11.CSS精灵技术（sprite) ->为什么需要精灵技术：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
需要使用CSS的:background-image、background-repeat、background-position属性进行背景定位，其中最关键的是使用background-position 属性精确地定位。
//12.滑动门
总结：
a 设置背景左侧，padding撑开合适宽度。
span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
之所以a包含span就是因为 整个导航都是可以点击的。
//13.CSS 三角形
div {
width: 0;
height: 0;
...
border-top: 10px solid red;
}
四.移动Web开发与flex布局
1.视口
视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口.
1.1 布局视口(layout viewport)
1.2 视觉视口(visual viewport)
字面意思，它是用户正在看到的网站的区域。(注意∶是网站的区域。)
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
2.3 理想视口(ideal viewport)
为了使网站在移动端有最理想的浏览和阅读宽度而设定. 理想视口，对设备来讲，是最理想的视口尺寸.
需要手动添写meta视口标签通知浏览器操作.
meta视口标签的主要目的∶布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽.
2.meta标签(...)
3.二倍图(CSS3):
3.1 背景缩放 (background-size属性规定背景图像的尺寸)
background-size:背景图片宽度 背景图片高度;
/* 单位︰长度 | 百分比 | cover | contain;
* cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
* contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域. */
4. 移动端主流方案:
一.单独制作移动端页面;
* 流式布局(百分比布局).
* flex弹性布局（强烈推荐).
* less+rem+媒体查询布局.
* 混合布局.
二.响应式页面兼容移动端(其次)
* 媒体查询.
* bootstarp.
5. 特殊样式
/*cSs3盒子模型*/
box-sizing: border-box; //pc端设置.
-webkit-box-sizing: border-box; //移动端设置加上 -webkit-
/*点击高亮我们需要清除清除︰设置为transparent完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img, a { -webkit-touch-callout: none; }
移动端常见布局
1. 流式布局（百分比布局)
/* 1.流式布局，就是百分比布局，也称非固定像素布局。
2.通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
3.流式布局方式是移动web开发使用的比较常见的布局方式. */
max-width 最大宽度(max-height最大高度)
min-width 最小宽度(min-height最小高度)
2 flex布局
2.1 布局原理
display: flex; ⭐
/* 总结flex布局原理∶
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式.(当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。)
flex是flexible Box的缩写，意为"弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
采用Flex布局的元素，称为Flex容器(flex container)，简称"容器"。
它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称"项目"。 */
2.2 常见父项属性(以下由6个属性是对父元素设置的).
2.2.1 flex-direction: row; 设置主轴的方向.
/* row: 默认值从左到右
row-reverse: 从右到左
column: 从上到下
column-reverse: 从下到上 */
2.2.2 justify-content: flex-start; 设置主轴上的子元素排列方式.
/* 注意∶使用这个属性之前一定要确定好主轴是哪个
flex-start: 默认值从头部开始如果主轴是x轴，则从左到右
flex-end: 从尾部开始排列
center: 在主轴居中对齐（如果主轴是x轴则水平居中)
space-around: 平分剩余空间
space-between: 先两边贴边再平分剩余空间(重要⭐) */
2.2.3 flex-wrap∶ nowrap; 设置子元素是否换行.
/* nowrap 默认值，不换行.
wrap 换行. */
2.2.4 align-items: flex-start; 设置侧轴上的子元素排列方式(单行).
/* flex-start: 默认值从上到下
flex-end: 从下到上
center: 挤在一起居中（垂直居中)
stretch: 拉伸 */
2.2.5 align-content: flex-start; 设置侧轴上的子元素的排列方式(多行).
/* 设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行)，在单行下是没有效果的。
flex-start: 默认值在侧轴的头部开始排列
flex-end: 在侧轴的尾部开始排列
center: 在侧轴中间显示
space-around: 子项在侧轴平分剩余空间
space-between: 子项在侧轴先分布在两头，再平分剩余空间
stretch: 设置子项元素高度平分父元素高度 */
2.2.6 flex-flow: row wrap; 复合属性，相当于同时设置了flex-direction和flex-wrap.
3. flex布局子项常见属性
3.1 flex属性: 定义子项目分配剩余空间，用flex来表示占多少份数。
.item {
flex: <number>; /* default 0 */
}
3.2 align-self 控制子项自己在侧轴上的排列方式(了解). //align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch.
span:nth-child(2){
/* 设置自己在侧轴上的排列方式 */
align-self: flex-end;
}
3.3 order属性定义项目的排列顺序: 数值越小，排列越靠前，默认为0。(注意: 和z-index不一样。)
div span:nth-child(2) {
/* 默认是0, -1比0小所以在前面 */
order: -1;
}
五.网站项目开发
4.1 网站TDK 三大标签SEO优化 ( 以后可能用于定飞优化 ):
1.SEO ( Search Engine Optimization)汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
2.SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。
3.页面必须有三个标签用来符合SEO优化: title, description, keyword.
title: title具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点.
description: 简要说明我们网站主要是做什么的.
keword: keywords是页面关键词，是搜索引擎的关注点之一。keywords最好限制为6~8个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2的形式。
4.为SEO人员提供以下三大标签:
<title></title>
<meta name="keywords" content="..." />
<meta name="description" content="..." />
前往低代码交流专区
更多推荐
10
0- 0
已为社区贡献2条内容
所有评论(0)