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

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. 解析Tensorflow官方English-Franch翻译器demo

    今天我们来解析下Tensorflow的Seq2Seq的demo.继上篇博客的PTM模型之后,Tensorflow官方也开放了名为translate的demo,这个demo对比之前的PTM要大了很多(首 ...

  2. 5路数字量输入Di，5路大电流继电器输出，可电脑控制，支持modbus协议工业模块，支持和DCS,PLC无缝对接。

    数字量输入输出模块MRD-5060具有5路DI,5路继电器输出,1路485接口(支持Modbus RTU),能实现5路DI(干接点输入)转485的采集,也可以通过485控制5路继电器(5A30VDC, ...

  3. 元素“Button”不是已知元素。原因可能是网站中存在编译错误，或者缺少web.config文件

    最近开发的时候ASP控件都有波浪下划线,提示不是已知元素,搞得挺郁闷的.虽然不影响变异,不过就是不爽. 折腾N久...... 解决了,把FramWork平台换成3.5,问题解决,不知道为啥,求大神指点 ...

  4. Docker 基于已有镜像的容器创建镜像

    Docker 基于已有镜像的容器创建镜像: docker:/root# docker run -it januswel/centos /bin/bash docker exec -it januswe ...

  5. 【Stackoverflow好问题】Java += 操作符实质

    问题 直到今天,我都一直以为: i += j 等同于 i = i + j; 但如果有: int i = 5; long j = 8; 这时 i = i + j不能编译.但i += j却能够编译.这说明 ...

  6. 六行代码获取本地IP

    uses IdIPWatch; function GetNativeIP: String; var IdIPWatch: TIdIPWatch; begin IdIPWatch := TIdIPWat ...

  7. Mongo散记--聚合（aggregation）&amp; 查询（Query）

    mongo官网:http://www.mongodb.org/ 工作中使用到Mongo,可是没有系统的学习研究过Mongo,仅对工作过程中,在Mongo的使用过程中的一些知识点做一下记录,并随时补充, ...

  8. poj2762 Going from u to v or from v to u?

    Going from u to v or from v to u? Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 13040 ...

  9. Linux下实现视频读取（二）---camera參数设定

    Camera的可设置项极多,V4L2 支持了不少.但Sam之前对这些设置的使用方法和涵义都是在看videodev2.h中边看边理解.感觉很生涩. 直到写这篇blog时,才发现v4l2有专门的SPEC来 ...

  10. jQuery模拟原生态App上拉刷新下拉加载

    jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...