一、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布局模型的更多相关文章

  1. 从零开始学习前端开发 — 6、CSS布局模型

    一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元 ...

  2. 熟悉HTML CSS布局模型

    HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...

  3. 浅析css布局模型1

    css是网页的外衣,好不好看全凭css样式,而布局是css中比较重要的部分,下面来分析一下常见的几种布局. 流动模型 流动模型是网页布局的默认模式,也是最常见的布局模式,他有两个特点: 1.块状元素都 ...

  4. HTML+CSS学习笔记 (12) - CSS布局模型

    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...

  5. 从零开始学习html(十二)CSS布局模型——上

    一.css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了. 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之 ...

  6. CSS布局模型学习

    转自:http://www.cnblogs.com/erliang/p/4092192.html CSS布局模型学习   参考链接慕课网:HTML+CSS基础课程 知识基础 1. 样式 内联 嵌入 外 ...

  7. CSS 布局模型

    css布局模型 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上.又不同于我们常说的 CSS 布局样式或 CSS 布局模板.假设说布局模型是本.那么 CSS ...

  8. 前端--关于CSS盒模型

    CSS样式规则的学习是很繁琐和枯燥的,因为它不像物理.数学或者其他编程语言一样有一些基本概念.有一些基本公理或者规则,其他所有的表现都是概念在这些公里或者规则之下的逻辑游戏,CSS是有一些基本概念,但 ...

  9. 前端之CSS——盒子模型和浮动

    一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...

随机推荐

  1. (测试)LaTeX公式

    \[a^2+b^2=c^2\] \[F(\omega)=\mathcal{F}[f(t)]=\int_{-\infty}^\infty f(t)e^{-iwt}\,dt\] \[\sum_{i=0}^ ...

  2. [ZJOI 2012] 网络

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2816 [算法] 对每种颜色的边建一棵LCT , 维护联通性即可 时间复杂度 : O( ...

  3. bzoj 4289 PA2012 Tax——构图

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4289 可以把一个点上的边按权值排序,然后边权小的向第一个比它大的连差值的边,边权大的向第一个 ...

  4. tomcat 的一些知识

    常见web服务器 1. WebLogic 支持J2EE规范2. WebSphere 支持J2EE3. Tomcat 支持JSP,servlet规范 需要配置JDK才能运行 tomcat JAVA_HO ...

  5. css一些不为人所熟知的知识点

    1.设置a标签内字体水平居中:text-algin:center 2.设置a标签内字体水平居中:line-height:height 3.如何设置td宽度固定<table style=" ...

  6. Qt传入参数argc argv[]

    QtCreator是非常不错的IDE,最近在做的Qt命令行应用,因为调试的环境不同等问题,需要在调试的时候为 main() 传入参数.度娘了半天,没找到方法,只能自力更生.后来在“项目-构建和运行-运 ...

  7. Identity Server 4 原理和实战(完结)_----选看 OpenId Connect 简介

    Identity Procider:身份提供商

  8. 如何在.net项目中使用全局程序集GAC

    在解决已有.net网站问题过程中(之前的同事写的),发现出现dll不存在的情况,build报错 在bin目录下找不到该dll,后来发现是全局程序集,存储在C:\Windows\assembly目录下 ...

  9. 简易DIV垂直居中阴影层笼罩JS实现

    $(document).ready(init); function init() { var h = $(window).height(); var w = $(window).width(); /* ...

  10. (2)ASP.NET Core 依赖关系注入(服务)

    1.前言 面向对象设计(OOD)里有一个重要的思想就是依赖倒置原则(DIP),并由该原则牵引出依赖注入(DI).控制反转(IOC)及其容器等老生常谈的概念,初学者很容易被这些概念搞晕(包括我在内),在 ...