一、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. bzoj 2179 FFT快速傅立叶 —— FFT

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2179 默写板子,注释的是忘记的地方. 代码如下: #include<iostream& ...

  2. 魔法少女-dp

    魔法少女 Time Limit: 1000MS   Memory Limit: 65535KB   64bit IO Format: %I64d & %I64u 前些时间虚渊玄的巨献小圆着实火 ...

  3. DataWindow.NET 控件 实现点击列头排序

    1.定义字段                         Boolean ib_SetSort = true;                string is_SortType = " ...

  4. AngularJS系统学习之Module(模块)

    本文源自:http://blog.csdn.net/woxueliuyun/article/details/50962645 学习之后略有所得, 来此分享.建议看原文. 模块是提供一些特殊服务的功能块 ...

  5. 通过url在两个页面之间传值

    今天开发遇到一个需要通过url传值才能解决的问题,就查了一下资料 一下是整理的结果: 假如需要把a页面的值传到b页面 a页面代码 <script type="text/javascri ...

  6. vim opencv

    http://blog.csdn.net/fdl19881/article/details/7275203 ctags .vim: http://www.vim.org/scripts/script. ...

  7. Android调试之TraceView

    TraceView 在应用运行时,可以使用Debug类打开操作日志记录功能,打开后Android会详细记录应用花在每个线程以及线程的每个函数的调用时间.操作日志记录完毕后,可以使用Android SD ...

  8. POJ - 3414 Pots BFS(著名倒水问题升级版)

    Pots You are given two pots, having the volume of A and B liters respectively. The following operati ...

  9. CSS3 制作魔方 - 相关立体样式

    最好的实践,就是给定一个实践的目标去实践. 目标:利用 CSS3 的一些特性,绘制一个魔方,要可以玩转的那种,即上下左右每一层都可以独立旋转.效果如下: 为了完成此效果,将使用到以下相关概念和样式:坐 ...

  10. MFC对话框程序 屏蔽ESC和ENTER键关闭对话框的方法

    http://blog.csdn.net/xgx198831/article/details/6713651 MFC对话框程序  屏蔽ESC和ENTER键关闭对话框的方法 或许还有其它更好的办法,但下 ...