首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML布局的基本要点

HTML布局的基本要点

作者头像
java达人
发布2018-01-31 10:49:59
2K0
发布2018-01-31 10:49:59
举报
文章被收录于专栏:java达人java达人

如果要掌握、运用好Position、Float属性必须要对HTML的两个基本点有清晰的了解。

  1. 盒子模型(box model)
  2. HTML的普通流(normal flow)
盒子模型

在HTML中元素的盒子模型分为两种:块状元素、行内元素,请注意这里的块状元素(Block)和行内元素(Inline)与Display属性中的inline、block两个属性值并不等同。盒子模型中的Inline、Block类似于是Display属性的父类,例如:Display属性中的list-item属性值是属于块状(Block)类型的。

我们直观的上看两种盒子模型的区别

  • 块状(Block)类型的元素可以设置width、height属性,而行内(Inline)类型设置无效。
  • 块状(Block)类型的元素会独占一行(直观的说就是会换行显示,无法与其他元素在同一行内显示,除非你主动修改元素的样式),而行内(Inline)类型的元素则都会在一行内显示。
  • 块状(Block)类型的元素的width默认为100%,而行内(Inline)类型的元素则是根据自身的内容及子元素来决定宽度。

列举出一些大家常见的元素的分类

  • 块状元素:P、DIV、UL、LI、DD、DT...
  • 行内元素:A、IMG、SPAN、STRONG...
HTML的普通流

浏览器在读取HTML源代码的时候是根据元素在代码出现的顺序读取,最终元素的呈现方式是依据元素的盒子模型来决定的。行内元素是从左到右,块状元素是从上到下。(如下图)

<style type="text/css">
  div { width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }
  strong { background: #808080; }
  em { background: #ffd800; }
  span { background: #b6ff00; }
</style>
<strong>strong</strong><em>em</em><span>span</span>
<div style="background: blue">A</div>
<div style="background: red">B</div>
<div style="background: green">C</div>

如果你不改变元素的默认样式前提下,元素在HTML的普通流中会“占用”一个位置,而“占用”位置的大小、位置则是由元素的盒子模型来决定。因此,在后续讲的Position、Float属性是否会使元素脱离这个普通流是一个关键点

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2015-04-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 java达人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 盒子模型
  • HTML的普通流
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档