1:主流浏览器的内核分别是什么？
IE：trident内核 [‘traidnt ]
Firefox：gecko 内核 [ˈɡekəʊ]
Safari：webkit 内核
Chrome,Opera：Blink内核(基于webkit)
<!DOCTYPE html>声明位于文档中的最前面的位置，此标签告知浏览器文档使用哪种HTML或XHTMl规范（重点：告诉浏览器按照何种规范解析页面）
严格模式下：页面排版及 JS 解析是以该浏览器支持的最高标准来执行
混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容
<!DOCTYPE html>不存在或格式不正确会导致文档以混杂模式呈现
（1）div+css布局的好处：
a.符合W3C标准，结构、样式和行为分离，代码结构清晰明了，带来足够好的可维护性。
b.布局精准，网站版面布局修改简单。
c.加快了页面的加载速度（最重要的）。
d.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。
a.容易上手。
b.可以形成复杂的变化，简单快速。
c.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。
alt属性:在图片无法加载的时候才会显示的其值,
title属性:在图片正常加载鼠标划上去显示的值
strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点
渐进增强（progressive enhancement） [prəu'ɡresiv][ɪnˈhɑːnsmənt]
：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级( graceful degradation)[ˈɡreɪsfl ,deɡrəˈdeɪʃn]：一开始就构建完整的功能，然后再针对低版本浏览器进
行兼容。
渐进增强的观点关注内容本身
优雅降级的观点更关注主流浏览器，一些特定的浏览器，除修复较大的错误外，其他的差异将会被直接忽略
网页标准的制定，使得web发展的更健康，提高网站的易用性。
a、开发者遵循统一的标准，降低了开发难度和开发成本
b、SEO优化网页也会更加方便，不会因为滥用代码出现各种bug和安全问题。
src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
Src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置。例如：js脚本，img图片，frame等。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，这也是为什么将js 脚本放在底部而不是头部。
href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。
Png,jpeg,gif,svg,webp
webp格式：谷歌开发的新的图片格式，体积小，质量好，但兼容性略差
微格式（Microformats）是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式
作用：
a、在捉取Web内容时，能够更为准确地识别内容块的语义；
b、对内容进行操作，包括提供访问、校对，还可以将其转化成其他的相关格式，提供给外部程序和Web服务使用。
应用例子：
当用手机浏览某公司的网站时，手机浏览器识别出了网页中的 hCard 信息。这个 hCard 标记了该公司的多种联络方式，手机浏览器很聪明地提示我“是否保存到通讯录”，于是我很经松地保存了我所需要的信息
DNS缓存是指在正常访问ip之后，系统会将这个ip存储起来，当再次访问的时候，系统就会把本地的DNS缓存提取显示，等于是加速了网址的解析。
CDN是Content Delivery NetWork的简称，即‘内容分发网络'的意思，主要用于分地域的集群服务器，当用户浏览网站请求数据时，CDN会选择一个离用户最近的CDN边缘节点来响应用户的请求。
服务器缓存就是存放频繁访问内容的服务器。
a. 图片懒加载，滚动到相应位置才加载图片。
b. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。
c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。
d. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
A:在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:裸奔时也好看；
B:用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
C:有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
D:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备），更好的方式来渲染网页；
E:便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
(1).维护网站，提高内容质量，保持更新
(2).网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。
(3).控制首页链接数量,要适中
(4).导航优化：
a:尽量采用文字方式
b:搭配图片导航，但是图片代码一定要进行优化，img标签必须添加“alt”和“title”属性
c:应该加上面包屑导航
(5).控制页面的大小:减少http请求，提高网站的加载速度
(6).适量的关键词和网页描述
title标题，强调重点即可，
meta keywords标签：关键词，列重要关键字即可
meta description标签：网页描述，要高度概括
body中的标签：尽量让代码语义化
a标签：页内链接，要加 “title” 属性加以说明
img应使用 “alt” 属性加以说明
strong、em标签 : 需要强调时使用
巧妙利用CSS布局
谨慎使用 display：none
保留文字效果
A:外部样式表，引入一个外部 css 文件
B:内部样式表，将 css 代码放在 <head> 标签内部，<style>里
C:内联样式，将 css 样式直接定义在 HTML 元素内部
选择器类型
(1)、ID #id
(2)、class .class
(3)、标签 p
(4)、通用 *
(5)、属性 [type="text"]
(6)、伪类 a: hover
(7)、伪元素 li: nth – child
(8)、子选择器（ul < li） 、相邻选择器（h1 + p）、后代选择器（li a）
权重计算规则
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
!important 比 内联优先级高
(1). 第一等：代表内联样式，如: style=””，权值为1000。
(2). 第二等：代表ID选择器，如：#content，权值为0100。
(3). 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
(4). 第四等：代表标签和伪元素选择器，如div p，权值为0001。
(5). 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
(6). 继承的样式没有权值。
(7).相同权重
优先级就近原则，样式定义最近者为准,载入样式以最后载入的定位为准;
继承性
可继承： font-size font-family color;
不可继承 ：border padding margin width height ;
CSS3 新增伪类举例：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
display:none；隐藏，并且不占位 ，宽高各种属性值，都‘丢失’
visibility：hidden;隐藏，占位，仅是视觉上‘看不见’
width:0;height:0;overflow:hidden;这只是通过设置元素的大小使元素不显示
问题是：a标签的四种状态，排序出问题了。
正确排序：L-V-H-A
love hate原则，即l（link）ov（visited）e h（hover）a（active）te。
a:link 普通的、未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻
针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。
(1):块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
(2):内联元素(inline)特性：
宽度(width)、高度(height)、内外边距的上下都不可设置，内外边距的左右可设置，其大小就是里面文字或图片的大小。
(3):inline-block 元素
拥有内在尺寸，可设置高宽,但不会自动换行
<input> 、<img> 、<button> 、<texterea> 、<label>。
外边距重叠就是 margin-collapse。
折叠外边距 :在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。
折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
opacity作用于元素，以及元素内的所有内容的透明度(元素会继承其属性)
而rgba()只作用于元素的颜色或其背景色(设置rgba透明的元素的子元素不会继承透明效果)
垂直方向：line-height
水平方向：letter-spacing 增加或减少字符间距。
可用于消除 inline-block 元素间的换行符空格间隙问题。
方法一：.child{
height: 100px;
position: absolute;//父元素相对定位
top:50%;
left:50%;
transform: translate(-50%,-50%);
方法二：.child{
width: 100px;
height: 100px;
position: absolute;
top:50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
方法三：child {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto
方法一：<img>的容器
.img-container{
display: table-cell;
vertical-align: middle;
text-align: center;
方法二：方法二
.img-container{
display: flex;
justify-content: center;
align-items: center;}
px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。em 得值不是固定的，并且 em 会继承父级元素的字体大小。
浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。
是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成
CSS。
优势：
结构清晰，便于扩展。
减少了重复代码的编写，增加了变量等的功能
可以方便的屏蔽浏览器私有语法差异。
可以轻松实现多重继承。
完全兼容CSS代码，可以方便地应用到老项目中。less只是在CSS语法上做了扩展，所以老的CSS代码也可以与less代码一同编译。
Link 属于 html 标签，而@import 是 CSS 中提供的
在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS ,@import 只有在 ie5 以上才可以被识别，
link 是 html 标签，不存在浏览器兼容性问题
Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）
CSS 的盒子模型有两种：IE 盒子模型、标准的 W3C 盒子模型模型
盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框
0417 第二次提问
31:为什么要初始化样式？
由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同
浏览器之间的显示差异
但是初始化 CSS 会对搜索引擎优化造成小影响
BFC（块级格式化上下文），页面上的一个隔离的独立容器，一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布
局不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin
重叠的问题
创建BFC
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
1. 所有的标记都必须要有一个相应的结束标记
2. 所有标签的元素和属性的名字都必须使用小写
3. 所有的 XML 标记都必须合理嵌套
4. 所有的属性必须用引号 "" 括起来
5. 把所有 < 和 & 特殊符号用编码表示
6. 给所有属性赋一个值
7. 不要在注释内容中使用 "–"
8. 图片必须有说明文字
浏览器默认的margin和padding不同
解决方案：加一个全局的 *{margin:0;padding:0;} 来统一
(1).标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、
(2):使用外 链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、
(3):更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认
的 display 值
块级元素(默认值是‘block’) ： div p h1–h6 form ul hr table
行内元素(默认值是‘inline’) : a b br i span input img link select small strong
Css 盒模型:内容，border ,margin，padding
结构层 Html
表示层 CSS
行为层 j s
display：
none：取消样式
block：块级元素
inline：行内元素
inline-block：行内块元素
normal：默认样式
flex：弹性布局
*absolute
生成绝对定位的元素，相对于离最近的包含块元素进行定位。
*fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
* relative
生成相对定位的元素，相对于其正常位置进行定位。
* static 默认值。没有定位，元素出现在正常的流中
* inherit 规定从父元素继承 position 属性的值。
(1):b标签和strong标签都可以对文本进行加粗
(2):i标签和em标签同样也可以对文本进行倾斜
但是strong和em有强调的作用，有利于SEO（搜索引擎优化
所以日常工作中建议用strong和em标签。
定义
标准模式页面按照HTML,CSS的定义渲染，
怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计,并未严格遵循W3C标准而产生的一种页面渲染模式。
区别：
两者盒子模型 渲染模式等的不同
相同点：都存储在客户端
不同点：
1.存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.有效时间
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie s 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3. 数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会
话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
解决：加入_display：inline
浏览器根据请求的 URL 交给 DNS 进行域名解析，找到真实 IP 地址，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、CSS、JS、images等）；
浏览器对加载到的资源（HTML、CSS、JS、images等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。
表格布局,
浮动布局，
浮动布局主要采用float和clear两个属性来构建。
定位布局
position属性来实现元素的绝对定位和相对定位。
流体布局的方式
1、 flex-direction：排列方向
flex-direction: row | row-reverse | column | column-reverse
2、flex-wrap如果一条轴线排不下，如何换行
flex-wrap: nowrap | wrap | wrap-reverse
3、flex-flow属性（上述两个组合）
flex-flow: flex-direction, flex-wrap
flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
4、justify-content属性（在主轴上的对齐方式）横向
justify-content: flex-start | flex-end | center | space-between | space-around
5、align-items属性（在交叉轴上如何对齐）纵向
align-items: flex-start | flex-end | center | baseline | stretch
6、flex-grow属性（放大比例，默认为0，即如果存在剩余空间，也不放大）
flex-grow: 默认为0
7、flex-shrink属性（缩小比例，默认为1，即如果空间不足，则缩小）
flex-shrink: 默认为1
8、flex-basis属性（在分配多余空间之前，项目占据的主轴空间）
flex-basis: | auto
9、flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
flex: auto; （1 1 auto）
flex: none; （0 0 auto）
css reset
normalize css
*{}
原文链接：https://blog.csdn.net/m0_64346035/article/details/124203043?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934458816782184618617%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934458816782184618617&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-18-124203043-null-null.nonecase&utm_term=%E8%87%AA%E5%BB%BAcdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/7908
