行内元素和块级元素?img算什么?行内元素怎么转化为块级元素

含义
块级元素：是在新行上开始，高度、行高及外边距和内边距都可控制，可以容纳内敛元素和其他元素；独占一行，不和其他元素待在同一行，比如：div,p,h1-h6,ul,li,dl,dt,dd
行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其他行内元素，不能设置宽高；。比如：img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup，strong、u、li、ins、del、dfn、kbd、var，其中img是行元素
行内块元素：能和其他元素待在一行，能设置宽高，比如常见的行内块标签：img,input,textarea

可变元素：可变元素由上下文语境来决定是块级元素还是行内元素 button del iframe ins map object script

href和src区别? title和alt#

href (Hypertext Reference)指定网络资源的位置（超文本引用）,比如 a 标签 link标签，
src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置，是页面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用 title：既是html标签，又是html属性，title作为属性时，用来为元素提供额外说明信息.
比如 <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head>
alt：alt是标签的属性，标签为：img、area和input， alt属性则是用来指定替换文字，用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息，出现情况为：
- 网速太慢
- src 属性中的错误
- 浏览器禁用图像
- 用户使用的是屏幕阅读器
area

    <p>点击星球可以显示大图：</p>
    <img src="/static/images/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>

input alt 属性只能与 <input type="image"> 配合使用

如何理解HTML结构的语义化？

所谓标签语义化，就是指标签的含义。语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，对搜索引擎友好，有了良好的结构和语义我们的网页内容便自然容易被搜索引擎抓取，这种符合搜索引擎收索规则的做法，网站的推广便可以省下不少的功夫，而且可维护性更高，因为结构清晰,十分易于阅读。这也是搜索引擎优化SEO重要的一步。对开发友好

h5新增标签有哪些？

语义化标签有 header头部区域，nav导航 footer页脚， article 独立的区域，section(区域/块/节)，aside侧边栏，datalist，Geolocation（地理），localStorage/sessionStorage, 新的技术webworker, websocket,Drag 音频标签：video， audio ；图形标签canvas；矢量图svg 新增表单增强元素：input 的 type 属性扩充：

date（输入日期）；email（输入邮件）；url（输入url地址）；search（呈现搜索常规的[文本域]range（输入一定范围内的数值）； month（输入月份）；color（颜色）；number（输入数值）required（必填项）、pattern（验证表单输入）

html5移除了的元素：

acronym、applet、basefont、big、center、dir、font、frame、frameset、noframes、strike、tt、s、u等

Label的作用是什么，是怎么用的？

label标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到标签相关的表单控件上

`用法一、

<label for = "Name">Number:</label>
<input type="text" name="Name" id="Name" />

用法二、

<label>Data:<input type="text" name="B" /><label>

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

在离线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储，如果已近访问过app并且资源已经立宪存储了，那么浏览器就会使用立宪的资源存储了，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。离线的情况下，浏览器就直接使用离线存储的资源。

iframe的优缺点有哪些？

iframe的优点：

1、iframe能够原封不动的把嵌入的网页展现出来;

2、如果有多个网页引用iframe，那么只需要修改iframe的内容，就可以实现调用每一个页面的更改，方便快捷;

3、网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe嵌套，可以增加代码的可重用;

4、如果遇到加载缓慢的第三方内容，如图标或广告，这些问题可以由iframe来解决;

iframe的缺点：

1、iframe会阻塞主页面的Onload事件;

2、iframe和主页面共享链接池，而浏览器对相同城的链接有限制，所以会影响页面的并行加载;

3、使用iframe之前需要考虑这两个缺点，如果需要使用iframe，最好是通过JavaScript;

4、动态给iframe添加src属性值，这样可以可以绕开以上两个问题

5、不利于seo

6、代码复杂，无法一下被搜索引擎索引到

7、iframe框架页面会增加服务器的http请求，对于大型网站不可取。

8、很多的移动设备无法完全显示框架，设备兼容性差。

W3C 标准

WEB三项组成：结构（HTML/XHTML/XML、表现（CSS）、行为（JavaScript）前端人员遵守的第一原则：“结构与表现分离”

1.结构标准（HTML/XHTML/XML）

HTML 标签（94个）文档：<html>、<head>、<body>、<title>、<style>、<link>、<script>、<noscript> 结构：<div>、<span>、<iframe> 表格：<table>、<thead>、<tbody>、<tfoot>、<tr>、<td>、<th>、<col> 表单：<from>、<input>、<textarea>、<button>、<select> 列表：<ul>、<ol>、<li>、<dl>、<dt>、<dd> 文本：<a>、<i>、<b>、<big>、<small>、<em>、<strong> 文章：<h1> - <h6> 、<p>、<br>、<pre> 媒体：<img> 特殊标签：<!DOCTYPE>、<!-- —>、<hr>

2.表现标准（CSS）

简史：

1994年 Håkon Wium Lie 提出了CSS的最初建议
1996年12月，发布 CSS 1.0
1998年5月，发布 CSS 2.0
1999年开始制订 CSS 3.0
2011年9月开始设计CSS 4.0

3.行为标准（JavaScript）

DOM ：文档对象模型，定义了访问 HTML 和 XML 文档的标准，目前使用3.0版本
ECMASCript：由Ecma国际通过ECMA-262标准化的脚本程序设计语言
简史：
1995年诞生，专用于客户端数据验证，叫LiveScript
当时Java很火，为了推广，更名Javascript
1996年，微软发布了自己的Javascript，叫JScript
1997年，ECMA组织规定了Javascript的标准，叫ECMAScript，约束了js的语法和功能
2004年，Google公司推出Ajax技术，拯救了Js
2007年，移动端的出现让js更加得到重视
2010年，H5推出，Canvas和Javascript的结合使用，让js功能更加强大
2011年，nodejs的出现，让js前后端通吃

对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;

!Doctype作用？严格模式与混杂模式如何区分？它们有何意义？

Doctype作用是什么？：（）声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签
严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。（严格 DTD ——严格模式DOCTYPE）
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码（DTD不存在或者格式不正确——混杂模）
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）
意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

html全局属性有哪些

accesskey属性（按住快捷键alt+h可以打开百度网页，同样，按住快捷键alt+c可以打开搜狗网页。） <a href="http://www.baidu.com" accesskey="h">百度</a><br> <a herf="https://www.sogou.com" accesskey="c">搜狗</a>
id、class属性分别是为元素命名唯一id和类名
tabindex属性(tabindex属性规定tab键控制次序(tab键用于导航时)，当按tab键时，元素聚焦的次序。tabindex="number"，"number" 代表聚焦的次序。) <a href="http://www.baidu.com" tabindex="2">百度</a><br> <a href="https://www.sogou.com" tabindex="1">搜狗</a><br> <a href="http://www.sina.com.cn" tabindex="3">新浪</a><br>
hidden属性（属性规定元素为隐藏，表示该元素不相关，为布尔值）
contenteditable属性（属性规定元素内容是否可编辑的，"true"表示可编辑，"false"表示不能编辑）
其它的全局属性，如：style、title、lang、spellcheck、translate、dir、draggable、dropzone等

heml网页中＜html lang= ＞和＜meta name=“viewport“ content= ＞的作用

lang 向[搜索引擎](表示该页面是html语言。lang是language的简写，表示语言的意思。en：英文；zh-CN（中文）；ja（日文）；美式英文(en-US)
<meta name="viewport" content= >的作用兼容移动前端，Content属性值可以有多个，用英语逗号分隔，如：

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

content属性值 :

 width:可视区域的宽度，值可为数字或关键词device-width

 height:同width

 intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

 maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，

 maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

 user-scalable:是否可对页面进行缩放，no 禁止缩放

CSS 常用笔记

css样式引入方式

 - 外部样式表，引入一个外部css文件
 - 内部样式表，将css代码放在 <head> 标签内部
 - 内联样式，将css样式直接定义在 HTML 元素内部

讲讲BFC

含义 : BFC(Block formatting context)直译为"块级格式化上下文，它是指一个独立的块级渲染区域，BFC是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 产生BFC的方式

根元素
float的值不为none。
position的值不为static或者relative。
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不为visible

BFC的规则

BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
垂直方向的距离由margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠
计算BFC的高度时，浮动元素也参与计算

BFC的作用

解决高度坍塌父元素没有设置宽高，产生高度塌陷，父元素加属性overflow: hidden解决[css属性])，就产生了BFC
解决margin重叠问题，加个父元素比如<div class="bfc"><div>childer<div><div>
有两个同级的div元素，前面div的设置了左浮动，会覆盖住后面的元素。解决后面元素加overflow： hidden
总结：块格式化上下文对浮动定位和清除浮动都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠也只会发生在属于同一BFC的块级元素之间。

以上就是BFC的分析，BFC的概念比较抽象，但通过实例分析应该能够更好地理解BFC。在实际中，利用BFC可以闭合浮动。同时，由于BFC的隔离作用，可以利用BFC包含一个元素，防止这个元素与BFC外的元素发生margin collaps

css3新增属性：

rgba；border-radius； box-shadow；text-shadow；gradient；transform； border-image；媒体查询；::selection（::selection选择器匹配元素中被用户选中或处于高亮状态的部分。只可以应用于少数的CSS属性：color, background, cursor,和outline。）新的单位（rem, vw，vh 等,圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow），线性渐变（gradient），旋转（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜 rgba,
请首先使用 “border-style” 属性来设置边框 border-color
border-image（Internet Explorer 不支持该属性）
border-radius box-shadow background-size
background-origin:content-box;背景图片可以放置于 content-box、padding-box 或 border-box 区域指定背景图片从哪里开始显示,
[background-size]
background-clip(指定背景图片从什么位置开始裁剪)
text-shadow: 5px 5px 5px #FF0000(<颜色>和<模糊半径>是可选的, 当<颜色>未指定时,将使用文本颜色; 当<模糊半径>未指定时, 半径值为0)
word-wrap 单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行 word-wrap:normal|break-word;
transform变换效果
伪类：
- 1、【p:first-of-type】；(选择属于其父元素的首个元素)
- 2、【p:last-of-type】；(选择属于其父元素的最后元素)
- 3、【p:only-of-type】；(选择属于其父元素唯一的元素)
- 4、【p:only-child】；(选择属于其父元素的唯一子元素)
- 5、【p:nth-child(2)】(选择属于其父元素的第二个子元素)
- 6、:enabled :disabled 表单控件的禁用状态
- 7、:checked 单选框或复选框被选中

    transform:translate(-50%, -50%) (移动自身一半) 
    transform:scale(x, y)（x/y轴同时缩放）
    transform：rotate（45deg）正值为顺时针，负值为逆时针,单位为 deg
    transform-origin: left top;transform: rotate(45deg);可以调整元素转换变形的原点
    transform: skew(deg,deg) 倾斜
    transform: rotateX(180deg) 就是沿着 x 立体旋转
    transform: rotateY(180deg) 沿着y轴进行旋转
    transform: rotateZ(180deg) 沿着z轴旋转
    transform：translateX() 仅水平方向移动**（X轴移动）
    transform：translateY() 仅水垂直向移动**（Y轴移动）

box-shadow: 1px 1px 3px #292929;（x offset y offset blur color of shadow）
text-stroke: 3px red ;(px, color), 文字轮廓同样，就像它的兄弟一样 box-shadow，我们可以通过使用逗号作为分隔符来应用多个阴
RGBA和透明度其中 RGB 值分别表示红色、绿色、蓝色，而 alpha 取值则为 0 到 1 （小数位一位）
background background-image：设置元素的背景图像。background-origin：规定背景图片的定位区域。background-size ：规定背景图片的尺寸。background-repeat：设置是否及如何重复背景图像
@font-face属性 font-face属性：定义自己的字体

媒体查询（Media Query）

{
 <!-- 宽度大于 900px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css"> 
}

and：表示可以将多个媒体特性连接到一起，相当于“且”的意思
not：表示排除某个媒体类型，相当于“非”的意思，可以省略
only：表示指定某个特定的媒体类型，可以省略
④media feature 媒体特性必须有小括号包含。每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解以下三个常用的：
width：表示输出设备中页面可见区域的宽度
min-width：表示输出设备中页面最小可见区域的宽度
max-width：表示输出设备中页面最大可见区域的宽度

水平居中的方法？垂直居中？水平垂直居中的方法？

已经知道宽高度：
- 水平居中：用 margin: auto仅仅水平居中
- 垂直居中：
- 水平垂直居中：
  - 1：使用table-cell实现（这种方式需要父元素的宽高都是确定的，才能保证子元素在父元素中垂直水平都居中。）

   .par-work2 {
       height: 500px; width: 500px;
       display: table-cell;
       vertical-align: middle;
       text-align: center;
       }
   .son-work2 {   display: inline-block; }

文本水平对齐和行高：
- 使用文本水平对齐 text-align 和行高 line-height
- 网格布局父元素设置 grid 子元素设置align-self: center; justify-content: center

<div class="box4">  	
    <div class="center5">文字居中</div>
</div>
   .par-work3 {
        display: grid;
        height: 500px;
    }
    .son-work3 {
        align-self: center; /*设置单元格内容的垂直位置*/
        justify-self: center; /*设置单元格内容的水平位置*/
    }
        /* grid 父级元素中设置 */
        .box5{  	
            background-color: #eee;  	
            width: 200px;  	height: 200px;  	
            margin-top: 20px;  	display: grid;  	
            align-items: center;  	justify-content: center;
        }

未知宽高：
- 水平居中：
- 垂直居中：单行文本: line-height = height 图片: vertical-align: middle;
- 水平垂直居中：
  - 1：定位：margin：auto，top;left;right;bottom均设置为0,脱离文档流
  - 2：父元素使用flex布局，弹性盒子：父级元素 display:flex，relative; justify-content: center; align-items: center;
  - 3: 使用绝对定位 + transform，给子元素添加如下样式

`/*使用绝对定位 + transform，水平垂直居中 */ .work { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);(不知道子元素宽高情况下)

  margin-top: -100px; （知道子元素宽高情况下）
  margin-left: -100px; （知道子元素宽高情况下）

} `

/*弹性盒子水平垂直居中*/
<div class="box2">  	
    <div class="center4"></div>
</div>
.box2{  	
    background-color: #eee;  	
    width: 200px; height: 200px;  	
    position: relative;  	
    margin-top: 20px ;  	
    display: flex;  	
    justify-content: center;  	
    align-items: center;
}
.center4{  	
    width: 50px;  	
    height: 50px;  
    background-color: #B39873;
}

一、link和@import的区别？

<link rel="stylesheet" href="index.css">
  @import url（“index.css”）；

link属于html标签，而@import是css提供的。
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载的。
兼容性问题：@import只在IE5以上才能识别，而link是html标签，无兼容性问题。
权重问题:@import的权重要高于link。
DOM操作:DOM可以操作link中的样式，而不可以操作@import中的样式。

清除浮动的几种方式

1、额外标签法尾部加个空标签，行内样式为<div class="clear clearfix" style="clear: both;"></div> 
2、：父元素添加 overflow: hidden
3、:after 伪元素法，为父元素清除浮动
4、:after和:before双伪元素清除浮动

/* ---3、:after 伪元素法，为父元素清除浮动-----以下两行样式代码为固定写法--------  */
	.clearfix:after{
		content: '';
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	.clearfix{
		/* 为 IE6、IE7浏览器设置的清除浮动 */
		*zoom: 1;
	}
       
       /* --4、:after和:before双伪元素清除浮动------以下两行样式代码为固定写法-------- */
       	.clearfix:after,.clearfix:before{
		content: '';
		display: table;
	}
	.clearfix:after{
		clear: both;
	}
	.clearfix{
		/* 为 IE6、IE7浏览器设置的清除浮动 */
		*zoom: 1;
	}
    /* --------以上两行样式代码为固定写法--------- */

为什么要初始化CSS的样式

浏览器兼容问题：因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化往往会出现浏览器之间的页面显示差异，尽量不要星号 mrgin: 0; paddng: 0；而是选择主要相关标签初始化样式参考淘宝的初始化样式

,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:couriernew,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}

盒模型

简介外边距、边框、内边距、实际内容

box-sizing：content-box（标准盒模型width不包括padding、border、margin）
box-sizing：border-box（IE盒模型/怪异盒模型包括：）

简述几个css hack?

(1) 图片间隙
在div中插入图片，图片会将div下方撑大3px。hack1：将

与写在同一行。hack2：给添加display：block；
dt li 中的图片间隙。hack：给添加display：block；
(2) 默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px）
hack1：给元素添加：font-size：0；
hack2：声明：overflow：hidden；
表单行高不一致
hack1：给表单添加声明：float：left；height：；border： 0；
鼠标指针
hack：若统一某一元素鼠标指针为手型：cursor：pointer；
当li内的a转化块元素时，给a设置float，IE里面会出现阶梯状
hack1：给a加display：inline-block；
hack2：给li加float：left；

CSS选择器有哪些？哪些属性可以继承？CSS优先级算法如何计算？

1. id选择器（ # myid） 100
1. 类选择器（.myclassname）10
1. 标签(元素)选择器（p, h1, p）1
1. 相邻选择器（h1 + p）
1. 子选择器（ul > li）
1. 后代选择器（li a）
1. 通配符选择器（ * ）
1. 属性选择器（a[rel = "external"]）
1. 伪类选择器（a:hover, li:nth-child）
10.伪元素选择器、分组选择器。1 内联1000 !important 比内联优先级高 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> 元素。

继承性：可继承的样式：font-size, font-family, color，ul，li，dl，dt，dd；不可继承的样式：border, padding, margin, width, height 元素选择符的权值：元素标签（派生选择器）：1，class选择符：10，id选择符：100，内联样式权值最大，为1000!important声明的样式优先级最高，如果冲突再进行计算。如果优先级相同，则选择最后出现的样式。继承得到的样式的优先级最低。

介绍一下你对浏览器内核的理解

- 常见的浏览器内核：
    - Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
    - Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等。
    - Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink;]
    - Webkit内核：Safari,Chrome等。[ Chrome的：Blink（WebKit的分支）]
    - EdgeHTML内核：Microsoft Edge。[此内核其实是从MSHTML fork而来，删掉了几乎所有的IE私有特性]

主要分成两部分：渲染引擎（layout engineer或Rendering Engine）和 JS 引擎。
- （1）渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户以及其他它所需要编辑、显示网络的应用程序都需要内核。
- （2）JS引擎则：解析和执行JavaScript 来实现网页的动态效果；最开始渲染引擎和 JS 并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只渲染引擎

rgba和opacity的透明效果有什么不同

   - opacity 会继承父元素的 opacity 属性，而 RGBA 设置的元素的后代元素不会继承不透明属性

position的值， relative和absolute分别是相对于谁进行定位的

relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。
absolute:生成绝对定位，相对于最近一级定位不为static的父元素进行定位。
fixed: （老版本IE不支持）生成绝对定位，相对于浏览器窗口或者frame进行定位。
static:默认值，没有定位，元素出现在正常的文档流中。
sticky:生成粘性定位的元素，容器的位置根据正常文档流计算得出。

画一条0.5px的直线

    - height: 1px;
    - transform: scale(0.5);

calc, support, media各自的含义及用法

@support 主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。
calc() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “*”, “/” 运算；
@media 查询，你可以针对不同的媒体类型定义不同的样式

1rem、1em、1vh、1px各自代表的含义

rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
em子元素字体大小的em是相对于父元素字体大小,最近的font-size/父级/浏览器默认字体大小
- 元素的width/height/padding/margin用em的话是相对于该元素的font-size
vw/vh全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的话 vh 单位更好。
- 1vw = 1/100视口宽度
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
- 一般电脑的分辨率有{19201024}等不同的分辨率
- 19201024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

画一个三角形？

宽高为0，设置border 为正方形，利用border-color四个方向的颜色，三个方向为无颜色，一个为三角颜色，在旋转90度

    .a {
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent #0099CC transparent transparent;
    transform: rotate(90deg); /*顺时针旋转90°*/
}
<div class="a"></div>

常见兼容性问题？

浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

HTML常用笔记