下面来总结一下盒子模型，流式布局，浮动布局，层布局（定位布局）。

1.盒子模型

　　有二种：IE盒子模型 和 标准w3c盒子模型

1）IE的盒子模型的content包含了padding和border

2）标准的w3c盒子模型有四部分组成：内容（content），填充（padding），边框（border），边界（margin）

提示：盒子模型的3d结构有五层，第一层是border，第二层是content+padding，第三层background-image，第四层是background-color，第五层是margin

2.流式布局（浏览器的默认布局方式）

特点：从上到下，从左到右。

块级元素有：div p h1~h6 ul ol dl table blockquote form

行内元素有：a  span em strong label 等

行内块级元素有：img input

3.浮动布局

　　float有三种属性：left，right，none。

float:left和float:right会使元素从文档流中剥离。

<!doctype html>

<html>

<head>

    <title>float</title>

    <meta charset="utf-8">

    <style type="text/css">

    .left{width:400px;height:200px,background:blue;float:left;}

 .right{width:400px;height:200px,background:green;float:right;}

   </style>

</head>

<body>

   <div class="left">left</div>

   <div class="right">right</div>

</body>

</html>

　　4:层布局

position属性有：static，absolute，relative，fixed四种。

其中absolute和fixed都是属于绝对定位，也会从文档流中脱出来。

absolute定位是相对于文档来偏移。

relative定位是相对于自身来偏移。

css学习笔记二的更多相关文章

  1. CSS学习笔记二：css 画立体图形

    继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...

  2. Html+css学习笔记二 标题

    学习新标签,标题 <html> <head> <title>tags</title> </head> <body> <h1 ...

  3. css学习笔记二之inline-block

    1.inline-block是CSS2.1中新增的盒类型,在div中将display属性设定为"inline-block",则div显示效果与设置display属性为"i ...

  4. CSS学习笔记之基本介绍

    1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...

  5. amazeui学习笔记二（进阶开发3）--HTML/CSS规范Rules

    amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules 一.总结 1.am:以 am 为命名空间 2.模块状态: {命名空间}-{模块名}-{状态描述} 3.子模块: {命名空间}- ...

  6. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

  7. CSS学习笔记之选择器

    目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...

  8. amazeui学习笔记二（进阶开发5）--Web 组件开发规范Rules

    amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...

  9. amazeui学习笔记二（进阶开发2）--Web组件简介Web Component

    amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...

随机推荐

  1. Java 按值传递

    http://guhanjie.iteye.com/blog/1683637 http://www.zhihu.com/question/31203609 String类 1.String 类按照 J ...

  2. 为WPF项目创建单元测试

    原文作者: 周银辉  来源: 博客园 原文地址:http://www.cnblogs.com/zhouyinhui/archive/2007/09/30/911522.html 可能你已发现一个问题, ...

  3. jsonarray----->list

    JSONArray--------------->List----------------->Adapter------------------>ListView

  4. 非GUI-Qt程序运行后显示Console（简单好用）

    ----我的生活,我的点点滴滴!! 有很多时候,我们在程序中添加了好Debug信息,方便程序在运行期间打印出一些我们需要的信息或者,想用他来显示一些必要信息时, 那么console就太重要了,曾几何时 ...

  5. WPF中图形表示语法详解（Path之Data属性语法）

    原文 http://blog.csdn.net/johnsuna/article/details/1885597 老规矩,看图说话. 先看显示效果:(图1) XAML(代码A):<Page xm ...

  6. 8.2.5: Spring3.0新增的@DependsOn和@Lazy

    @DependsOn用于强制初始化其他Bean.可以修饰Bean类或方法,使用该Annotation时可以指定一个字符串数组作为参数,每个数组元素对应于一个强制初始化的Bean. @DependsOn ...

  7. DNS解析服务使用的系统对网站的安全起着很重要的作用

    1 采用独享的DNS服务器解析系统 DNS解析服务使用的系统对网站的安全极其重要.现在国内的DNS服务器普遍是公用的,即是你的企业网站DNS解析服务和其他许多网站都是由同一个DNS服务器提供.一旦某个 ...

  8. [转]Asp.Net MVC使用HtmlHelper渲染,并传递FormCollection参数的陷阱 【转】

    在Asp.Net MVC 1.0编程中,我们经常遇见这样的场景,在新建一个对象时候,通过HtmlHelper的方式在View模型中渲染Html控件,当填写完相关内容后,通过Form把需要新建的内容Po ...

  9. Swift应用开源项目推荐

    1. 风靡全球的2048 2014年出现了不少虐心的小游戏,除了名声大噪的Flappy Bird外,最风靡的应该就是2048了.一个看似简单的数字叠加游戏,却让玩的人根本停不下来,朋友圈还一度被晒分数 ...

  10. Oracle基本代码学习

    /*------------Orcale函数----------------*/ 1.字符函数 LOWER()小写UPPER()大写INITCAP()把第一个字母大写CONCAT()字符串的连接(也可 ...