流动模型(一)

先来说一说流动模型,流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征:

第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。

示例:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流动模式下的块状元素</title>
<style type="text/css">
#box1{
    width:300px;
    height:100px;
}
div,h1,p{
    border:1px solid red;
}
</style>
</head>
<body>
    <div id="box2">box2</div><!--块状元素,由于没有设置宽度,宽度默认显示为100%-->
    <h1>标题</h1><!--块状元素,由于没有设置宽度,宽度默认显示为100%-->
    <p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--块状元素,由于没有设置宽度,宽度默认显示为100%--> 

    <div id="box1">box1</div><!--块状元素,由于设置了width:300px,宽度显示为300px-->
</body>
</html>

效果:

时间: 2024-10-13 17:20:10

流动模型(一)的相关文章

流动模型(二)

第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示.(内联元素可不像块状元素这么霸道独占一行) 右侧代码编辑器中内联元素标签a.span.em.strong都是内联元素. 示例: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>

CSS布局模型(流动模型、浮动模型、层模型)

在网页中,元素有三种布局模型: 1.流动模型(Flow) default,就是块级元素都自上而下的分布,宽度都为100%.内联元素都从左到右水平分布. 2.浮动模型 (Float) div.p.table.img 等元素都可以设置为浮动.两个 div 显示在一行的代码如下: div{ width:200px; height:400px; border:2px red solid; float:left; } 3.层模型(Layer) 层模型有三种形式: (1)绝对定位(position: abs

流动模型/a标签换行问题

流动模型(一) 先来说一说流动模型,流动(Flow)是默认的网页布局模式.也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的. 流动布局模型具有2个比较典型的特征: 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%.实际上,块状元素都会以行的形式占据位置. 如下面代码中的三个块状元素标签(div,h1,p)宽度显示为100%. 实例: <!DOCTYPE HTML> <html> <he

布局模型 之 层模型(position的relative、absolute与fixed区别?)

css的布局模型分为流动模型(Flow).浮动模型(Float).层模型(Layer). 浮动模型(Float)和层模型(Layer)有什么显著区别?     浮动模型(Float):浮动是让某元素脱离文档流的限制,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动:浮动的元素仍然会占据文档流的物理空间.关于浮动模型的详细说明请看另一篇文章的介绍.http://ycgit.blog.51cto.com/8590215/1958452 层模型(Layer):设置为层模型的元

CSS:3种基本的布局模型、层模型的三种形式

CSS包含3种基本的布局模型: 用英文概括为:Flow.Layer 和 Float.在网页中,元素有三种布局模型:1.流动模型(Flow)2.浮动模型 (Float)3.层模型(Layer) 流动布局模型具有2个比较典型的特征: 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%.实际上,块状元素都会以行的形式占据位置.如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%. 第二点,在流动模型下,内联元素都会在所处的

css布局模型

清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了. 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板. 如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式. CSS包含3种基本的布局模型,用英文概括为:Flow.Layer 和 Float.在网页中,元素有三种布局模型:1.流动模型(Flow)2.浮动模型 (Float)3.层模型(Laye

Web前端开发基础 第四课(CSS元素模型)

css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式. CSS包含3种基本的布局模型,用英文概括为:Flow.Layer 和 Float.在网页中,元素有三种布局模型:1.流动模型(Flow)2.浮动模型 (Float)3.层模

前端布局模型

一.CSS包含3种基本的布局模型,用英文概括为:Flow.Layer 和 Float.在网页中,元素有三种布局模型:1.流动模型(Flow) 流动模型是默认的网页布局模式. 在流动模型下,内联元素都会在所处的包含元素内从左到右按顺序水平分布显示. 在流动模型下,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,在默认状态下,块状元素的宽度都为100%. 2.浮动模型 (Float)float:right/left/none; 任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动

CSS——布局模型

1.三种布局模型: 流动模型Flow 浮动模型Float 层模型Layer 2.流动模型: 默认布局模式. 特点: 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,默认块状元素的宽度都为100%,以行的形式占据位置. 内联元素都会在所处的包含元素内从左到右水平分布显示,如a.span.em.strong. 3.浮动模型: 让块状元素并排显示的方式. float: left.right xxx{float:left;} 4.层模型: 让元素在网页中精确定位的方式. >三种形式: 绝对定位