css学习笔记二
下面来总结一下盒子模型，流式布局，浮动布局，层布局（定位布局）。
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学习笔记二的更多相关文章
- CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
- Html+css学习笔记二 标题
学习新标签,标题 <html> <head> <title>tags</title> </head> <body> <h1 ...
- css学习笔记二之inline-block
1.inline-block是CSS2.1中新增的盒类型,在div中将display属性设定为"inline-block",则div显示效果与设置display属性为"i ...
- CSS学习笔记之基本介绍
1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...
- amazeui学习笔记二（进阶开发3）--HTML/CSS规范Rules
amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules 一.总结 1.am:以 am 为命名空间 2.模块状态: {命名空间}-{模块名}-{状态描述} 3.子模块: {命名空间}- ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
- CSS学习笔记之选择器
目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...
- amazeui学习笔记二（进阶开发5）--Web 组件开发规范Rules
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...
- amazeui学习笔记二（进阶开发2）--Web组件简介Web Component
amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...
随机推荐
- shell script 零碎知识
1.test命令的测试功能 -e 文件名是否存在 -f 文件名是否存在且为文件 -d 文件名是否存在且为目录 范例1 检查/dmtsai是否存在,存在输出 exist 不存在输出 Not ...
- C# 队列数据结构 (三)
队列是一种先进先出的线性表 因此需要引用Clist线性类 class CQueue { private Clist m_list;//构造链表对象实例 public CQueue()//构造函数 { ...
- LED发光二极管
半导体发光器件包括半导体发光二极管(简称LED).数码管.符号管.米字管及点阵式显示屏(简称矩阵管)等.事实上,数码管.符号管.米字管及矩阵管中的每个发光单元都是一个发光二极管. 一. 半导体发光二极 ...
- B/S状态（同步）AJAX技术（异步）
同步(Synchronization).它是最常见的click-refresh状态,或提交一个表单,然后整个页面被刷新. 异步(Asynchrony).当前非常热的AJAX就是典型样例,提交请求返回对 ...
- 导航栏控制器和标签栏控制器(UINavigationController和UITabBarController)混用
很多时候,在UI设计方面同时需要使用导航控制器和标签栏控制器,这时,需要掌握如何设计结合使用这两种不同控制器.比如手机QQ,程序有三个标签 栏(分别为消息.联系人.动态),同时在选择某个联系人或者会话 ...
- 动画原理——绘制正弦函数&环绕运动&椭圆运动
书籍名称:HTML5-Animation-with-JavaScript 书籍源码:https://github.com/lamberta/html5-animation 1.正弦函数.x位置递增, ...
- javascript高级知识分析——作为对象的函数
代码信息来自于http://ejohn.org/apps/learn/. 函数和对象是不是非常相似? var obj = {}; var fn = function(){}; console.log( ...
- javascript动态改变iframe的src
页面中需要动态的改变iframe的地址,方法有: 1. window.frames["chartFrame"].document.location = "<%=ba ...
- ES6第一篇
//新的数字方面的方法 const I = 3.4893589; console.log(Number.parseInt(I)); console.log(Number.parseFloat(I)); ...
- dubbo+zookeeper+spring+springMVC+mybatis的使用
读前声明:由于本人水平有限,有错误或者描述不恰当的地方请指出来,勿喷!第一次写博客. 源码下载链接:http://files.cnblogs.com/files/la-tiao-jun-blog/du ...