浅析css布局模型1
css是网页的外衣，好不好看全凭css样式，而布局是css中比较重要的部分，下面来分析一下常见的几种布局。
流动模型
流动模型是网页布局的默认模式，也是最常见的布局模式，他有两个特点：
1.块状元素都在所处包含元素内自上而下按顺序垂直延伸分布。常见的块状元素有：div,p,ul,ol,h1~h6,address等
2.内联元素都会在所处包含元素内从左到右水平分布显示。常见的内联元素有：a,span,img,input,textarea等
浮动模型
浮动模型是指使用css将块状元素定义为浮动。用法：float:left/right/none
层模型
css定义了一组定位属性（position）支持布局模型。
1.静态定位 设置position:static
无特殊定位，对象遵循正常文档流。top,right,bottom,left等属性不会被应用
2.绝对定位 设置position:absolute
将元素从文档流中拖出来，然后使用top,right,bottom,left等属性相对于其最接近的一个具有定位属性的父包含快进行绝对定位。如果不存在这样的属性块，则相对于body元素，即相对于浏览器窗口。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Css3学习</title>
<style>
.test{position:absolute;top:0px;left:0px;width:200px;height:200px;padding:5px 10px;background:#c00;color:#fff;line-height:120%;}
</style>
</head>
<body style="background:#ccc;">
<div style="background:#494444; position:relative;width:300px;height:300px;">
<div class="test">我是绝对定位，在这里相对于父级div定位</div>
</div>
</body>
</html>
3.相对定位 设置position:relative
对象遵循正常文档流，但可通过top,right,bottom,left等属性进一步确定位置，这也是和static属性不同的地方。
4.固定定位 设置position:fixed
固定定位和绝对定位的不同在于fixed参照定位的元素始终是视图本身（屏幕内的网页窗口），而absolute参照的是有定位属性的父级元素。如下代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Css3学习</title>
<style>
.test{position:fixed;top:0px;left:0px;width:200px;height:200px;padding:5px 10px;background:#c00;color:#fff;line-height:120%;}
</style>
</head>
<body style="background:#ccc;">
<div style="background:#494444; width:300px;height:300px;position:relative;">
<div class="test">我是固定定位，在这里相对于body定位</div>
</div>
</body>
</html>
下节探讨定位以及布局的其他属性：z-index,display,float,clear,visibility,clip,overflow,overflow-x,overflow-y
浅析css布局模型1的更多相关文章
- 浅析css布局模型2
上节对整个布局模型进行了概述,这节先谈一下布局模型的几个属性. z-index属性 该属性是检索或设置对象的层叠顺序,默认值为auto,遵循其父对象的定位. 并级的对象,该属性的值越大,则被层叠在最上 ...
- 熟悉HTML CSS布局模型
HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
- HTML+CSS学习笔记 (12) - CSS布局模型
标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...
- 从零开始学习前端开发 — 6、CSS布局模型
一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元 ...
- 从零开始学习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布局模型: 流动模型(Flow) 浮动模型(Float) 层模型(Layer) 1.流动模型: 页面在没有设置任何css样式,元素按照本身的特性在浏览器中显示,这样的布局模型称为流动模型: ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
随机推荐
- Java多线程系列--“JUC集合”08之 LinkedBlockingQueue
概要 本章介绍JUC包中的LinkedBlockingQueue.内容包括:LinkedBlockingQueue介绍LinkedBlockingQueue原理和数据结构LinkedBlockingQ ...
- JavaWeb:Web与HTTP协议简介
JavaWeb:Web与HTTP协议简介 Web的概念 什么是Web: Web是网络上使用最广泛的分布式应用架构. 旨在共享分布在网络上的各个Web服务器中的所有互相连接的信息. 三个特征: 用HTM ...
- 理解 angular2 基础概念和结构 ----angular2系列（二)
前言: angular2官方将框架按以下结构划分: Module Component Template Metadata Data Binding Directive Service Dependen ...
- Android开发资源获取国内代理（转载）
Android Dev Tools官网地址:www.androiddevtools.cn 收集整理Android开发所需的Android SDK.开发中用到的工具.Android开发教程.Androi ...
- Azure ARM (9) 创建ARM模式下的虚拟机网络
<Windows Azure Platform 系列文章目录> 笔者在之前几章内容中,创建了ARM Resource Group,然后在这个ARM Resource Group下创建Azu ...
- Windows Server 2012上PHP运行环境搭建的简易教程（Win08适用）
微软的Windows Server 2012发布后,第一时间进行了简单的试用,非常不错,特写了个简易的PHP环境搭建教程.先来欣赏下Win2012的登录界面吧第一步我们需要安装IIS81.点击任务栏最 ...
- 【Linux驱动】内核等待队列
在Linux中, 一个等待队列由一个"等待队列头"来管理,等待队列是双向链表结构. 应用场合:将等待同一资源的进程挂在同一个等待队列中. 数据结构 在include/linux/w ...
- JS魔法堂：jQuery.Deferred(jQuery1.5-2.1)源码剖析
一.前言 jQuery.Deferred作为1.5的新特性出现在jQuery上,而jQuery.ajax函数也做了相应的调整.因此我们能如下的使用xhr请求调用,并实现事件处理函数晚绑定. var p ...
- 最简单的pagging插件
<html> <head> <title>jQuery Easy-Paging Test</title> </head> <body& ...
- C# 代码编程规范
1. 类一定要有注释 2. C#代码要用#region包起来,#region之间要留一个且只留一个空行 3. 含义复杂不容易看懂的参数要写注释 4. 方 ...