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

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. Android 为应用添加数字角标

    今天在论坛上看到了一个帖子,终于搞清了我很久以来的一个困惑,android到底能不能实现ios的角标效果,QQ是怎么实现的.看了这个帖子顿时终于解除了我的困惑. 先说一个下大概的思路: 大家都知道an ...

  2. ajax缺点以及解决办法

    1．缺少一个没有标准之争.没有back和history的浏览器    Ajax取消了back按钮,即对浏览器后退机制的破坏.后退按钮是一个标准的web站点的重要功能,但是它没法和js进行很好的合作,这 ...

  3. 2014第11周一word样式

    今天摸索使用了word的样式替换功能感觉不错,简单记录下: 1.将某一个样式的标题统一替换为另一样式,之前一般是格式化一个个找到标题设置格式, 今天才发现可以选中标题->在浮动框上单击样式或开始 ...

  4. #include <stdbool.h>

    可以使用bool和true.false 输出是1或者0 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdb ...

  5. 【找规律】CodeForce #258 Problem A——Game With Sticks

    来源:点击打开链接 非常easy.找规律. 每去掉一个点,点的总数量就减去n+m-1,然后看谁最先减到没有点可减.就能够了. #include <iostream> #include &l ...

  6. 用程序对hdfs进行操作。

    调试加安装了半天,怎么也没有配置好怎么通过Eclipse直接连接hdfs,最后我还是打成一个jar包放到Linux虚拟机中运行的. 运行命令Java -jar  XXX.jar. 当中对hdfs的操作 ...

  7. HTML5表单增强

    感觉最大的改变就是表单元素可以不写在form标签中.写在其他地方,加个form属性就能提交了别的嘛感觉没什么,表单验证也不能提示信息,感觉不实用 <!DOCTYPE html> <h ...

  8. datagrid指定行合并导出

    导出代码: public void GridViewToExcel(GridView ctrl, string FileType, string FileName) { HttpContext.Cur ...

  9. 2014.12.06 ASP.NET 三级联动，添加员工，修改员工

    (一)三级联动 要实现的效果: 代码: MyDBDataContext context = new MyDBDataContext(); protected void Page_Load(object ...

  10. javascript中对象的不同创建方法

    javascript中的对象与一般的面向对象的程序设计语言(c++,Java等)不同,甚至很少有人说它是面向对象的程序设计语言,因为它没有类.javaScript只有对象,不是类的实例.javascr ...