前端基础CSS+html篇 2w字吐血总结
前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。
当然这是百度百科的介绍，实际上前端的技术栈远比想象的要复杂的多，并且更新迭代速度极快，前几年也许会jquery即可找到工作，但近年来各个行业内卷严重，导致前端需要拥有的技术已经不仅仅是前端三剑客了，但归根结底前端的基础却从未变过。再多的UI组件库也都是基于css，再多的框架也都是基于js的，因此学好前端三剑客是学会前端的基础。如果把前端的学习之路比喻成修炼武功，那么计算机网络，算法便是内功，css，html，js就是九阴真经，学会之后再接触任何的框架也都会突飞猛进，一点就通，但若是基础没打牢，那么后面的学习便会进步迟缓。
无论您是前端小白，还是久经沙场的大佬，请您记住：真正的大师永远保持一颗学徒的心。我们在这条路上风雨无阻，砥砺前行
目录
HTML基础
HTML简介
HTML、CSS、Js三者关系
浏览器解析
网页骨架结构
HTML代码汇总
1、文字标题标签
2、媒体链接
3.Form表单
4、 表格
5、列表
6、语义化标签
CSS基础
CSS简介
CSS代码
16种常用选择器
1、浏览器兼容问题
2、元素显示模式
3、常见单位
4、颜色
5、字体和文本
6、背景
7、盒模型
8、三大特性
9、浮动和清除浮动
10、定位
11、装饰
12、平面空间转换
移动端
flex布局
移动适配
rem、vw/vh
less语法
bootstrap框架
HTML基础
HTML简介
HTML、CSS、Js三者关系
接下来先从网页的组成成分来进行讲解：
如我们所常识的网页就是有文字、图片、音频、视频、链接等组成的。在网页的背后是由我们程序员所书写的代码，经浏览器（解析和渲染）形成了我们所看见的图片文字等。那么我们所书写的代码就是HTML是可以被浏览器所识别的语言，它与java，c不同的是，HTML是超文本标记语言，是一种描述语言，而java等是由汇编语言演变而来的高级语言。通常来说java等用于后端，HTML用于前端是网页的骨架结构。
如图所示谷歌首页的代码对应于右侧的代码，通常由css+html+JavaScript构成的，这也是Web标准写法，实现各种网页效果，那么三者的区别在哪里呢？
html是结构、css是表现、js是行为。如果把三者比喻成动画片，那么html就是铅笔稿，Css就是在铅笔稿之上加入的颜色，JS就是最后添加的动作，三者结合便可以呈现一部完美的作品了。
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟）是国际最著名的标准化组织。
浏览器解析
如上我们所看到的，浏览器作为将代码解析给我们的媒介，它的组成是什么样子呢？
大多数的网页就由以下的几部分组成，这里面相对来说比较重要与我们前端比较相关的是title和网站图标的设置。还有就是URL（统一资源定位器）
URL由三部分组成：资源类型、存放资源的主机域名、资源文件名。也可认为由4部分组成：协议、主机、端口、路径。 当然这部分建议大家看计算机网络这本书，对于网址，IP地址，域名解析等有更深的理解。前端的工作与计算机网络也是密不可分的。
除此之外每个浏览器都有自己的内核，渲染引擎(浏览器内核)︰浏览器中专门对代码进行解析渲染的部分浏览器出品的公司不同，内在的渲染引擎也是不同的:
网页骨架结构
如下图，在我们使用VScode或其他编程软件时会经常输入以下命令，那么我们是否想过以下命令的含义呢？ 实际上这些命令便是一个网页的基础结构，同时是用来告诉浏览器我们使用的是html语言，浏览器便能进行解析了。
粗略来看把骨架结构当做一个人的话，那么html标签就是人的全部结构，head就是头部，body就是其余的躯体部分。
那么接下来便将html骨架进行一一拆解，这样我们便可以做到知其然知其所以然。
首先是 这句话是告诉浏览器我们 使用的文档语言是HTML5版本。必须要书写到文档的第一行。
第二行是 与最后一行构成的双标签结构，在此区间内的所有内容便是网页的内容，lang=“en” 表示的是网页所使用的语言，en代表English ，如果想改成中文便是lang=“ZH-CN”。
第三行是 这里的UTF-8是万国码，总结起来就是现在各国大家都用这一套码来解释代码，不然每个国家代码都不一样就像语言也一样不通，具体的历史可以自己查查百度，学过java的应该知道这就是Unicode码。c语言里的acs||码类似于其子集，数量没有万国码多。
第四行是 是解决浏览器兼容问题的。
第五行是 是解决兼容移动端，缩放等问题的代码
第六行 就是我们之前所说的title 在双标签内加入文字即可在浏览器的标题内显示
除此之外，我们一般还要link一些需要的文件如 网站图标 网站描述 CSS样式 字体图标等。
description和keyword 是网站描述和页面关键词通常对于网站的SEO优化有所帮助，因此有专门的业务人员提供文字，但我们需要将这些link到网页中
其次就是我们在做网页过程中需要用到的一些比如说 网站图标 ico 通常在和index在根目录下，iconfont是网站需要用到的字体图标，因此需要引入文件。除此之外就是所需要的CSS样式文件了，如通用样式，index样式等 ，如果需要用到组件库如bootstrap等还需要引入 对应的文件。
这些部分是需要写到head部分的，如果需要添加style内部样式等也可以在此区域内引入。
剩下的也就是我们索要书写得主要的部分就在 body 标签内书写，包括引入javascrip等。
HTML代码汇总
这里的代码就不将html和html5进行区分了，直接汇总学习就可以了，canvas部分作者没有学习，有兴趣的可以自行学习，根据本人的理解，html和html5的区别在于后者相对来说是比较新的版本增加了一些语义化标签如：footer，header，asider，section，nav，article，p，h1等，语义化即见名知意，另外还增加了媒体相关标签，如video等。
1、文字标题标签
| 标签 | 说明 |
| h1 | 一级标题 |
| h2 | 二级标题 |
| h3 | 三级标题 |
| h4 | 四级标题 |
| h5 | 五级标题 |
| h6 | 六级标题 |
标题标签基本大家都非常常用，也是比较基础的标签，主要用来作为新闻标题，各种小标题等用处，值得注意的是此标签是块级元素，并且自带margin属性，在html5中其aliign属性已不能使用，平时除标题外也可以将其作为logo的载体等。
| 标签 | 说明 |
| p | 段落标签 |
| span | 文本标签 |
| div | 盒子 |
p标签用于段落，span标签用于普通文本，实际上二者都会用于文本，二者的区别在于p标签是块级元素独占一行，且有默认margin。span是行内元素。div是典型的块级元素。
| 标签 | 说明 |
| br | 换行 |
| hr | 水平线 |
如图所示，span标签为行内元素，因此排列是紧挨着不会换行，使用了
后进行了换行，使用了
画出一条水平线并换行。
| 标签 | 说明 | 标签 | 说明 |
| b | 加粗 | strong | 加粗 |
| u | 下划线 | ins | 下划线 |
| i | 倾斜 | em | 倾斜 |
| s | 删除线 | del | 删除线 |
另外还有不太常用的下标字 sub 和上标字 sup等
通常标签 替换加粗标签 来使用, 替换 标签使用。然而，这些标签的含义是不同的： 与 定义粗体或斜体文本。 或者 意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。一般 i 通常包裹字体图标使用，
2、媒体链接
众所周知在网页中加入连接是a标签了，实际上a在各种导航、轮播图等各种需要跳转的地方均有用到、这个标签相对来说也比较简单只需要记住三个属性即可。值得注意的是a标签使用后会产生下划线的状态，因此常需要用css等样式进行取消下划线，
另一个比较重要的是 CSS中的链接选择器 即a:visited、a:hover、a：link、a:active.
| 属性 | 说明 |
| href | 链接地址（可以是本地地址或网络地址）# 为空地址，也会跳转到顶部 |
| target |
_self 覆盖原网页 _blank 跳转到新网页 |
| rel | 标签的 rel 属性用于指定当前文档与被链接文档的关系。 |
img标签是用来加载图片的标签和a标签一样可以需要提供本地地址或网络地址，主要属性如下：
| 属性 | 说明 |
| src | 链接地址 |
| alt | 图片中的 alt 属性是在图片不能正常显示时出现的文本提示。 |
| title | 图片中的 title 属性是在鼠标在移动到元素上的文本提示。 |
| width | 图片的宽度 |
| height | 图片的高度 |
audio标签是在页面中插入音频，目前只支持mp3，wav，ogg三种格式，与video标签相同必须要加入 control属性才能播放。
| 属性 | 说明 |
| src | 音频的路径 |
| control | 显示播放的控件 |
| autoplay | 自动播放 |
| loop | 循环播放 |
video标签是在页面中插入视频，功能基本与音频相似，但自动播放在谷歌浏览器中需要配合 muted实现静音播放。
3.Form表单
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签 通常以action，表示的是将要提交的表单向何处发送表单数据，
input类
在表单中有很多可以添加的属性，例如输入字段是禁用，只读，最大输入长度，最短输入长度等，但平时只需要记住一些基础的，其他的用到再去查找即可。这里关于input有个小技巧，当鼠标点击焦点时，边框会变成黑色非常丑，可以在css中使用outline:none将点击后的边框的黑色取消
另外可以在标签外包裹 label标签 作用是在 label 元素内点击文本，就会触发此控件。
| 类型 style | 说明 | 常规属性 |
| text | 文本框 | placehoder 框中预设文字 |
| password | 密码框 | placehoder 框中预设文字 |
| radio | 单选框 | name值需要设置一样 类似于编组 |
| checkbox | 复选框 | name值需要设置一样 |
| search | 搜索框 | value 框中预设文字 |
| date | 日历 | 无 |
| file | 上传文件 | mutiple 多文件上传 |
| submit | 提交按钮 | 无 |
| reset | 重置按钮 | 无 |
| button | 普通按钮 | 无 |
button类
button类中的几个其实与input基本重复选择哪个都可以
| style | 说明 |
| submit |
提交 |
| reset | 重置 |
| button | 普通按钮 |
| menu | 菜单 |
其他类
| 标签名 | 说明 | 属性 |
| textarea | 文本框 | cols 规定了可见的宽度 rows规定了可见的行数 |
| select | 下拉菜单 | option 下拉菜单的每一项 selected 默认被选择 |
| lable | 包裹input标签 | 使用方法①: 2．在表单标签上添加id属性 使用方法②: 2.需要把label标签的for属性删除即可 |
常见的字符实体
4、 表格
表格由 合并单元格： rowsoan和colspan 按照保留左上原则，先删除掉需要被合并的单元格，再在需要拉伸的单元格上加入属性并输入数字。不可以跨thead、tbody、tfoot合并 列表在实际场景中常常用作于各种导航栏、菜单栏、卡片区等、因此是非常重要的，通常会使用无序列表包裹a标签等进行设计，无序列表浅的小圆点可以使用Css样式去掉。 之前有讲过一些语义化标签，这里主要是介绍一些在布局中常用的： 正如刚开始所讲，html作为网页的骨架是第一步所需要的了解的，当骨架搭建完毕势必要进行下一步过程，即使用CSS为当前骨架填血加肉，那么CSS是什么呢？ CSS 指的是层叠样式表(Cascading Style Sheets)。主要是为了解决内容与表现分离的问题，我们可以通过外部样式表从而大大的提高工作效率。 CSS的样式是非常强大的，可以对于我们所创建的HTML各个标签进行更改，甚至是可以将各种样式进行层叠展示，甚至可以在网页中做出特效、进行绘画。 首先我们需要知道如何引入CSS样式表及CSS的语法形式：CSS样式表有以下三种方式进行引入，即内嵌式：cSS写在style标签中,style标签虽然可以写在页面任意位置，但是通常约定写在head标签中。外联式：写在一个单独的.CSS文件当中，可以用link引入。 行内式：CSS写在style属性中。 那么该如何选择到html中的标签呢？这里就需要介绍到选择器了，CSS中的选择器有很多种，在不同的情况下使用不同的选择器才能游刃有余的选择到需要的html标签。 选择器优先级：!important>行内元素>类选择器>id选择器>标签选择器>通配符选择器>继承 通配符选择器：使用通配符 * 进行通用的选择，即选择网页内的所有元素通常会初始化浏览器的margin和padding值。* { margin: 0; padding: 0;} 标签选择器：选择所有的标签，可以与其他选择器配合使用。通常会选择某个类下的所有标签例如 类选择器:这个是最常见的选择器，即在行内为某标签添加class类名，就可以在css样式表内使用 .X 的方式选中。例如 .nav{ color："red"} id选择器：id选择器与类选择器方法类似，但在CSS中并不常见，同样是在行内加入 id名 后配合JS加特效。用 # X的方式选中，例如 #nav{ color："red"} 属性选择器：想让带有某属性的标签使用选择器例如：a[title] { color: green;} 子代选择器：仅将父代的子代选中，与后代选择不一样，注意区分 写法是 X>Y 例如 li>a {text-decoration: none;} 后代选择器：可以将某标签的所有后代全部选中，包括子代的子代的标签。写法是 X Y 例如 li a {text-decoration: none;} 并集选择器:并集与数学中的并集是一个意思，即将两者都选中。写法是 X，Y 交集选择器：交集与数学中的交集是一个意思，即将两者相同部分选中。写法是 XY 相邻同胞选择器：即相同父亲下的两个紧挨着的标签，例如p下的第一个li和第二个li 写法 X+Y 后续同胞选择器：即相同父亲下所有的同胞的标签。例如p下的第一个li和剩下的所有li 写法 X~Y 链接选择器：主要针对a链接的四种状态，a:visited、s:link、a:hover、a:active 的选择器 写法就是a：hover{color：“red”} 伪元素选择器:对于某标签的伪元素进行选择，即a::before或 a:after等。 表单伪类选择器：当某表单的元素收到了某种对应的匹配产生的选择。例如在input类型为text的文本框中进行点击，即点击后具有焦点。则可以这样选中 input:focus 结构伪类选择器：选择一堆结构相同的元素中的一个或几个。例如一个ul中有很多li标签，那么选中第一个元素即可这样表示。 ul:first-child 等如下图。 在我们能够引入CSS样式并且可以通过各种方式选择html标签后就可以正式开始学习代码啦！！！ 在使用CSS样式时通常会在PC、移动端进行布局因此为了方便布局通常会引入flex、rem、vw等布局方式，对于新兴的一些布局方式或CSS3的新的样式，旧版浏览器是不具备兼容性的，这个问题体现在IE浏览器居多，部分企业要求兼容到最低IE8就可以了，但仍需考虑到IE6/IE7的兼容问题，这也是布局里 最为头疼的问题，我这里就举几个常见的案例 1、不同浏览器自带的margin和padding 2、部分浏览器img图片之间有间距 3、在IE浏览器中的块级元素设置margin时在用到float时会遇到各种小bug 4、ie6中，父级元素浮动以后，内部元素内容撑不开宽度 5、文字在各个浏览器高度不一样问题 这里归纳总结的实际上是一些常见的问题，实际开发过程中各种离奇的bug都会有只能具体问题具体分析了，其实大多数问题都已经用通用css样式表解决掉了，因此只需要遇到问题去查百度即可。 元素显示有三种形式 即块级元素、行内元素、行内块元素，三者可以通过display进行互相转换 块级元素(block)特性： 内联元素(inline)特性： 块级元素主要有： 内联元素主要有： 可变元素(根据上下文关系确定该元素是块元素还是内联元素)： CSS中块级、内联元素的应用： 利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。 主要用的CSS样式有以下三个： 在CSS中有绝对长度和相对长度的区别，绝对长度即固定的不论是任何显示屏显示都是这个长度，但相对长度是把参照物看做是显示屏或浏览器，相对于他们的长度。绝对长度最常用的就是px即像素，还有deg角度等。下面主要是相对长度在浏览器的响应式布局等有很大作用 CSS中的颜色有三种写法，一种是直接写英文单词例如black，red等，一种是直接写对应的RGB或RGBA,rgb指的是红色，绿色，蓝色三原色，a是alpha即透明度，但实际开发中常常采用第三种也就是16进制的写法。因为可以在切图软件中吸取16进制颜色比较精准。 16进制的颜色可以是最低值是0（十六进制00）到最高值是255（十六进制FF）3个双位数字的十六进制值写法，以＃符号开始。 字体及其样式 这里在别人的博客上找到一张图这里很好的说明 了height和line-hheight的区别 及vertical-align的位置区别，vertical-align有以下几种属性即 basealine，middle，text-top，text-bottom等，实际上文字的对齐方式是按照这几种方式进行对齐的。 以下是字体衬线和无衬线及等宽的区别 文本及其样式 ltr 左到右 rtl 右到左 inherit 继承父元素 normal 正常值 length 定义值 inherit 继承父元素 等于父元素时 居中效果 等于 1时取消上下边距即等于字体高度 none 默认无 underline 下划线 overline 上划线 line-through 文本中间一条 h-shadow 水平距离 v-shadow 垂直距离 blur 模糊度 color 颜色 top 上 center 中 bottom 下 多行文字省略号案例 vscode的字体安装： 首先需要获取字体这里推荐：JetBrains Mono 搭配连写设置 非常舒服 比较常用的字体有： 下载好字体后 现在电脑本地安装，如下步骤 首先在电脑c盘搜索 fonts 文件夹 或默认在 C:\Windows\fonts 然后将文件夹 为tff/oft 内的文件直接复制进去即可。这样本地字体就安装成功了 接下来就是vscode中设置， 在文件/首选项/设置中进行设置 （或ctrl+,）需要设置的地方有两个 一个是 family即字体类型把我们刚才设置的字体放在第一位。 如果需要设置连写还需要进入到 setting.json中设置 最后一步！！！ 重启电脑 只重启vs 是没有变化的. 也可以以下列方式简单设置： 在vscode配置中搜索 需要在配置中将连字打开（设置中搜索 webstorm设置 这个比较简单 在电脑安装好字体后可以直接去设置->编辑器->字体 就可以直接修改字体与连写 上面的字体设置是更改本地即vscode的字体样式如果需要改变浏览器显示的字体需要使用 font-family属性,但如果客户的电脑没有这个字体就会显示其他字体。此时我们便可以使用@font-family 来设置字体这种方式即便用户没有字体也可以显示，实际上就是调用了我们提供的字体。 如下图所示这是正常的字体显示结果 如下是使用了我们定义的字体 这里我们首先定义 @font-face 里的内容 再用 font-family 使用该字体。 font-family 这个属性的值为自定义的名字 后面要通过这个名字来使用它 src src顾名思义就是输入字体的地址 format 这个值比较重要，是代表了该字体的格式通常有如下几种 注意format里填入的是 前面大写的内容，括号里的为前面url对应的后缀。format里的内容必须用 引号 括起来，忽略大小写 1）TureTpe(.ttf)格式： .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】； 2）OpenType(.otf)格式： .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】； 3）Web Open Font Format(.woff)格式： .woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】； 4）Embedded Open Type(.eot)格式： .eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】； 5）SVG(.svg)格式： .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。 兼容性：有的浏览器如ie 会不兼容因此通常会将多种格式一起写出来如下所示 转载自 CSS3 @font-face_@font-face, 会员专栏 教程_W3cplus css中的背景可以由颜色、图片、渐变的形式体现，用处非常广泛包括body，导航，按钮等都需要用到 backgorund 。 url 图片地址 liner-gredient 渐变 x% y% xpx ypx repeat 重复 no-repeat 不重复 repeat-x x轴重复 repeat-y y轴重复 颜色、图片和渐变写法 简便写法 实例：给网页添加背景图片 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 盒模型分IE盒模型和标准盒模型 ie盒模型元素宽度width=marrgin+padding+content 标准盒模型元素宽度width=content 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 关于盒模型的一些代码： 盒模型引起的问题： 1、正常状况，即两个盒子水平布局的间距就是两个盒子的margin的和的值 2、合并状况，即两个块级元素盒子垂直布局上下margin-top会合并，间距为二者的最大值，解决办法是避免，只使用一个margin。 3、塌陷状况，互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素向下移动，解决办法有以下几种； 1.给父元素设置border-top或者padding-top (分隔父子元素的margin-top) 內减问题：由于增加padding导致盒模型和设置的尺寸不一样，一个办法是手动內减，即将尺寸改成正常值，二是使用box-sizing：border-box； 继承性 继承性是CSS三大特性之一，字面理解意思就是子元素能够继承父元素的特性，例如给ul设置list-style为none 那么li前方的小圆点就会消失，或div套div 给外部的div设置color属性，则子元素也会有color属性。在css里面text-、font-、line- 开头的属性都是可以继承的。具有继承属性的标签在浏览器检查时会显示出来。 特例：a标签不能继承颜色 h标签不能继承字体大小 div标签不能继承高度，但反过来子div的高度可以撑大父元素。 层叠性 指多种CSS样式的叠加。是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。 2、样式不冲突，不会层叠 优先级 优先级之前在将选择器时有提到过即： !important>行内元素>类选择器>id选择器>标签选择器>通配符选择器>继承 注意点: 优先级权重计算： 可以通过相加计算出权重值：如下所示 body为标签权重 1 .first 为类选择 即权重为10 CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。早期用于图文环绕，现在用户布局。 浮动的特点 1. 浮动元素会脱离标准流(简称:脱标)，在标准流中不占位置 浮动导致的问题： 1、子元素浮动导致父元素脱标，此时可以给父元素增加高度或增加浮动或使用box-sizing：border-box 清除浮动 含义:清除浮动带来的影响 1、直接给父元素设置高度 特点: 2、额外标签法 操作: 3、单伪元素清除法 使用伪元素代替标签 4、双伪元素清除法 优点:项目中使用，直接给标签加类即可清除浮动 5、直接设置overflow：hidden 6、BFC盒子 创建BFC方法: 1.标准流 静态定位：默认值 子绝父相 子元素使用绝对定位，父元素使用相对定位常用于字体图标等地方。 字节父相案例：水平居中 元素层级问题 不同布局方式元素的层级关系: 1.vertical-align属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 如下图所示，baseline为默认样式位于基线位置若想要让文本底与基线对齐可以使用text-bottom属性，该属性除在文字对齐方面有效果，同时对于以下几种情况也同样有效。 1．文本框和表单按钮无法对齐问题 2.鼠标光标样式 cursor 3.边框圆角 border-radius 单位可以是px也可以是%，每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。 4、溢出部分显示效果overflow 溢出部分:指的是盒子内容部分所超出盒子范围的区域 使元素隐藏的方式有三种： 5、边框合并 border-collapse:collapese; Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 思考︰使用perspective透视属性能否呈现立体图形? 13、动画 使用动画步骤：①使用 @keyframes 定义动画 ② 使用animation使用动画 代码如下 若想要控制动画 那就需要在animation上进行设置。animation对应的属性如下： 以上的各种参数动画名称，时长，延迟时间是见名知意的没有多余的参数，主要研究一下几个参数。 1、速度曲线：animation-timing-function 指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下： 逐帧动画做法：需要有一个逐帧图如下图所示。然后计算图中有多少重复的元素，将个数填入steps（）； 2、重复次数animation-iteration-count 3、动画方向animation-direction 4、执行完毕时状态animation-fill-mode 在日新月异发展的今天移动端的使用情况已经远远超过了PC端，因此我们的技术也应该更新迭代，找到针对于移动端的布局模式。据观察发现PC端的网页常常会有版心两侧空白的情况，但移动端基本不会有，都是紧贴着移动端两侧。并且每种类型移动端类型不一样，大小就会有很大的差别，例如ipad和ihone6，因此就要有适合每个移动端的可以自适应的弹性布局， 物理分辨率是生产屏幕时就固定的，它是不可被改变的 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。在容器中有两条轴，一条是主轴一条是交叉轴又叫侧轴。 当使用了flex布局时，子元素的float、clear和vertical-align属性将失效。 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 容器的属性 1、flex-direction 可以更改主轴的方向，之前默认是横向的，可以改成纵向的经常和justify-content 等一起使用将容器内的元素居中对齐，这里最常用的就是将横向的改为纵向的即flex-direction ：column； 如下图的红框内的元素就需要居中对齐，此时应先将主轴方向改变，再将三者进行对齐排列，再将整体居中，但注意此时的轴向已经变了。 2、flex-wrap 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。在弹性布局内，即便是空间不够，也会在一行排列这时候各子元素的宽度就会被压缩。如果想让他门换行排列就需要使用这个属性、 3、justify-content justify-content属性定义了项目在主轴上的对齐方式。 4、align-items align-items属性定义项目在交叉轴上如何对齐 5、align-content align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 虽然在弹性布局上已经有了flex的解决办法。但对于具体的属性值例如说宽高等还是需要更细节的办法解决，于是便引出了移动适配的思路。虽然听着移动适配很高大上，实际上就是把PC端的px单位换成了rem等，这个rem就可以解决掉在不同的移动端尺寸的自适应。 目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10，这里就需要用到媒体查询的方式进行转化。但不同的移动端的html基本字号也不相同，因此可以引进flexble.js 这是手淘开发的一个用来适配移动端的js框架，以后只需要引入它便可以直接使用rem的适配方式、 对于网页宽度为375px的网页来说，它的HTML标签的字号就是37.5，我们再用需要的宽度除以这个数便可以得到rem的对应尺寸。写法如下 以此类推，vw和vh也是类似的原理，只是它们是把网页等分成100份，但vw和vh是不需要引入js的。vw指的是相对于网页宽度的1/100，vh是高度的1/100，二者不能混合使用， less作为一门CSS扩展语言，也就是说CSS预处理器。（Leaner Style Sheets）简称less，它只不过是为css新增这些的功能，比如说：变量、函数、作用域等等。它的优点是：更具有维护性、扩展性等，可以降低了维护的成本，根据按这样的话，那么less可以让我们写更少的代码做更多的事情。 注释 less的注释语法类似c语言等编程软件可以使用 // 快捷方式是 ctrl +/ 加减乘除运算 自动生成后代选择器 定义部分属性变量 如图所示可以定义一个变量记录3.75vw，使用时只需要用这个变量即可格式为： 导入、导出生成css文件 当书写完less文件后，可以保存那么在当前文件夹会立马生成一个.css的文件，如果想将它导入到指定文件夹有两种方式一个是使用EasyLess插件 另一个是使用 //out 的方式 ，必须写在第一行 另外还有禁止导出 Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。同时，Bootstrap 还是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。作为一个框架，它和jQuery EasyUI、WeUI一样，助力于前端开发。简而言之，使用Bootstrap让前端开发变得简洁高效。 bootstrap 中文官方网址为：起步 · Bootstrap v3 中文文档 | Bootstrap 中文网 。 如下图所示会有两个下载按钮，第一个是我们所用的，第二个是源码，如需要进行学习可以下载第二个。 在引入时需要选择这两个文件引入，也可以引入不带 min 的文件，二者的区别是带min的是压缩过的，会使浏览器运行速度更快。 注意：这里引入js文件之前必须 引入 Jquery文件！！！ 使用步骤 bootstrap栅格系统： 例如：当网页宽度小于768时一行要排列1个div。大于768px小于992px 要排2个，大于992小于1200也是2个，大于1200要排4个 那么代码就如下写法； bootstrap先介绍到这里 只是简单的介绍下。基础篇到这里基本就完结了。非常感谢大家的观看，希望能够给个点赞关注.... 标签来定义。每个表格均有若干行（由
标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
标签名
说明
table
表格整体包裹下面标签
tr
行
td
列
th
标题行
caption
大标题
thead
表格的头部
tbody
表格的主体
tfoot
表格的底部
5、列表
列表名称
主体
成员结构
无序列表
ul
li
有序列表
ol
li
自定义列表
dl
dd、dt
6、语义化标签
标签名
语义
header
网页的头部
footer
网页的底部
nav
网页的导航栏
asider
网页侧边栏
section
网页区块
article
网页文章
CSS基础
CSS简介
CSS代码
16种常用选择器
.nav ul li a{ color："red"} a:visited {
color: green;
}
a:hover {
color: yellow;
}
a:active {
color: red;
}
a:link {
color: blue;
}
input:focus {
background-color: red;
} input:disabled{
border:3px solid red;
}
input:enabled{
border:3px solid green;
}
input:required{
border:1px solid red;
}
input:optional{
border:1px solid green;
}
input:checked+label{
color: blue;
} ul li:first-child{
color:red;
}
ul>li:first-of-type{
color:red;
}
/* 倒数的第3个 */
ul > li:nth-last-of-type(3) {
color: red;
}
/* 从第二个开始 */
ul li:nth-child(n+3){
color: red;
}
/* 倒数三个 :not 排除掉可连续写*/
ul li:nth-last-child(-n+3):not(:nth-last-child(2)){
color: red;
} 
1、浏览器兼容问题
在日常工作中公司一般会给base.css通用文件，其中就有消除margin和padd的代码即 *{margin：0；padding：0}
img属性本身为行内元素是不会有间距的，但部分浏览器会有bug，因此会采用 浮动 float的方式解决。
例如magin比原来设置的要大换行、双边距等 这时将block转换成inline是个不错的解决方式
将子元素设置浮动即可
这里的高度实际上是行高的区别，无论是哪款浏览器文字本身的高度和行高是有区别的，因此只需要统一设置行高即可。font-size: 14px;
line-height: 14px;2、元素显示模式
3、常见单位
单位
相对长度 描述
em
它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
rem
rem 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。例如375宽的移动端 1rem=37.5
vw
viewpoint width，视窗宽度，1vw=视窗宽度的1% 例如375宽的移动端 1vw=3.75
vh
viewpoint height，视窗高度，1vh=视窗高度的1% 例如667高度的移动端 1vh=6.67
4、颜色
5、字体和文本
字体样式
说明
属性
font—size
字体大小
单位px 谷歌默认16px
font—weight
字体粗细
400~700 正常 normal 粗体 bold
font—style
字体样式
默认值 normal 斜体 Italy
font—family
字体类型
无衬线字体 sans-serif 衬线字体 serif 等宽字体 monospace
font连写格式 size->weight->style->family
属性
说明
属性值
color
字体颜色
无
diection
文本方向
letter-spacing
字符间距
line-height
设置行高
text-align
对齐文本
text-decoration
文本修饰
text-indent
文本缩进
无
text-shadow
文本阴影
vertical-align
垂直对齐
word-spacing
文字间距
无
字体安装：
'JetBrains Mono','Fira Code',Menlo,Monaco, 'Courier New', monospace
"editor.fontLigatures": true,
Editor: Font Family 并设置以下值。'JetBrains Mono','Fira Code',Menlo,Monaco, 'Courier New', monospace
fontLigatures关键词）"editor.fontFamily": "'Fira Code','JetBrains Mono'",
"editor.fontLigatures": true,
@font-face
@font-face {
font-family:"codelee";
src: url(./font/CascadiaCode-Light.otf) format('OpenType');
}
h2{
font-size: 50px;
font-family:codelee;
}
@font-face {
font-family: 'NeuesBauenDemo';
src: url('../fonts/neues_bauen_demo-webfont.eot'); /*ie9+*/
src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'), /*ie6-ie8*/
url('../fonts/neues_bauen_demo-webfont.woff') format('woff'), /* chrome firefox*/
url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'), /* chrome firefox opera safari android ios 4.2+ */
url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg'); /* ios 4.1- */
font-weight: normal;
font-style: normal;
6、背景
属性
说明
属性值
backgrond—color
背景颜色
transparent 透明
backgrond—image
背景图片
backgrond—position
相对位置
backround—reapeat
是否重复
background-size
背景图像大小
contain; 缩小图片来适应元素的尺寸（保持像素的长宽比）；
cover; 扩展图片来填满元素（保持像素的长宽比）；
100px 100px; 调整图片到指定大小；
50% 100%; 调整图片到指定大小，百分比相对于包含元素的尺寸。 div{
width: 100px;
height:100px;
/* 演示效果 只能用一个效果 */
background-image:url(./image.jpg);
background-color: red;
background: linear-gradient(35deg,red,green 20px,yellow);
} div{
width: 100px;
height:100px;
/* 背景图片 */
background:url(./image.jpg) no-repeat;
/* 精灵图常用 */
background:url(./image.jpg) -20px -30px;
} 7、盒模型
div{
height: 50px;
width: 100%;
background-color:gainsboro;
padding: 20px;
margin: 10px;
border: 1px solid black;
}
2.给父元素设置overflow: hidden
3.转换成行内块元素
4.设置浮动8、三大特性
原则：1、样式冲突，遵循的原则是就近原则，即CSS的书写位置。
1. !important写在属性值的后面，分号的前面!
2. !important不能提升继承的优先级，只要是继承优先级最低!3．实际开发中不建议使用!important 权重 !important>行内 1000>id 100> class 10> 标签 1 >通配符 0 >继承
body>.first{ 11
color: red;
}
.first{ 10
color: green;
} 9、浮动和清除浮动
属性
说明
left
元素向左浮动。
right
元素向右浮动。
none
默认值。元素不浮动，并会显示在其在文本中出现的位置。
相当于从地面飘到了空中
2．浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4．浮动元素会受到上面元素边界的影响
5.浮动元素有特殊的显示效果
.一行可以显示多个
·可以设置宽高
影响:如果子元素浮动了，此时子元素不能撑开标准流的块级父元素原因:
子元素浮动后脱标→不占位置目的:需要父元素有高度，从而不影响其他网页元素的布局
·优点:简单粗暴，方便
·缺点:有些布局中不能固定父元素高度。如:新闻列表、京东推荐模块
1.在父元素内容的最后添加一个块级元素
2．给添加的块级元素设置clear:both
特点:
缺点:会在页面中添加额外的标签，会让页面的HTML结构变得复杂
优点:项目中使用，直接给标签加类即可清除浮动.clearfix:after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
BFC：块格式化上下文(Block Formatting Context) 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
1. html标签是BFC盒子
2．浮动元素是BFC盒子
3.行内块元素是BFC盒子
4. overflow属性取值不为visible。如: auto、hidden.
BFC盒子常见特点:
1.BFC盒子会默认包裹住内部子元素（标准流、浮动)→应用:清除浮动
2. BFC盒子本身与子元素之间不存在margin的塌陷现象→应用:解决margin的塌陷3.10、定位
1．块级元素独占一行→垂直布局
2．行内元素/行内块元素一行显示多个→水平布局
2.浮动 float
1.可以让原本垂直布局的块级元素变成水平布局
3.定位 position
1.可以让元素自由的摆放在网页的任意位置
2.—般用于盒子之间的层叠情况
定位方式
属性值
静态定位
static
相对定位
absolute
绝对定位
relative
固定定位
fixed
相对定位：相对于自己原来的位置的定位 未脱标
绝对定位：相对于父级的位置 完全脱标
固定定位：固定在某一位置，完全脱标.father{
position: relative;
}
.son{
position: absolute;
top:20px;
left:20px;
}
1.子绝父相
2.先让子盒子往右移动父盒子的一半
.left: 50%
3.再让子盒子往左移动自己的一半
普通做法: margin-left:负的子盒子宽度的一半
缺点:子盒子宽度变化后需要重新改代码
优化做法: transform: translateX(-5g%).father{
width: 100px;
height: 100px;
position: relative;
}
.son{
width: 30px;
height: 30px;
position: absolute;
top:0px;
left:50%;
transform: translateX(-15px);
}
标准流<浮动<定位
不同定位之间的层级关系:
相对、绝对、固定默认层级相同
此时HTML中写在下面的元素层级更高，会覆盖上面的元素，可以使用z-index来调节层级11、装饰
值
描述
baseline
默认。元素放置在父元素的基线上。
sub
垂直对齐文本的下标。
super
垂直对齐文本的上标
top
把元素的顶端与行中最高元素的顶端对齐
text-top
把元素的顶端与父元素字体的顶端对齐
middle
把此元素放置在父元素的中部。
bottom
使元素及其后代元素的底部与整行的底部对齐。
text-bottom
把元素的底端与父元素字体的底端对齐。
2. input和img无法对齐问题
3. div中的文本框，文本框无法贴顶问题
4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
5．使用line-height让img标签垂直居中问题
值
描述
default
默认光标（通常是一个箭头）
auto
默认。浏览器设置的光标。
crosshair
光标呈现为十字线。
pointer
光标呈现为指示链接的指针（一只手）
move
此光标指示某对象可被移动。
.father{
width: 100px;
height: 100px;
background-color: violet;
border-radius: 50%;
}
场景:控制内容溢出部分的显示效果，如:显示、隐藏、滚动条......
属性名: overflow
visible
默认值。内容不会被修剪，会呈现在元素框之外。
hidden
内容会被修剪，并且其余内容是不可见的。
scroll
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
1、如上的overflow:hidden 可以使元素本身隐藏，并且占位置
2、display：none 也是隐藏元素本身，但不占位置
3、可以使用 opcity 是元素变透明
value
指定不透明度。从0.0（完全透明）到1.0（完全不透明）
inherit
Opacity属性的值应该从父元素继承
6、文本阴影 text-shadow
h-shadow
必需。水平阴影的位置。允许负值。
v-shadow
必需。垂直阴影的位置。允许负值。
blur
可选。模糊的距离。
color
可选。阴影的颜色。
7、盒子阴影 box-shadow
值
说明
h-shadow
必需的。水平阴影的位置。允许负值
v-shadow
必需的。垂直阴影的位置。允许负值
blur
可选。模糊距离
spread
可选。阴影的大小
color
可选。阴影的颜色
inset
可选。从外层的阴影（开始时）改变阴影内侧阴影
12、平面空间转换
通过transform-origin可以改变原点
ranslate(x,y)
定义 2D 转换。
translate3d(x,y,z)
定义 3D 转换。
translateX(x)
定义转换，只是用 X 轴的值。
translateY(y)
定义转换，只是用 Y 轴的值。
translateZ(z)
定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)
定义 2D 缩放转换。
scale3d(x,y,z)
定义 3D 缩放转换。
scaleX(x)
通过设置 X 轴的值来定义缩放转换。
scaleY(y)
通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)
通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)
定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)
定义 3D 旋转。
rotateX(angle)
定义沿着 X 轴的 3D 旋转。
rotateY(angle)
定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)
定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)
定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)
定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)
定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)
为 3D 转换元素定义透视视图。
答∶不能，perspective只增加近大远小、近实远虚的视觉效果。
/* 一 定义动画：200 到 500*300 到 800*500 */
/* 百分比指的是动画总时长的占比 */
@keyframes change {
0% {
width: 200px;
}
50% {
width: 500px;
height: 300px;
}
100% {
width: 800px;
height: 500px;
}
}
.box {
width: 200px;
height: 100px;
background-color: pink;
/* 二 使用动画 */
animation: change 1s;
}
animation:动画名称、动画时长、速度曲线、延迟时间、重复次数、动画方向、执行完毕时状态;
linear
动画从头到尾的速度是相同的。
ease
默认。动画以低速开始，然后加快，在结束前变慢。
ease-in
动画以低速开始。
ease-out
动画以低速结束。
ease-in-out
动画以低速开始和结束。
steps(int,start|end)
n
一个数字，定义应该播放多少次动画
infinite
指定动画应该播放无限次（永远）
normal
默认值。动画按正常播放。
reverse
动画反向播放。
alternate
动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse
动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
值
描述
none
默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards
在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards
动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
both
动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
移动端
flex布局
逻辑分辨率是由软件（驱动)决定的
因为有两种分辨率因此，在做编程时就要考虑选择哪种分辨率合适，事实上现在大多采用的是逻辑分辨率。我们在拿到设计师效果图时应该使用二倍图来观看。
flex声明方式：在父元素中使用 disply：flex即可//普通盒子
.box{
display: flex;
}
//行内元素
.box{
display: inline-flex;
}
//webkit内核浏览器
.box{
display: -webkit-flex;
display: flex;
}
值
说明
row（默认值）
主轴为水平方向，起点在左端。
row-reverse
主轴为水平方向，起点在右端。
column
主轴为垂直方向，起点在上沿。
column-reverse
主轴为垂直方向，起点在下沿。
值
说明
nowrap（默认）
不换行
wrap
换行，第一行在上方
wrap-reverse
wrap-reverse：换行，第一行在下方
值
说明
flex-start
左对齐
flex-end
右对齐
center
居中对齐
space-between
两端对齐
space-around
每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。
space-evenly
每个项目间距相等
值
说明
flex-start
交叉轴的起点对齐
flex-end
交叉轴的终点对齐
center
交叉轴的中点对齐
baseline
项目的第一行文字的基线对齐
stretch（默认值
如果项目未设置高度或设为auto，将占满整个容器的高度。
值
说明
flex-start
与交叉轴的起点对齐。
flex-end
与交叉轴的终点对齐。
center
与交叉轴的中点对齐。
space-between
与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around
每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。
stretch（默认值）
轴线占满整个交叉轴。
移动适配
rem、vw/vh
.father{
width: (100/37.5)rem;
height:(100/37.5)rem;
background-color: violet;
}.father{
width: (100/3.75)vw;
height:(100/3.75)vw;
background-color: violet;
}less语法
当然对于多行也可以采用 /* 注释内容*/ 的方式快捷键是: shift + alt + A// 首部区域
header {
/* width: 100%;
background: #fff; }*/
在css中是不可以使用加减乘除作为值传递的，然而less是可以使用的，因此才可以用移动适配的方式
可以导出就可以导入，导入的方式如下图所示 语法是 @important ‘ ’ ；
如下图所示
bootstrap框架
如下图所示有css，js和fonts三个文件夹，css和js就是我们所需要引入的文件位置，fonts所存的是需要进入的字体图标
接下里就可以开始使用了
bootstrap自动将网页划分成 12份
在做响应式布局时可以根据栅格系统进行编程，即当网页宽度小于768px时该元素站的份数，如下图所示
你可能感兴趣的:(前端,css3,html5)