前言：最近在进行前端的系统学习（html和css部分）。有一些感悟：

1.雪碧图

很多时候页面的图片不是一张一张从服务器请求的，而是一张图上面有很多的图片，通过background-position属性来显示这张图上的不同图片，另外，还需要width:76px;height:18px;这两个属性来显示图上不同大小的图片。如下图就是一张雪碧图：

2.页面图片显示

通常情况：下我们页面的样式（css）都是单独写在一个css文件中，通过”< link src=”css文件的路径” type=”text/css” href=”“stylesheet>”来引用。

但是是有例外，如果是图片（< img>）的话，你要在HTML标签中指定它的宽和高，如“< img src=”357a692e102648a48cd62f9351d171e320170907121955.jpeg” width=”200”; height=”90”; alt=”一百年前我们都只有1米5”;>< /img>”。

这样有什么好处呢？一方面可以加快图片文件的渲染速度；更重要的一点是可以对用户更友好。要弄明白这个问题，首先要明白页面的渲染机制：先看有没有行内样式，如果没有去< head>标签里面找对应样式（< style>）,最后是外链样式。如果 body 中的 img 标签引用了图片资源，则立即向服务器发出请求，此时引擎不会等待图片下载完毕，而是继续解析后面的标签；服务器返回图片文件，由于图片需要占用一定的空间，会影响到后面元素的排版，因此引擎需要重新渲染这部分内容；如果在最开始就给一个宽高，后期回流的时候，就不会造成页面布局位置变化，这样的用户交互很友好。

3.解决外层div不随内部div高度变化而变化

这里介绍一种流行的做法：额外标签法。

这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签。我个人不喜欢这种方法，但是它确实是W3C推荐的方法，具体做法:

使用after伪类

这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容。

这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证html 比较干净，所以用得还是比较多的。

给不随内部div变化高度的外层div增加一个额外的class属性（clearfix ），如：

<div class="data_row news_article clearfix news_first">

• 1

给这个class属性赋值

.clearfix:after{clear:both;height:0;overflow:hidden;display:block;visibility:hidden;content:".";}

• 1
• 2

然后刷新页面，外层div就会随着内层div高度的变化而改变自己的高度了，到此大功告成。

4.行内元素（inline）和块级元素（block）

• 1.常见的行内元素

一般的行内元素：对行内元素设置高度、宽度、内外边距等属性，都是无效的。如下：

a

em

i

select

small

strong

span

label

特殊的行内元素：可以设置宽和高，如下：

img

input

• 2.块级元素，会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子,常见的块级元素如下:

div

form

h1-h6

hr

ul

li

table相关的都是

• 3 .一个特殊的button（常用的可变元素），它是可变元素，据上下文语境决定该元素为块元素或者行内元素。
• 4.行内元素与块级元素直观上的区别:
• 行内元素:会在一条直线上排列，都是同一行的，水平方向排列
• 块级元素:各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
• 5.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。(但是行内元素可以变为块级元素)
• 6.行内元素转换为块级元素（很常用，很重要）