HTML\CSS知识点（一）

HTML方面：

哪些元素是inline？哪些是inline-block？哪些是block？

inline元素特点：

• 和其他元素都在一行上；
• 元素的高度、宽度、行高及顶部和底部边距不可设置；
• 元素的宽度就是它包含的文字或图片的宽度，不可改变。
  常见的inline元素：
  span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block））

inline-block元素特点：

• 和其他元素都在一行上；
• 元素的高度、宽度、行高以及顶和底边距都可设置

常见的inline-block元素：
img、input

block元素特点：

• 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）;
• 元素的高度、宽度、行高以及顶和底边距都可设置;
• 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

常见的block元素：
div、p、h1…h6、ol、ul、dl、table、address、blockquote、form

html标签的嵌套规范

• 块级元素与块级元素平级、内嵌元素与内嵌元素平级
• 块级元素可以包含内联元素或某些块元素，但是内联元素不能包含块元素，它只能包含其他的内联元素。
• 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素 h1~h6、p、dt
• 块级元素不能放在标签p里面
• li标签可以包含标签，因为li和div标签都是装载内容的容器。

标签语义化

在合适的地方用合适的标签，用正确的标签做正确的事

meta标签的作用

meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

标签始终位于 head 元素中。

其实对上面的概念简单总结下就是：<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

哪些标签的使用可以有利于seo(搜索引擎优化)？

title标签、meta标签中的Keyword属性、meta标签中的Description属性、h系列标题标签、img标签中的alt属性、
a标签中的nofollow、

CSS方面：

清除浮动的方法

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）
2.父级添加overflow属性（父元素添加overflow:hidden）
3.使用after伪元素清除浮动
4.使用before和after双伪元素清除浮动

div嵌套img时多出空白怎么解决？

产生空白的原因：img标签的display属性默认是inline，而对应的vertical-align属性的默认值是baseline。所以就会出现图片底部出现一片空白区域的现象。
解决办法：
1、div{ font-size: 0}
2、img{ display: block}
3、img{ vertical-align:top;}
4、div{line-high:0}
5、如果img后还有其他兄弟标签，写代码时两标签之间不换行

margin击穿问题怎么解决？

1、父级或子元素使用浮动或者绝对定位absolute 浮动或绝对定位不参与margin的折叠
2、父级overflow:hidden;
3、父级设置padding（破坏非空白的折叠条件）
4、父级设置border

什么是盒子模型

把所有的网页元素都看成一个盒子，它具有：
content，padding，border，margin 四个属性，这就是盒子模型

什么是bfc ifc？

BFC叫做“块级格式化上下文"
1.内部的盒子会在垂直方向，一个个地放置；
2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
4.BFC的区域不会与float重叠；
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
6.计算BFC的高度时，浮动元素也参与计算。

IFC叫做“行级格式化上下”
1.内部的盒子会在水平方向，一个个地放置；
2.IFC的高度，由里面最高盒子的高度决定；
3.当一行不够放置的时候会自动切换到下一行；

position设置为absolute时div宽度是怎样的？

当父级元素position设置为absolute后，宽度以子元素内容的宽度一致，所有包含的块级元素的宽度与最宽的子元素宽度一致。
行内元素，设置float之后可以设置宽高。

position为relative时z-index起作用吗？

不起作用
解决方法：
1、判断被覆盖的层（想要置顶的层）的postion是否也为relative或者absolute
2、如果1成立，则判断是否此层的z-index比误覆盖的层的z-index数值大
3、如果2成立，判断是否此层的父级元素比误覆盖的层的z-index数值大
4、如果3成立，判断是否此层的父级元素比误覆盖的层的父级层的z-index数值大

rgba的含义

RGBA是代表Red（红色）Green（绿色）Blue（蓝色）和不透明度参数。如果一个像素的不透明数值为0.0，就是完全透明的。为1.0完全不透明。

opacity和rgba的区别

opacity是一个属性，而非一个属性值，语法为 ：

opacity: value|inherit;

value:不透明度，从 0.0 （完全透明）到 1.0（完全不透明）

不同点：
有opacity属性的所有后代元素都会继承 opacity 属性，而RGBA后代元素不会继承不透明属性

有几种方式可以实现元素的上下居中？

1、单行文本垂直居中方法
该方式只适用于情况比较简单的单行文本，只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。
2、多行文本垂直居中方法
2.1父级元素display:table-cell，vertical-align:middle；
2.2使用table来布局；
2.3多行内容居中，且容器高度可变，也很简单，给出一致的 padding-bottom 和 padding-top ；
3、div垂直居中：inline-block
给元素设置dispaly：inline-block配合vertical-align：middle来垂直居中
div垂直居中：绝对定位之margin：auto
父元素相对定位，子元素绝对定位。 子元素的上下左右均设置0定位且设置margin：auto

响应式布局的优缺点？

响应式网页设计的优点：

1. 跨平台和终端且不需要分配子域。
2. 兼容当前及未来设备。
3. 节约成本。

缺点：

1. 兼容性 不兼容低版本浏览器
2. 移动带宽增多
3. 加载事件长、无用代码太多。