前端知识总结（css html）周记

css知识点总结

1 如何防止出现乱码？

<meta charset="UTF-8">

2 如果使用了 float 的元素，没有实现并排效果，可能出现的问题？

父级的宽度不够，导致元素无法并排显示；

3. 解决 img 图片自带边距的问题

谷歌中这样是解释的：

图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的。所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。

解决办法：

最优的解决办是定义vertical-align，注：定义vertical-align为middle时在IE6中大概还有一像素的顶边距，最好为top或bottom。当然还有种极端解决办法大家可以试试就是将 父容器的字体大小为零，font-size:0

（1）转化成（行级）块元素

 display : block

（2）浮动，浮动后的元素默认可以转化为块元素（可以随意设置宽高属性）

float ： left；

（3）给 img 定义 vertical-align（消除底部边距）

img{    
    border: 0;    
    vertical-align: bottom;
}

（4）将其父容器的font-size 设为 0；

（5）给父标签设置与图片相同的高度

4 行内元素和块级元素的区别是是什么。

行内元素：
（1）行内元素不换行

（2）行内元素不可以设置大小

（3）行内元素大小由内容决定

块元素：

（1）块元素独立成行

（2）块元素可以设置大小

（3）块元素如果不设置宽度，宽度会自适应其父级的宽度

5 列举常用行内元素和块元素，并解释其作用

行元素：
span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select（下拉列表）、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）

从浏览器的显示结果可以看出，相邻的行内元素不换行，宽度即为内容的宽度、padding的4个方向都有效（从span标签可以看出，对于行内非替换元素，不会影响其行高，不会撑开父元素；而对于替换元素，则会撑开父元素）、margin只有水平方向有效（其中垂直方向的margin对行内替换元素（比如img元素）有效，对行内非替换元素无效）、不可以设置width和height属性。行内块元素表现其实和行内元素一样，只是其可以设置width和height属性。

块元素：
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等

从浏览器的显示结果可以看出，块级元素新开启一行（即使是设置了width属性也是独占一行）、尽可能撑满父级元素的宽度，可以设置width和height属性；table元素浏览器默认的display属性为table。

6 如何理解 CSS 的继承和重用？

继承：在一个属性应用于一个特定标签之后，该标签的子标签也应该应用该属性。这一行为称为继承。但并不是所有的属性都会被继承。如文字样式一般都继承，盒图的宽高一般不 继承，总之该继承的都会继承，不该继承的都不继承。

重用：一个样式文件，可以多个页面使用，这对于一些公共样式的重构是很有用的。

6 常见的浏览器内核有哪计算些？

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私有特性]

7 浏览器内核的理解

主要分成两部分：渲染引擎（layout engineer或Rendering Engine）和 JS 引擎。

（1）渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户以及其他它所需要编辑、显示网络的应用程序都需要内核。

（2）JS引擎则：解析和执行JavaScript 来实现网页的动态效果；

最开始渲染引擎和 JS 并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只渲染引擎。

8 CSS引入的方式有哪些？使用Link和@import有什么区别？

答：内联，内嵌，外链，导入

（1）link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义RSS，定义 rel 连接属性等作用，无兼容性，支持使用javascript改变样式；而@import是CSS提供的，只能用于加载CSS，不支持使用 javascript 改变样式；

（2）页面被加载的时，link 会被同时加载，而@import 引用的CSS会等到页面加载完再加载；

（3）import是CSS2.1 提出的，CSS2.1以下浏览器不支持，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题

9 CSS3有哪些新特性？

1. CSS3实现圆角（border-radius），阴影（box-shadow），

2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

4. 增加了更多的CSS选择器 多背景 rgba

5. 在CSS3中唯一引入的伪元素是 ::selection.

6. 媒体查询，多栏布局

10 rgba() 和 opacity 的透明效果有什么不同？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

11 CSS Sprites是什么？它的优势和劣势？

CSS Sprites小图片背景共享技术。它把一堆小的图片整合到一张大的图片上。然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

优势：

1.很好的减少网页的请求，大大提高页面的性能；

2.减少图片的字节；

3.解决了网页设计师在图片命名上的困扰；

4.更换风格方便，维护方便。

劣势：

1.图片合并时需预留好足够空间，宽屏、高分辨率的屏幕下易出现背景断裂；

2.开发较麻烦，测量繁琐；（可使用样式生成器）

3.维护麻烦，背景少许改动有可能影响整张图片，使得字节增加还要改动css。

12 CSS 伪类和伪元素的区别？

第一种回答：

伪类： :focus、:hover、:active

伪元素：:before、:after

伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；

伪元素本质上是创建了一个有内容的虚拟容器；

CSS3中伪类和伪元素的语法不同；

可以同时使用多个伪类，而只能同时使用一个伪元素；

第二种回答：

伪类：伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

:first-child 🔗 :visitive :hover :active :focus :lang

伪元素：与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。