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

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. 学习Emacs系列教程

    emacs最简单入门,只要10分钟 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3 ...

  2. 关于linux下内存使用的一些疑惑[转载]

    Linux内存机制-Cache与Buffer 在linux中经常发现空闲内存很少,似乎所有的内存都被系统占用了,表面感觉内存不够用了,其实不然.这是Linux内存管理的一个优秀特性,在这方面,区别于w ...

  3. OpenStreetMap(OSM) for developers

    This article from: http://wiki.openstreetmap.org/wiki/Develop OpenStreetMap isn't just open data - i ...

  4. naive bayes

    场景:垃圾邮件预测 目标: $p(y|w) = \frac{p(w|y)p(y)}{p(w)}$ 对于一封邮件来说,它的单词相同,所以$p(w)$可以不关心,计算得到分子就能知道更属于哪一类 所以,关 ...

  5. fuel Explain

    http://docs.mirantis.com/openstack/fuel/fuel-5.1/ https://software.mirantis.com/quick-start/ https:/ ...

  6. Hibernate 多表关联映射- 一对多关系映射（one-to-many）

    Hibernage.cfg.xml: <hibernate-configuration> <session-factory name="sessionFactory&quo ...

  7. 全国计算机等级考试二级教程-C语言程序设计_第15章_位运算

    位运算,不适用于实数,仅仅适用于整数.字符. C语言的位运算只能操作整数.字符,实数是指数方式表示的,不适用于位运算. #define _CRT_SECURE_NO_WARNINGS #include ...

  8. magento中取不同store中的产品数据

    $products = Mage::getResourceModel('catalog/product_collection')                    ->setStoreId( ...

  9. windows 环境怎样恢复 （oracle 11g grid） ocr voting 损坏的集群

     windows 环境怎样恢复 (oracle 11g grid) ocr voting 损坏的集群 oracle 11g 以后 ocr 能够放到 asm 磁盘上,而ASM的启动依赖于ocr和vo ...

  10. Exception Handling in ASP.NET Web API

    public static void RegisterGlobalFilters(GlobalFilterCollection filters) { filters.Add(new HandleErr ...