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

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. 使用Python多线程犯的错误总结

    在使用Python多线程的时候,在使用多线程编程的时候,由于对于变量作用域和多线程不是很熟悉,导致在使用多线程的时候,犯了低级的错误. 第一个错误: 在多线程中使用全局变量,导致多个线程修改全局变量. ...

  2. Javascript 之内置对象

    JS提供了11种引用类型:Object.Array.Date.Function.Error.RegExp.Math.Number.String.Boolean.Globle.其中包括了三种基本包装类型 ...

  3. 论山寨手机与Android联姻 【10】SmartPhone的通信机制

    上一章我们说到,智能手机 == 电脑 + 移动网卡,这个提法比较粗略,更精准的提法应当是,智能手机的硬件结构分为应用程序处理器AP,和基带处理器BP两个部分.虽然AP部分的功能与电脑主板基本类似,但是 ...

  4. Mac OS X 快捷键（完整篇）

    不少朋友提出要求,希望有个「高质量」的列表.其实这样的资源真是太多,平果官网就有 快捷键文档(多国语言版本).于是花了20分钟,浏览了一些网站,整理了点资源放过来供大家参考. 快捷键是通过按下键盘上的 ...

  5. CATALINA_BASE与CATALINA_HOME的区别（转）

    到底CATALINA_HOME和CATALINA_BASE有什么区别呢,之前因为都是小打小闹的在服务器上安装一个tomcat就得了,然后根据前人的配置,将CATALINA_HOME和CATALINA_ ...

  6. editplus使用:非法字符： \65279

    众所周知,在跨程序的工程中,统一编码是至关重要的,而目前最普遍的则是统一采用“utf8”编码方案. 但是在采用utf8方案的时候,请注意编辑器的自作聪明. 比如editplus. 原因就在于某些编辑器 ...

  7. Android手机自带内部存储路径的获取 （转）

    转自:http://my.oschina.net/liucundong/blog/288183 我有一台中兴的Android手机,型号是 ZTE U930HD,手机没有插入外置SD卡(也就是Micro ...

  8. Unity3D 物体移动到点击位置

    using UnityEngine;using System.Collections; public class MoveToClick : MonoBehaviour{ public GameObj ...

  9. aix运维

    AIX操作系统中有很多程序,为了进行程序版本控制,每一个程序集都有自己的版本号.版本号是由小数点分隔的四位数字,例如5.3.0.9其含义是:操作系统版本号(version).发行版本号(release ...

  10. iOS中通知传值

    NSNotification 通知中心传值,可以跨越多个页面传值, 一般也是从后面的页面传给前面的页面.   思路: 第三个界面的值传给第一个界面. 1. 在第一个界面建立一个通知中心, 通过通知中心 ...