355.html布局

或许第一次看到html语言的人都是一头雾水,对于h1到h6的标题可能都能理解,但里面有那么多的div和span,不知道是什么意思。

网页经常经过精心的布局,而布局就必须理解块元素和内联元素(inline)的区别。

块的特点是:

  • 默认占满整个浏览器宽度
  • 上下边界各有一个换行
  • 高度因内容而异

内联元素的特点是:

  • 宽度因内容而异
  • 上下没有换行
  • 高度几乎固定

而div默认用来对网页进行大的分区,而span通常用来做内联元素的标记。

块元素一块一块从上向下排列,像一个个的厚箱子摞在一起。而内联元素在包含它的父块中,从左上往右下自动换行排列。

浏览器变窄时,内联元素原来的宽度不够,就会自动换行多出几行。而它的父块也会变高。

如果只是像千层饼,那显然也做不出好网页。而块元素必须能够改变宽度,宽度改变后,就可以两个块元素并排分布,类似分栏那种。

并且html还有浮动、绝对、相对的位置模式。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,681评论 1 92
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 8,573评论 0 5
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 7,488评论 0 30
  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 5,069评论 0 3
  • Html 标签 斜体 粗体 单独的样式 引用文本 长文本引用 换行 空格 分割线 地址信息 单行代码 多行代码 无...
    SunnySky_阅读 3,567评论 0 5