前端

1.1前端方向

所谓前后端本身就是 Web 开发中，为了区分在服务器上运行的和在浏览器上运行的东西而出现的定义。

前端开发的体系划分，在我看来，就是两种，第一种就是ui实现的，不重业务逻辑，动态交互的。第二种就是各种业务逻辑，动态交互，数据处理的。这是很明显区分你要做什么任务，以及开发时的顺序的。

一般的我们说前端都是小前端，就是web端。

大前端一般是指web端，小程序端，移动端（Android，iOS），Windows端，macOS端，Linux端

1.2前端的技术

前端能做什么？

前端能做你上网看到的所有页面。哈哈。

优秀的程序员=兴趣+正确的方法+勤奋

Jquery:简化js操作

Bootstrap基于jQuery和css的框架，做响应式的网站（根据分辨率的变化而变化）非常方便，

框架则是提供一套解决方案，你得按我的规定来安排代码结构，它是随着前端功能的增强而产生的，对于往应用方向发展（也就是越来越像客户端）的web产品就很必要做前端架构这件事，它开始以模型为中心，DOM操作只是附加，通过关注点分离鼓励改进应用程序。

web标准的核心理念就是结构标准、样式标准和行为标准，提倡结构、表现和行为相分离，即HTML-结构、CSS-表现、JavaScript-行为 分离。

经常给自己的CSS等代码简化，相同的或者相似的两个并集选择器合在一起，不相同的再区分写出来

同步按你的代码顺序执行，

异步不按照代码顺序执行，异步的执行效果更高：

同步（Synchronization）：任务顺序执行，在上一个任务未执行完成之前下一个任务等待执行。

异步（Asynchronous ）： CUP暂时搁置当前任务，等到主线程任务执行完成，再来响应该任务。

1.3标签的内外边距

企业中要根据标签来判断写不写内外外边距，一般不用*｛margin：0 ；padding：0；｝*

为0，单位可要可不要

div没有内外边距，是默认浏览器给的。

1.4一些好用的快捷键

div*3再按tab可以生成三行div双标签

ul>li[class=‘hh’]{我是li标签}*10

按alt选中不同地方，可以写多行相同文字，

ctrl+d选中相同的，切换到下一个相同的

如果有父子级关系的标签，可以用>。例如ul>li就可以了

如果有兄弟关系的标签，用+就可以了。例如 div+p

如果生成带有类名或id名字的，直接写.demo或#two tab键就可以了，

.top+.banner+(.main>.left+.right+).footer按下tab会变

     <div class="top"></div><div class="banner"></div><div class="footer"><div class="main"><div class="left"></div><div class="right"></div></div></div>

如果生成的div类名是有顺序的，可以用自增符号$，从1开始排序。

如果想要在生成的标签内部写内容可以用{}表示

input:submit会变

log 后按tab，会出现console.log。

例如w200，按下tab键就可以生成width: 200px;

例如lh26，按下tab键就可以生成line-height: 26px;

1.5一些好的代码

background-size:cover;box-sizing:border-box;font-size:0;**间距也是文字的一种**

style=“background: url(“images/index/15785568884650.jpg”) 0% 0% / 100% 100% no-repeat;”

setTimeout(func,1000);

setInterval(function(){clock()},1000);

background:url(images/2.jpg)no-repeat center/100% 100%;

setTimeout (‘test(参数)’,1000)； //1秒后执行

注：如果不小心写成了setTimeout (test(参数),1000)；test方法就会立即执行哦。

timer = setInterval(autoPlay, 1500);

clearInterval(timer)；

background:url(images/1.png) no-repeat left center;//背景图片不平铺左居44444中对齐

border-radius:75px;//让border-radius值等于高度的一半

border-radius:50%;

border:1px solid #000;

margin:0 auto;//让盒子居中水平居中对齐，更简洁的代码margin:0;

margin:auto;//让盒子水平垂直居中的常用代码之一

display: table-cell;  /* 可以被vertical-align: middle限制*/
vertical-align: middle;      // 里面内容为居中对齐，写父盒子里

text-align:center;//文字水平居中

line-height:24px;//24px等于盒子的高度，让盒子内的文字垂直居中

overflow:hidden;

1.如何让文字垂直居中？
在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。（line-height:50px；）
2.如何去除a标签自带的下划线？
text-decoration: none; 取消下划线(取消文本装饰)

ul{list-style:none;}

border: 4px double #000000;//定义双线边框，两条线及其间隔宽等于指定的border-width值

backface-visbility:hidden;

     我们就给它的父级添上相对定位，和最小宽度，最小高度避免全部都皱成一团width: 100%;      min-width: 810px;      height: 100%;      min-height: 600px;

br和hr的区别：

标签在 HTML 页面中创建一条水平线。
可插入一个简单的换行符。

cursor:pointer;//鼠标变小手

firworks测量工具

1.6给网页标题加小图标（网站头像）

找网页图标可以去图标字体（如阿里图标库）上去找

通过查询资料，网络上有两种写法(写在head标签内)：

语句一：<link rel="shortcut icon" href="图片地址（一般是favicon.ico）" />
其中favicon.ico需放在根目录下面（不提倡用这种方法，因为图片没有授权，违反了W3C标准，）
语句二：<link rel="icon" href="图片地址" type="image/gif" />

静态的图标文件使用：

标题栏：
<link rel="icon" href="ico地址" type="image/x-icon">
收藏夹：
<link rel="shortcut icon" href="ico地址" type="image/x-icon">注意：图标要用 16*16 色的。。。(保证了兼容性，无论在哪个地方都可以显示，也可以是32*32)

动态图 gif（动画也是16*16）使用：

<link rel="icon" href="1.gif" type="image/gif" >

清除原格式

*{清除默认的内外边距，几乎是必写的。也叫CSS的初始化，这是最简单的，不推荐。
margin:0;//外边距
padding:0;//内边距
}
border-top要写在border后面，不然容易被覆盖

ul{

list-style:none;//取消列表的默认样式小点

}

text-decoration:none;

input{border:0;}//所有的表单边框为0

清除基线

1.设置块元素

2.设置字体大小为0

3.vertical-align：bottom;//低对齐

鼠标经过事件

第一种：主要用了onMouseOver和onMouseOut事件
html代码：

css代码：

img:hover{ cursor: pointer; }

1）、alt表示图片不能正常显示时的替换内容，里面可以加上文字，一般不写这个属性的话会有警告错误，所以我一般是会加上的。

2）、src="url()"表示图片的地址，此处的意思是images文件夹下的名字为1的jpg图片。

3）、onMouseOver 属性是鼠标指针移动到元素上时触发的。

4）、onMouseOut属性是鼠标指针移出元素是触发的。

此处的意思是在鼠标移入时显示1.png，移出时显示1.jpg。

5）、img:hover 是鼠标经过img标签时显示的内容。

6）、cursor:pointer 表示鼠标经过是指针显示为小手形状。

注：这里是两张图片完全替换，鼠标移入时图片1.jpg完全不会显示。

第二种

.div_style:hover{
background-image: url(“img2.png”); //这是改变背景色
background-repeat: no-repeat;//这是让背景色不平铺
color:red; //这是让字体变为红色
}

1.7小总结

HTML

//可以设置语言

//H5支持自定义标签

ine-height是内容的垂直居中而不是元素的垂直居中，

元素的垂直居中可以利用内联元素设置vertical-align:middle来实现，在确定高度的情况下也可以通过设置margin或者padding来实现。

2.1文档类型（Doctype声明放在HTML前面）

<!doctype>用来声明html的版本，浏览器只有知道html的版本后才能正确显示文档,<!DOCTYPE>本身不是一个标签，而是一个声明。
html5的文档类型是：
文档类型设定
·document
HTML：sublime输入html：4s
XHTML：sublime输入html：xt
HTML5：sublime输入html：5

声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。 HTML5 中仅规定了一种。
DOCTYPE可声明三种 DTD 类型：严格、过渡以及框架集的 HTML 文档。

制作一个符合标准的网页，DOCTYPE声明是是不可缺少的，它在Web设计中用来说明你用的XHTML或者HTML是什么版本，

如果不做DOCTYPE声明或声明不正确的情况下，将有可能导致你的标识与CSS失效，从而令你网页的布局变乱，造成网页在浏览器中不能正常的显示。

当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式

在标准模式中，浏览器以其支持的最高标准呈现页面；
在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

当浏览器开启了混杂模式的时候：

影响css的情况

主要是IE浏览器，其他Chrome，FF以及IE高版本浏览器无论在什么模式下都能正常显示

盒模型是混杂模式和标准模式的主要区别
<=IE6将盒子的padding和border算到盒子尺寸中，这被称为IE盒模型。
W3C标准的盒模型中，box大小就是content大小。
这一区别将导致页面绘制时所有块级元素都出现很大差别，所以两种不同的文档模式下的页面也区别很大。
影响图片元素的垂直对齐方式，就是在行框对基线的选择，IE的怪异模式会以Bottom-line为基线，标准模式下以base-line为基线。
影响table元素继承字体的某些属性，在IE5的怪异模式下不会继元素的一部分属性，尤其是font-size属性。
IE5怪异模式中内联元素可以定义尺寸
IE标准模式下，overflow取值为visible即溢出可见，在怪异模式下该溢出会被当作扩展box来对待，元素的大小由其内容决定，溢出不会被裁剪，而是父元素会自动调整自己的宽高以完全适应包含内容。

影响javascript的情况

跨浏览器确定一个窗口大小不是一件简单事，注意以下介绍的属性获取后的值都是整数而且没单位，即使是小数浏览器计算时也会四舍五入。

模式触发

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。

如果XHTML、HTML 4.01文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。
包含过渡DTD和URL的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URL会导致页面以混杂模式呈现。
DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

html5既然没有DTD，也就没有严格模式与宽松模式的区别，html5有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容

2.2字符集

由于不同的国家和地区使用不同的文字，就衍生出了很多不同的字符集和不同的字符编码方案。如：

用于现代英语的ASCII字符集
用于欧洲很多国家的iso8859系列字符集
用于中国的GB2312，GBk，GB18030等字符集
用于台湾，香港，澳门等的Big5字符集。
用于日本的Shift JIS字符集
用于越南的VISCII
用于印度的ISCII
包含全世界所有文字符号的Unicode字符集和其UTF-7，UTF-8，UTF-16等字符编码方案。

2.3BFC（独立渲染区域）

Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

那么 BFC 是什么呢？

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

**具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

触发 BFC

只要元素满足下面任一条件即可触发 BFC 特性：

HTML 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)，不为static或则releative中的任何一个
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)，

BFC 特性及应用

总结 BFC 的布局规则：

内部的 Box 会在垂直方向排列（块级元素）
Box 垂直方向上的边距由margin决定，属于同一个 BFC 的两个相邻的 Box 的margin会发生重合
每个盒子的左边框紧挨着包含块的左边框，浮动元素也是如此
BFC 的区域不会于 Float Box 重叠 BFC 就是页面上的一个隔离的独立容器，容器里面的子
元素不会影响到外面的元素，反之亦然
计算 BFC 的高度时，浮动子元素也参与计算

1. 同一个 BFC 下外边距会发生折叠

<head>
div{width: 100px;height: 100px;background: lightblue;margin: 100px;
}
</head>
<body><div></div><div></div>
</body>

从效果上看，因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。

首先这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。

<div class="container"><p></p>
</div>
<div class="container"><p></p>
</div>
.container {overflow: hidden;
}
p {width: 100px;height: 100px;background: lightblue;margin: 100px;
}

这时候，两个盒子边距就变成了 200px

2. BFC 可以包含浮动的元素（清除浮动）

我们都知道，浮动的元素会脱离普通文档流，来看下下面一个例子

<divstyle="border: 1px solid #000;"><divstyle="width: 100px;height: 100px;background: #eee;float: left;"></div></div>

由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度。如果使触发容器的 BFC，那么容器将会包裹着浮动元素。

<divstyle="border: 1px solid #000;overflow: hidden">    <divstyle="width: 100px;height: 100px;background: #eee;float: left;"></div></div>

效果如图：

3. BFC 可以阻止元素被浮动元素覆盖

先来看一个文字环绕效果：

<divstyle="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div><divstyle="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动, 也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>

这时候其实第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性，在第二个元素中加入 overflow: hidden，就会变成：

这个方法可以用来实现两列自适应布局，效果不错，这时候左边的宽度固定，右边的内容自适应宽度(去掉上面右边内容的宽度)。

2.4文档流&浮动&定位

文档流指元素在文档中的位置由元素在html里的位置决定，块级元素独占一行，自上而下排列；内联元素从左到右排列
脱离文档流的方式：

浮动，通过设置float属性
绝对定位，通过设置position:absolute
固定定位，通过设置position:fixed

2.5meta属性

参考：https://blog.csdn.net/ssisse/article/details/51590584

meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！

name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有搜索引擎都使用网上机器人自动查找meta值来给网页分类）。

这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词）。

meta 的属性有两种：name和http- equiv。

1. 指定名/值对定义元数据

name属性与content属性结合使用, name用来表示元数据的类型，表示当前标签的具体作用；content属性用来提供值。

<meta name="参数" content="具体描述信息">

例如:

<!DOCTYPE HTML>
<html><head><title>demo</title><meta name="keywords" content="电商,物流"><meta name="author" content="张三"><meta name="description" content="网站描述..."></head><body><div>welcome</div></body>
</html>

元数据名称(name的值)	说明
application name	当前页所属Web应用系统的名称
keywords	描述网站内容的关键词,以逗号隔开，用于SEO搜索
description	当前页的说明
author	当前页的作者名
copyright	版权信息
renderer	renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面
viewreport	它提供有关视口初始大小的提示，仅供移动设备使用

viewreport

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GRsDKhPS-1625732492815)(https://segmentfault.com/img/remote/1460000017480059?w=1304&h=1186)]

**备注:**图片截取自MDN

主要介绍一个当meta标签的name属性值为viewreport时的视口的大小

1.mate标签name属性不设置viewreport

如果不设置name的值为viewreport，默认视口宽度为980

2.mate标签name属性设置viewreport

1.content内容为空时，默认视口宽度为980
2.content设置width，不设置initail-scale时，视口宽度为设置的width值
3.content不设置width，只设置initail-scale时，是可以根据initail-scale的值计算出视口的宽度

initail-scale = 屏幕宽度 / 视口宽度

4.content同时设置width和initail-scale时，视口宽度为width的值，页面显示按照initail-scale比率进行缩放
5.一般都是进行如下设置，来实现视口宽等于设备宽，布局完成后屏幕显示也不进行缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0">

renderer

<meta name="renderer" content="webkit"> //默认webkit内核 <meta name="renderer" content="ie-comp"> //默认IE兼容模式 <meta name="renderer" content="ie-stand"> //默认IE标准模式<meta name="renderer" content="webkit|ie-comp|ie-stand">

2. 声明字符编码

charset属性为HTML5新增的属性，用于声明字符编码,以下两种写法效果一样

<meta charset="utf-8"> //HTML5<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML

GB2312，由中华人民共和国政府制定的，简体汉字编码规范，大陆所有计算机中的简体中文，都使用此种编码格式。

GBK，又称GBK大字符集，简而言之就是将所有亚洲文字的双字节字符，包括简体中文，繁体中文，日语，韩语等，都使用一种格式编码，这样就能够做到在所有的语言平台上面兼容。

3. 模拟http标头字段

http-equiv属性与content属性结合使用, http-equiv属性为指定所要模拟的标头字段的名称，content属性用来提供值。

<meta http-equiv="参数" content="具体的描述">

content-Type 声明网页字符编码:

<meta http-equiv="content-Type" content="text/html charset=UTF-8">

refresh 指定一个时间间隔(以秒为单位),在此时间过去之后从服务器重新载入当前页面,也可以另外指定一个页面.

<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">//2秒后在当前页跳转到百度

X-UA-Compatible 浏览器采取何种版本渲染当前页面

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> //指定IE和Chrome使用最新版本渲染当前页面

expires 用于设定网页的到期时间，过期后网页必须到服务器上重新传输

<meta http-equiv="expires" content="Sunday 22 July 2016 16:30 GMT">

catch-control 用于指定所有缓存机制在整个请求/响应链中必须服从的指令

<meta http-equiv="cache-control" content="no-cache">//

content有以下值(百度百科):

content的值	说明
public	所有内容都将被缓存(客户端和代理服务器都可缓存)
private	内容只缓存到私有缓存中(仅客户端可以缓存，代理服务器不可缓存)
no-cache	必须先与服务器确认返回的响应是否被更改，然后才能使用该响应来满足后续对同一个网址的请求。因此，如果存在合适的验证令牌 (ETag)，no-cache 会发起往返通信来验证缓存的响应，如果资源未被更改，可以避免下载。
no-store	所有内容都不会被缓存到缓存或 Internet 临时文件中
must-revalidation/proxy-revalidation	如果缓存的内容失效，请求必须发送到服务器/代理以进行重新验证
max-age=xxx (xxx is numeric)	缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高

2.6浮动（浮动元素不占用位置）

浮动流是一种半脱离标准流的排版方式
浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐

浮动的影响：

1.脱离文档流

2.元素横排显示

3.浮动只影响后面的元素，不影响前面的元素(后覆盖)

4.浮动元素的总宽度大于父元素的总宽度将换行显示

5.左浮动的找左浮动，右浮动的找右浮动

属性 float ，取值 right/left/none

float:left;//能让三个盒子在一行排好，且没有空隙

在众多小盒子（以一行或者一列为单位）外面加大盒子，可以有效防止覆盖的发生

浮动以最近的父亲对齐，不会超过父亲内边距的范围

一个父盒子里面的子盒子，如果一个子盒子浮动，其他子盒子都要浮动才可以一行对齐。

元素添加浮动后，元素会具有行内块的特性，元素的大小取决于定义的大小或者默认内容的多少。

**注意点：**浮动流没有居中对齐，也就是没有center这个取值
在浮动流中margin ：0 auto是不生效的

特点：
在浮动流中是不区分行内元素/行内块级/块级元素
在浮动流中无论是行内元素/行内块级/块级元素，都可以设置宽高
综上：所有元素都可以当作行内块级元素

清除浮动的几种方法

参考：https://www.cnblogs.com/nxl0908/p/7245460.html

标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。

浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒子高度为0。（浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开）。

为什么要清除浮动呢？清除浮动的本质是什么？

清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。

清除浮动的方法：

1. 额外标签法：给谁清除浮动，就在其后额外添加一个空白标签。
优点：通俗易懂，书写方便。（不推荐使用）
缺点：添加许多无意义的标签，结构化比较差。

给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）

2. 父级添加overflow方法：可以通过触发BFC的方式，实现清楚浮动效果。
优点：代码简洁（慎重使用，若该父盒子里还有position定位会引起麻烦）
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

注意：别加错位置，是给父亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）

3. 使用after伪元素清除浮动（推荐）万能清除法：：after方式为空元素的升级版，好处是不用单独加标签了。（较常用）
优点：符合闭合浮动思想，结构语义化正确。

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{*zoom:1}
注意.clearfloat是父类

clear:both;//清除浮动
缺点：由于IE6-7不支持：after，使用zoom：1，触发hasLayout。

注意：这个也是给父亲添加 clearfix

4. 使用before和after双伪元素清除浮动：（较常用）

注意：是给父亲添加clearfix

2.7定位

定位类型

1 relative（自恋型），relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。它的主要效果是使元素偏离正常的位置，其他元素不会调整位置来弥补其偏离后留下来的空隙。其与 absolute 不同，其偏离对于父元素的定位方式没有要求，且始终占位，不脱离文档流

2 absolute（拼爹型） ，绝对定位是脱离文档流的，元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框

绝对定位脱离了文档流，所以会出现覆盖情况

3 static默认，一般用来清除定位的

子绝父相：父亲是相对定位，孩子是绝对定位最好

4粘性定位（position:sticky;）

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

以浏览器可视窗口参照点移动元素。（固定定位特点）

设置该属性的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

在定义这个属性后必须给它定义他的位置(top、bottom、left、right至少给一个)，否则将会无法生效。它会随着滚动条的滚动然后贴在给他固定的位置。

5固定定位（position:fixed; ）

实现绝对定位的水平垂直居中

平时,用的方法即第一种方法是设置left,top值均为50%,同时margin-left设置为绝对定位元素width的一半取负,margin-top设为其height的一半取负。

例如，绝对定位元素的width:100px;height:100px;

代码如下:

position:absolute;left:50%;top:50%;margin-left:-50px;margin-top:-50px;

这是比较常用的一个方法，今天介绍一个巧妙的方法，是利用了绝对定位元素的自动伸缩的特性实现的。

代码如下：

position:absolute;left: 0;right: 0;top: 0;bottom: 0;margin:auto;

上面就是第二种方法：设置margin:auto;设置left和right的值相等,top和bottom的值相等,
注意：left和right的值不能超过其相对元素width减去它自身width的一半,否则绝对定位元素会优先取left值进行定位(前提是文档流是从左向右),但是top和bottom的值却没有这个限制。

absolute, relative, fixed偏移的参考点分别是什么？

absolute参考点是离其最近设置了定位（relative、absolute)的元素，如果父级元素没有，则一层一层往上找，最终到body元素
relative的参考点是其原来左上角的位置
fixed的参考点是浏览器的窗口

Z-index（属性）

因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。
*z-index只有在使用了定位属性即positon的元素上才可使用；有较高z-index值的元素比z-index值较低的元素离读者更近；z-index值是正负整数*

默认情况下所有的元素都有一个z-index属性，取值是0
z-index属性的作用是专门用于控制定位流覆盖关系
1、默认情况下，定位流元素会覆盖标准流元素
2、默认情况下，定位流元素会覆盖前面的定位流元素
3、如果定位流中的元素设置了z-index属性，那么谁的z-index属性比较大，谁就显示在上面
注意点
从父现象
1、如果两个定位元素的父元素没有设置z-index属性,那么谁的z-index属性比较大，谁就显示在上面
2、如果两个定位元素的父元素设置z-index属性,那么子元素的z-index属性就会失效，也就是谁的父元素
的z-index属性、谁就显示在上面

同一个盒子同时设置相对定位和浮动或者绝对定位和浮动的问题

div｛float :left;position:relative｝这样是可以的

div｛float :left;position:absolute｝不允许，绝对定位会使浮动失效

2.8盒子垂直水平居中的几种方法（熟记）

这个问题好像面试必问的吔！反正我是必问的，哈哈！！！其实无关多少种实现思路，只要你能实现就可以！

提供4种方法:

1、定位盒子宽高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;
2、table-cell布局父级 display: table-cell; vertical-align: middle; 子级 margin: 0 auto;

3、定位 + transform ; 适用于子盒子宽高不定时；（这里是本人常用方法）

position: relative / absolute;
/*top和left偏移各为50%*/top: 50%;left: 50%;
/*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
transform: translate(-50%, -50%); 注意这里启动了3D硬件加速哦 会增加耗电量的 （至于何是3D加速 请看浏览器进程与线程篇）

4、flex 布局

父级：
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;

再加一种水平方向上居中：margin-left : 50% ; transform: translateX(-50%);

当然一共有9种感兴趣的可以去搜一下。

3.1块级和行内以及行内块元素

块级元素的特点：

（1）**宽度默认是容器的100%**
（2）高度，行高、外边距以及内边距都可以控制。
（3）总是从新行开始
（4）可以容纳内联元素和其他块元素。
块级元素各占一行。是垂直方向的！

常见的块级元素：

address - 地址， blockquote - 块引用，center - 举中对齐块
dir - 目录列表， div - 常用块级容易，也是css layout的主要标签
dl - 定义列表， fieldset - form控制组， form - 交互表单
h1 - 大标题， h2 - 副标题， h3 - 3级标题
h4 - 4级标题， h5 - 5级标题，h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 排序表单
p - 段落 pre - 格式化文本
table - 表格 ul - 非排序列表

行内元素（内联元素）的特点：

（1）** 默认宽度就是它本身内容的宽度。 **（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。（3）和相邻行内元素在一行上。（4）行内元素只能容纳文本或则其他行内元素。 a标签除外行内元素会再一条直线上，是在同一行的。

**常见的内联元素：**span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block））

行内块元素（内联块元素）（inline-block）

在行内元素中有几个特殊的标签——<img />、<input />、<td>，
可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有**空白缝隙**
（2）**默认宽度就是它本身内容的宽度。**
（3）高度，行高、外边距以及内边距都可以控制。

**常见的内联块元素：**img、input

display:inline-block;//把元素改为行内块元素

è¡Œå†åƒç´ ,å—çº§åƒç´ ,è¡Œå†å—çº§åƒç´ ä¹‹é—´çš„åŒºåˆ«?

3.2伪元素的本质（常用于插入，免去再添加盒子）

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但所有的用法和表现行为和真正的页面元素是一样的，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似页面的某些元素，实际上是css展现行为，因此被称为伪元素，

伪元素添加的内容默认是inline元素，表示伪元素的内容必须设置content属性，否则不生效

.one——类选择器
:hover——伪类选择器，鼠标经过; :active–点击之后变换
::after——伪元素选择器

类选择器伪类选择器就是选取对象
伪元素选择器本质上是插入一个元素(标签盒子) 只不过是行内元素

伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如:visited，:active；后者包含那些满足一定逻辑条件的DOM树中的元素，比如:first-child，:first-of-type，：target。

注意事项

有时你会发现伪类元素使用了两个冒号 (:

前端基础总结--CSS相关推荐

前端基础：CSS 3
前端基础:CSS 3 文章目录前言一.什么是CSS 0. CSS的简单介绍 1. 什么是CSS 2. CSS发展史 3. CSS的快速入门及优势 4. 四种CSS导入方式二.选择器 1. 三种基 ...
外部导入方式添加背景图_web前端基础：CSS的三种导入方式说明
随着html的成长,为了满足页面设计者的要求,HTML添加了很多显示功能.但是随着这些功能的增加,HTML变得越来越杂乱,而且HTML页面也越来越臃肿.于是css便诞生了. Web前端基础教程,Web ...
前端基础之CSS复合选择器
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础 # CSS 第二天今天我们围绕一个导航栏案例进行 ...
web前端基础与CSS入门
web前端基础 1.嵌套列表注:列表之间可以互相嵌套,形成多层级的列表. <!DOCTYPE html> <html lang="en"> <hea ...
web前端基础html,css,js,jquery
目录 1 前端技术: 1.1 学习方法 1.1.1 前端要怎么学? 1.1.2 前端技术栈 1.2 HBuilderX 1.2.1 介绍 1.2.2 安装 1.2.3 主题 1.2.4 字体 1.2. ...
前端基础之CSS盒子模型
目录长度单位像素百分比 em rem 颜色单位 RGB RGBA 文档流(normalflow) 盒子模型内容区(content) 边框(border) 内边距(padding) 外边距(ma ...
Java学习07–前端基础之CSS
Java学习07–CSS基础 1.CSS介绍 1.1.发展史 css1.0 基本 css2.0 div(块)+css html与css结构分离的思想网页变简单 css2.1 浮动,定位 css3.0 ...
☀️前端基础—【CSS✨✨✨】
文章目录(PS:觉得不错请点赞收藏支持一下) 一.CSS 初识 1.1 概念 1.2 引入 CSS 样式表 1.2.1 行内式(内联样式) 1.2.2 内部样式表(内嵌样式表) 1.2.3 外部样式表 ...
前端基础(HTML,CSS,JavaScript,jQuery)
文章目录 `HTML` 基础 `HTML`文件的基本结构标签属性转义字符元素之间的关系常用标签基本列表图片表格嵌套页面表单 `form`提交表单的属性: `GET`请求的特点 ` ...
html 文档自动获取css,前端基础中css选择器，html文档 ,与javascrip中基本的获取
1,Vscode自动刷新插件与格式化插件应用搜索搜索liveserver,安装后.点击右下角Golive可以进入使用. 格式化插件prettier:首选项,设置,搜索format,勾选prettie ...

前端基础总结--CSS

前端