清楚了CSS 盒模型的基本概念、 盒模型类型, 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式。
CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。
在网页中,元素有三种布局模型:
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)
流动模型,流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动布局模型具有2个比较典型的特征:
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)
右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。
浮动模型,块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。
任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
层布局模型
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。
如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位(position)属性来支持层布局模型。
层模型有三种形式:
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
层模型--绝对定位
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
层模型--相对定位
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
相关推荐
### CSS布局模型详解 #### 一、引言 随着网络技术的发展,网页设计的重要性日益凸显。其中,CSS作为网页布局的重要工具之一,其布局技术逐渐成为网页设计师们必须掌握的关键技能。然而,对于许多初学者而言,如何...
**CSS布局模型** 在网页设计领域,CSS(Cascading Style Sheets)布局模型是至关重要的一个部分,它决定了网页元素如何在屏幕上排列和组织。理解并掌握CSS布局模型能够帮助开发者创造出美观、响应式且易于维护的...
首先,关于文档的标题“浮动、定位及CSS布局模型.pdf”,我们可以得知文档主要讨论了三个关于CSS(层叠样式表)的关键概念,这些概念是前端开发人员在构建网页布局时必须要掌握的。具体的知识点包括: 1. 浮动...
CSS布局模型是网页设计中的关键概念,它涉及到如何在网页上组织和定位元素。XHTML+CSS的标准布局已经成为现代网页设计的主流,因为它提供了更好的可维护性、可访问性和灵活性。然而,对于初学者来说,理解和掌握CSS...
二、CSS布局模型 1. 盒模型:CSS盒模型是理解布局的基础,它包括元素的内容区域、内边距、边框和外边距。 2. 浮动布局:float属性常用于创建多列布局,元素会浮动到其父元素的左侧或右侧。 3. 定位布局:position...
CSS布局模型是实现网页布局的基石,涉及如何使用CSS的属性和规则来安排网页中的元素。下面详细阐述一些主要的CSS布局模型。 流动模型是CSS中最基本的布局方式。在流动布局中,元素按照他们在HTML文档中的顺序流动...
2. 布局模型:CSS布局模型包括盒模型、流体布局和响应式布局。盒模型是理解CSS布局的基础,包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。流体布局则利用百分比实现元素的自适应宽度,适合...
6. **Flexbox布局**:弹性盒模型(Flexbox)是现代CSS布局的一个重要工具,适用于单一维度的布局(如行或列)。它简化了对元素的对齐、排序和分配空间的操作,尤其适合响应式设计。 7. **Grid布局**:CSS网格布局...
- **Flexbox布局**:现代CSS布局模型,适用于一维布局,如行或列。 - **Grid布局**:二维布局系统,适合创建复杂的网格布局。 5. **实战应用**: - 分析提供的"DIV+CSS常用布局模板"源代码,理解每个模板的结构...
首先,我们来了解CSS布局模型。CSS布局模型包括流动模型、浮动模型和层模型。流动模型是默认的布局方式,块状元素垂直排列,内联元素水平排列。浮动模型让块级元素能够在一行上展示,常常用于创建多栏布局。层模型则...
**四、CSS布局模型** 1. **盒模型**:每个HTML元素都可看作一个矩形盒子,包含内容区、内边距、边框和外边距。理解盒模型是掌握布局的关键。 2. **流体布局**:基于百分比的宽度设置,让页面元素能根据浏览器窗口...
Flexbox是现代CSS布局模型,适用于单行或多行布局,能自动处理元素的对齐、扩展和收缩。通过flex属性,可以轻松实现响应式设计。 **八、Grid布局** CSS Grid布局提供了一种二维网格系统,使得创建复杂的、响应式的...
Flexbox和Grid是现代CSS布局模型,能更高效地处理复杂布局,如响应式设计和自适应内容排列。 3. **外部样式表(external.css)** `external.css`文件是将样式规则从HTML文档中分离出来的方式,提高代码复用性和可...
8. **Flexbox布局**:现代CSS布局模型,能够轻松处理各种复杂的弹性布局,如居中对齐、自适应高度等。 9. **Grid布局**:CSS Grid提供二维布局,可以方便地创建复杂的、响应式的网格系统。 通过实践这些例子,初学...
5. **Flex布局**:Flex布局(弹性盒模型)是现代CSS布局的主要方式,适用于一维布局。它允许在容器中灵活调整子元素的大小和顺序,以适应不同屏幕尺寸。 6. **Grid布局**:Grid布局则适用于二维布局,能更方便地...
Flexbox(弹性盒布局)是现代CSS布局模型,适用于单一维度布局,如一行或一列。它可以轻松实现元素的对齐、分配空间和自适应布局。 七、Grid布局 CSS Grid(网格布局)是二维布局模型,可以同时处理行和列,适用于...
首先,盒模型是CSS布局的基础,它定义了元素的尺寸如何计算,包括内容区域、内边距、边框和外边距。理解这个模型对于精确控制元素大小和位置至关重要。 其次,流体布局使页面能够适应不同屏幕尺寸,这是响应式设计...