HTML基础知识复习

//盒模型

!DOCTYPE html. //指定文档类型

不加!DOCTYPE html会使得IE6以及早期版本默认为怪异盒模型

标准盒模型和怪异盒模型的区别：

标准盒模型的宽度和高度是指内容

怪异盒模型的宽度，高度是说内容+padding+border(没有margin)

如何在标准盒模型里实现怪异盒模型？

给元素加一个属性box-sizing:border-box;//这是css3的属性

 

//行级元素和块级元素

行内元素：

与其他行内元素并排

不能设置宽高，默认的宽度就是文字的宽度

块级元素：

独占一行，不能与其他任何元素并列。

能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。

块级元素和行内元素的分类：

在HTML的角度来讲，标签分为：

文本级标签：p , span , a , b , i , u , em

容器级标签：div , h系列 , li , dt ,dd

p：里面只能放文字和图片和表单元素，p里面不能放h和ul，也不能放p。

从CSS的角度讲，CSS的分类和上面的很像，就p不一样：

行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级标签，但是是个块级元素。

块级元素：所有的容器级标签，都是块级元素，以及p标签

 

面试题：img标签的title和alt分别是干什么用的？

alt标签是用来对图片进行加载失败时进行注释的，title是鼠标悬停时进行注释的。

 

//BFC（block formattig context）

块级格式化上下文

含义：

block：块级元素；formatting context：特指一块渲染区域，该区域内元素的排列布局绝对不会影响该区域外元素排列布局

应用条件：

float属性不为none.

position属性为absolute和fixed.

display属性为下列之一:table-cell,table-caption,inline-block,flex,or inline-flex.

overflow属性不为visible.

BFC的作用：

1、利用BFC可以消除margin collapse（两个元素之间外边距合并问题）

原理：同一个BFC中会发生margin重叠的情况，当两个元素处于不同的BFC中，即可消除margin重叠

2、用BFC解决子元素脱离文档流，父元素没有高度的问题。可以在父元素上面也设置overflow:hidden；

原理：触发BFC后，就不会影响BFC外的元素

3、利用BFC阻止文本环绕浮动元素

详解看这位大神的博客：https://www.jianshu.com/p/66632298e355

---

to be continued