专栏首页java达人HTML布局的基本要点

HTML布局的基本要点

如果要掌握、运用好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属性是否会使元素脱离这个普通流是一个关键点

本文分享自微信公众号 - java达人(drjava)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-04-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery常用选择器

    在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用...

    java达人
  • mysql explain详解

    对于经常使用mysql的兄弟们,对explain一定不会陌生。当你在一条SELECT语句前放上关键词EXPLAIN,MySQL解释它将如何处理SELECT,提供...

    java达人
  • 与我一起学习微服务架构设计模式4—使用Saga管理事务

    微服务架构下的事务往往需要横跨多个服务,每个服务都有属于自己的私有数据库。传统的分布式事务管理并不是合适选择,需要使用Saga机制。

    java达人
  • (2019)[前端]面试题[1]:小知识点大集合

    答:不区分,(HTML, CSS都不区分,但为了更好的可读性和团队协作,一般都小写,而在XHTML 中元素名称和属性是必须小写的。)

    无道
  • css选择器

    下面是一张取自w3cschool的css选择器表 链接地址:http://www.w3school.com.cn/cssref/css_selectors.as...

    lonelydawn
  • jquery教程之查找筛选函数

    三、children 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

    老雷PHP全栈开发
  • Pseudo elements伪元素与Pseudo classes伪类

    ::after用于描述处于css渲染层的一个伪元素,相当于选中元素的最后一个子元素,但这个元素与DOM节点无关,位于选择的元素之后,伪元素的内容用content...

    gojam
  • 我不知道你知不知道我知道的伪元素小技巧

    伪元素能做什么?我们要他有何用?它能为我们解决什么问题?和其他的方法相比她有什么有点?我们为什么要使用它?

    sunseekers
  • 如何使用python进行web抓取?

    本文摘要自Web Scraping with Python – 2015 书籍下载地址:https://bitbucket.org/xurongzhong/py...

    CDA数据分析师
  • 常见排列组合问题的计算公式

    在进行排列组合计算以及概率计算时我们经常会遇到一些具有相同性质的问题。假设问题的样本空间Ω中一共有k种类型的元素α, β,γ... κ。每种类型的元素个数分别为...

    欧阳大哥2013

扫码关注云+社区

领取腾讯云代金券