前端之CSS布局模型
一、css布局模型:
流动模型(Flow)
浮动模型(Float)
层模型(Layer)
1、流动模型:
页面在没有设置任何css样式,元素按照本身的特性在浏览器中显示,这样的布局模型称为流动模型;
2、浮动模型:
①.浮动属性
float:none(默认值,不浮动)|left(左浮动)|right(右浮动);
②.清除浮动
clear:none|both|left|right;
none:默认值,允许两边有浮动
both:清除左浮动和右浮动
left:清除左浮动
right:清除右浮动
注:当本元素前面有元素浮动对本元素造成了影响,给本元素添加清除浮
在网页中使用float属性进行页面布局;
当元素设置了float属性后,就脱离了正常的文档流;
3、层模型:
position:static(默认值)|absolute(绝对定位)|relative(相对定位)|fixed(固定定位);
①.绝对定位(absolute)
绝对定位的参照物:
a)是绝对定位元素的父包含块(参照物与绝对定位元素是包含与被包含的关系);
b) 父包含块必须具有position定位属性:
如果找不到满足以上两个条件的父包含块,那么相对于html,即浏览器窗口进行绝对定位
注:以下两种情况,元素会脱离正常的文档流,左右margin为auto将会失效
1)当元素设置了float属性
2)当元素设置了绝对定位
②.相对定位(relative)
相对定位的参照物:
相对于偏移前的位置进行定位
相对定位不会脱离正常的文档流
注:relative和absolute结合使用
给父元素设置relative,给子元素设置absolute,在网页布局中常这样结合使用制作一些特殊效果
③.固定定位(fixed)
固定定位的参照物:屏幕窗口
注:a)固定定位的元素也会脱离正常的文档流
b)固定定位的元素不随滚动条滚动
④、定位层叠属性设置:
z-index:auto|数值(一般为整数);
注:a)当没有设置z-index属性时,后写的元素优先显示在上层,设置后,数值越大,越靠上
b) z-index也可以设置负值,设为负值时,在所有元素之下
前端之CSS布局模型的更多相关文章
- 从零开始学习前端开发 — 6、CSS布局模型
一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元 ...
- 熟悉HTML CSS布局模型
HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
- 浅析css布局模型1
css是网页的外衣,好不好看全凭css样式,而布局是css中比较重要的部分,下面来分析一下常见的几种布局. 流动模型 流动模型是网页布局的默认模式,也是最常见的布局模式,他有两个特点: 1.块状元素都 ...
- HTML+CSS学习笔记 (12) - CSS布局模型
标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...
- 从零开始学习html(十二)CSS布局模型——上
一.css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了. 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之 ...
- CSS布局模型学习
转自:http://www.cnblogs.com/erliang/p/4092192.html CSS布局模型学习 参考链接慕课网:HTML+CSS基础课程 知识基础 1. 样式 内联 嵌入 外 ...
- CSS 布局模型
css布局模型 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上.又不同于我们常说的 CSS 布局样式或 CSS 布局模板.假设说布局模型是本.那么 CSS ...
- 前端--关于CSS盒模型
CSS样式规则的学习是很繁琐和枯燥的,因为它不像物理.数学或者其他编程语言一样有一些基本概念.有一些基本公理或者规则,其他所有的表现都是概念在这些公里或者规则之下的逻辑游戏,CSS是有一些基本概念,但 ...
- 前端之CSS——盒子模型和浮动
一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...
随机推荐
- (测试)LaTeX公式
\[a^2+b^2=c^2\] \[F(\omega)=\mathcal{F}[f(t)]=\int_{-\infty}^\infty f(t)e^{-iwt}\,dt\] \[\sum_{i=0}^ ...
- [ZJOI 2012] 网络
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2816 [算法] 对每种颜色的边建一棵LCT , 维护联通性即可 时间复杂度 : O( ...
- bzoj 4289 PA2012 Tax——构图
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4289 可以把一个点上的边按权值排序,然后边权小的向第一个比它大的连差值的边,边权大的向第一个 ...
- tomcat 的一些知识
常见web服务器 1. WebLogic 支持J2EE规范2. WebSphere 支持J2EE3. Tomcat 支持JSP,servlet规范 需要配置JDK才能运行 tomcat JAVA_HO ...
- css一些不为人所熟知的知识点
1.设置a标签内字体水平居中:text-algin:center 2.设置a标签内字体水平居中:line-height:height 3.如何设置td宽度固定<table style=" ...
- Qt传入参数argc argv[]
QtCreator是非常不错的IDE,最近在做的Qt命令行应用,因为调试的环境不同等问题,需要在调试的时候为 main() 传入参数.度娘了半天,没找到方法,只能自力更生.后来在“项目-构建和运行-运 ...
- Identity Server 4 原理和实战(完结)_----选看 OpenId Connect 简介
Identity Procider:身份提供商
- 如何在.net项目中使用全局程序集GAC
在解决已有.net网站问题过程中(之前的同事写的),发现出现dll不存在的情况,build报错 在bin目录下找不到该dll,后来发现是全局程序集,存储在C:\Windows\assembly目录下 ...
- 简易DIV垂直居中阴影层笼罩JS实现
$(document).ready(init); function init() { var h = $(window).height(); var w = $(window).width(); /* ...
- (2)ASP.NET Core 依赖关系注入(服务)
1.前言 面向对象设计(OOD)里有一个重要的思想就是依赖倒置原则(DIP),并由该原则牵引出依赖注入(DI).控制反转(IOC)及其容器等老生常谈的概念,初学者很容易被这些概念搞晕(包括我在内),在 ...