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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏lonelydawn的前端猿区

绚丽的javascript拾色器(不兼容IE8及以下)

一切尽在注释中 html节点 <div id="colorpicker" style="display:inline-block;"> <input clas...

4087
来自专栏王肖的UT

《OpenGL ES 2.0 for Android》读书笔记

1.6K9
来自专栏HTML5学堂

HTML标签嵌套规则

HTML5学堂:HTML标签存在一定的嵌套规则,如果我们不遵循这个嵌套规则进行代码书写,也能够实现出基本的功能(这大概也是HTML+CSS的特殊之处吧),但是直...

3314
来自专栏计算机视觉及音视频工程

Python常用写法理解

2973
来自专栏Golang语言社区

Go语言实现猜数字小游戏的方法

package main import ( "bufio" "fmt" "math/rand" "os" "strconv" ...

3185
来自专栏姬小光

小鸡君の前端小姜汤【第014期】- 内联样式

在第003期我们讲过一点所谓样式,当时举的栗子是行内样式,只能写在元素的标签上,作为 style 属性的值存在的。这一期我们学习内联样式,或叫嵌入样式。

833
来自专栏菩提树下的杨过

Flash/Flex学习笔记(22):滤镜学习

Silverlight中称之为“效果(Effect)”的东东,在Flash里叫“滤镜(Filter)",而且Flash里内置的滤镜要比Silverlight丰富...

2279
来自专栏前端知识分享

第59天:缓动动画封装函数

比如说  console.log(Math.ceil(1.01))       结果 是 2  

973
来自专栏Android常用基础

自定义View(四)-动画- Interpolator与Evaluator

Interpolator插值器之前我们已经接触过了,而Evaluator好像我们还没有将,这是属性动画中俩个比较中的两个知识点,弄清楚它们有助于我们更好的使用与...

1812
来自专栏数据小魔方

动态图表10|可选折线图(复选框)

今天要跟大家分享的是动态图表10——可选折线图(复选框)。 本篇推送主要向大家介绍如何使用复选框控制多维图表。涉及到的核心技巧主要有:复选框;if+or函数;图...

3084

扫码关注云+社区

领取腾讯云代金券