css布局模式
css布局模型在网页中,元素有三种布局模型:
- 流动模型(Flow)
- 浮动模型 (Float)
- 层模型(Layer)
流动Flow模型(一):
流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动布局模型具有2个比较典型的特征:
- 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。除非设置该元素宽度。
- 第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)
流动flow模型(二)
任何元素在默认情况下是不能浮动的,让多个块状元素并排显示,float:left;就可以实现。下图是一左一右。
层模型layer
- 层模型有三种形式:
- 绝对定位(position: absolute):使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如图所示:
- 相对定位(position: relative)相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
- 固定定位(position: fixed)。fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。
Relative与Absolute组合使用
- 决定定位absolute是根据浏览器设置定位的,可以结合相对定位relative来实现相对于某个块元素决定定位。需要决定定的块元素需要{position:absolute;left: ;top:;right: ;bottom: ;},在决定定位的父元素需要{position:relative;}即可。
css布局模式的更多相关文章
- CSS ? Layout Module : CSS 布局模型
1 1 1 https://www.w3.org/TR/css-grid-1/ CSS Grid Layout Module Level 1 W3C Working Draft, 19 May 201 ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS布局
1流动模型 先来说一说流动模型,流动(Flow)是默认的网页布局模式.也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的. 流动布局模型具有2个比较典型的特征: 第一点,块 ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
- 熟悉HTML CSS布局模型
HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
- css布局模型
---恢复内容开始--- 在清楚了CSS盒模型的基本概念,盒模型类型,我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是CSS最基本,最核心的概念.但布局模型是建立在盒型基础之上,又不同 ...
- CSS布局(下)
1.CSS布局之浮动 1.1.float之图文混排 float的意思就是元素漂浮在上层. 可以直接通过设置float属性实现图文混排,代码如下: <div style="width:2 ...
- 浅析css布局模型1
css是网页的外衣,好不好看全凭css样式,而布局是css中比较重要的部分,下面来分析一下常见的几种布局. 流动模型 流动模型是网页布局的默认模式,也是最常见的布局模式,他有两个特点: 1.块状元素都 ...
- CSS布局一
CSS布局一 实例一(居中) div#container{ width:960px; height:650px; margin:0 auto; border:1px solid #ccc; /*就是说 ...
随机推荐
- 10034 - Freckles 克鲁斯克尔最小生成树!~
/* 10034 - Freckles 克鲁斯克尔最小生成树!- */ #include<iostream> #include<cstdio> #include<cmat ...
- uva oj 567 - Risk(Floyd算法)
/* 一张有20个顶点的图上. 依次输入每个点与哪些点直接相连. 并且多次询问两点间,最短需要经过几条路才能从一点到达另一点. bfs 水过 */ #include<iostream> # ...
- Android抓包方法(二)之Tcpdump命令+Wireshark
Android抓包方法(二) 之Tcpdump命令+Wireshark 前言 做前端测试,基本要求会抓包,会分析请求数据包,查看接口是否调用正确,数据返回是否正确,问题产生是定位根本原因等.学会抓包分 ...
- SQL Server存储(6/8) :理解DCM页
我们已经讨论了各种不同的页,包括数据页.GAM与SGAM页.PFS页,还有IAM页.今天我们来看下差异变更页(Differential Change Map:DCM ),还有差异备份(differen ...
- JS魔法堂:初探传说中的setImmediate函数
一.前言 由于JavaScript程序为单线程,因此在执行长时间的操作时(如循环和递归操作)到导致UI线程长期被阻塞,无法响应用户操作请求(如点击按钮等),让用户体验大打折扣.于是想到将一个长时间 ...
- MVC知识进阶01
下面是在项目中有关于MVC的知识总结,有些地方若不对,请指出. 一:MVC的基本知识 1 名词解释 *惯例优先原则<约定大于配置>:是一种开发设计模式,说是在项目里面使用事先规定的命 ...
- 功能更新到 Windows 10 企业版, 版本 1607
功能更新到 Windows 10 企业版, 版本 1607
- C#读取Appconfig中自定义的节点
今天在使用Nlog的时候,发现了一个之前没注意的问题. 以前,我的app配置文件都是这么写的,当然配置比较多的时候会改用xml. 如果<appSettings>节点中的内容很多的话,我自己 ...
- 画一画javascript原型链
在javascript中,几种数据类型String,Number,Boolean,Object,Function都是函数,可称之为函数对象. 可以说拥有prototype属性的都是函数. 所有对象都拥 ...
- 对于 ThreadLocal 的理解和应用
首先,ThreadLocal 不是用来解决共享对象的多线程访问问题的,一般情况下,通过ThreadLocal.set() 到线程中的对象是该线程自己使用的对象,其他线程是不需要访问的,也访问不到的.各 ...