html和css的基本功

1.块级元素和行内元素和行内块元素的区别

块级元素：独占一行的，可以设置宽高和内外边距的（<div>/<h1>~<h6>/<p>/<ul>/<table>）

行内元素：不独占一行，不可以设置宽高，其大小仅仅被动的依赖于自身内容的大小

行内块元素：不独占一行，和相邻的行内元素在同一行，有间隔，可以设置宽高（<img>/<input>/<td>）

2.用css写三角形

等边三角形

<div class ="box"></div>

.box{

width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom:50px solid red

}

直角三角形

<div class ="box"></div>

.box{

width: 0;
    height: 0;
    border-left: 50px solid transparent;
    /*border-right: 50px solid transparent;*/

border-bottom:50px solid red

}

根据自己的需求去调整相对应得方位，自己去浏览器上试；

3.盒子模型的计算方法：

标准的盒子模型的宽高=左右padding+左右margin+左右border+width/height

IE盒子模型的宽高=左右padding+左右border+width/height

4.很多浏览器中body都有默认的margin的值是多少？

我们一般的浏览器的默认值都是8px

5.

对BFC规范的理解？

规范理解：

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗理解：

BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。

如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

浮动元素会创建BFC，则浮动元素内部子元素主要受该浮动元素影响，所以两个浮动元素之间是互不影响的。

6. 浏览器标准模式和怪异模式之间的区别是什么?

标准答案：

    由于历史的原因，不同浏览器对页面的渲染是不同的，甚至同一浏览器的不同版本也是不同的。在W3C标准出台之前，不同的浏览器在页面的渲染上没有同一的规范，产生了差异，即Quirks mode(怪异模式或兼容模式)；当W3C标准出台之后，不同浏览器对页面的渲染有了统一的标准,即Strict mode（标准模式或严格模式）；这就是两者之间的区别。

7. 标签上title与alt属性的区别是什么?

title：属性实在鼠标放在上面显示注释的；

alt:属性实在图片没有加载出来时显示内容的；

8.CSS的伪类有哪些？有什么作用？在各个浏览器下都兼容吗？

:hover、:visited、:link、:active。

link没有点击的

visited：点击过的

hover悬停的

active是按下那一瞬间。

都兼容，但是要按照“爱恨准则”link、visited、hover、active放置。
9.HTML的语义化

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

10.HTML5 Canvas元素有什么用

元素可以为你提供一种使用 JavaScript来绘制图形的简单而强大的方法。它可以用于绘制图形，合成制作照片或做简单（而不是那么简单）的动画。
<canvas>是一个简单的元素，它只有两个特定属性“width”和“height”以及所有核心HTML5属性，如id，name和class等。