前端css——css三大布局模型
在网页中,标签有三种布局模型:
- 1、流动模型(Flow)
- 2、浮动模型(Float)
- 3、层模型(Layer)
- 1、绝对定位(position:absolute)
- 2、相对定位(position:relative)
- 3、固定定位(position:fixed)
1、流动模型(Flow)
流动(Flow)是默认的网页布局模式
,也就是说网页在默认状态下的html网页元素都是根据流动模型来分布内容的
流动布局模型具有2个比较典型的特征(就是html的三种元素的布局特征):
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行
)a、span、em、strong等等
2、浮动模型(Float)
任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动
,如 div、p、table、img等元素都可以被定义为浮动
块状元素这么霸道都是独占一行
,如果现在我们想让两个块状元素并排显示
,去抢占
资源
float:left;左浮动
float:right;右浮动
clear:both;
clear,顾名思义就是清除的意思,both的意思是全部,那连起来就是清除全部样式
3、层模型(Layer)
层布局模型
CSS定义了一组定位(positioning)属性来支持层布局模型
层模型有三种形式
1、绝对定位(position:absolute)
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位
),
这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性
相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
2、相对定位(position:relative)
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位
),
它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
3、固定定位(position:fixed)
fixed
:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。 由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。
前端css——css三大布局模型相关推荐
- CSS的三大布局方式(流式布局,浮动布局和层布局)
文章目录 前言 一.标准文档流 二.三种布局方式 1.流式布局 2.浮动布局 (1)字围效果 (2)圣杯布局 3.层布局 定位的分类: (1) 相对定位 position:relative (2) 绝 ...
- web前端——html基础笔记 NO.12{css布局模型(流动,浮动,层模型)}
css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又 ...
- css中如何实现帧布局_浅谈web前端中的表格布局与CSS盒子布局
在web前端设计排版时我们可能会用到表格布局和div+CSS布局,但现在主要使用后者,为何?今天我们来谈一谈两者之间的发展和原理. 话不多说下面来干货 发展过程 上个世纪Web开发人员流行使用表格进行 ...
- 从零开始学前端 - 7. CSS盒模型 margin和padding详解
作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
- Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框、内边距、外边距
前言 持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍 盒子的概念 页面中的每一个标签,都可看做是一个 "盒子&qu ...
- 前端之CSS篇(三)——CSS三大特性及盒子模式和边距边框
1.CSS的三大特性 CSS有三个非常重要的三个特性:层叠性.继承性.优先性 1.1 层叠性 相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式.层叠性主要解决样式冲突的问题. ...
- 前端面试CSS自检(下)页面布局、定位与浮动和场景应用(先看问题 自己自述一遍 不会再看答案 )
推荐大家的使用本篇文章的方式: 先看问题自己会不会,如果会的话,要自己说一遍,组织好语言. CSS的面试内容主要可以分四个部分: CSS基础.页面布局.定位与浮动和场景应用 CSS部分会涉及到代码的编 ...
- 熟悉HTML CSS布局模型
HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
- css响应式布局_Web前端新手怎么入门 如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
最新文章
- linux进程间通信:POSIX 消息队列
- matplotlib 子图超过4个_走进Matplotlib世界(四)
- [Google API](7)直接使用Web服务
- FastJson 打Release 包解析失败
- linux 系统迁移到固态硬盘,windows 和 Linux 系统 从硬盘迁移到SSD
- mysql 子查询优化一例
- C++类的组合和前向引用
- 【Java学习笔记之十五】Java中的static关键字解析
- php 用户中心 框架,OpenCenter —— PHP 通用用户中心框架【国人开发,代码托管在 Git@OSC】...
- DB2 9 运用开拓(733 测验)认证指南,第 4 部门: 嵌入式 SQL 编程(4)
- Gephi初识之简单绘图学习
- CNN(卷积神经网络)、RNN(循环神经网络)、DNN(深度神经网络)概念区分理解
- 痞子衡嵌入式:如果你正在量产i.MX RT产品,不妨试试这款神器RT-Flash
- 如何快速合并多个PDF文件或图片为一个PDF文件?
- 2021年dedecms伪原创插件,织梦AI文章伪原创插件使用方法
- 【MySQL】新闻发布系统数据库设计
- 【c语言】求方程式 ax^2+bx+c=0 的根,分别考虑:1、有两个不等的实根 2、有两个相等的实根
- vfp access mysql具体_详细介绍Visual FoxPro数据表的索引
- import语句在包名前加static
- UVA(WA) 10815 安迪的第一个字典
热门文章
- 简易教程:教你如何使用Meshlab提取已有的三维模型的结构点云
- 如何在Android Framework中添加自定义硬件编解码器?
- PMP考试计算专题——网络图
- python3 cookbook中常遇问题的解答记录
- 全国计算机设计大赛贴吧,2019继续教育学院精彩时刻——大赛篇
- linux硬件时间与系统时间不同步,Linux系统时钟和硬件时钟不一致
- alevel计算机教材答案,alevel计算机教材电子版及内容和目录大纲
- SPSS数据拆分(分组)
- 【已解决】Windows更新:你的设备中缺少重要的安全和质量修复(电脑自动更新帮我解决的,文中的方法我之前试过没用)
- 资产密集型企业,这么做管理更高效