前端开发(HTML+CSS静态部分)

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

1.雪碧图

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

前端开发(HTML+CSS静态部分)

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.行内元素转换为块级元素(很常用,很重要)

前端开发(HTML+CSS静态部分)

相关推荐