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 ...
随机推荐
- 只有电信3G是公网ip。
只有电信3G是公网ip,其它网络拿到是内部网.
- Java调用.dll文件
因为项目的需求,要在JAVA项目中调用Windows的Dll(动态链接库)文件,之前用Jni调用过C写的Dll文件,比较麻烦,这里不多说,网上也有很多这方面的文档.在网上找到一个开源的组件JNativ ...
- mysql 存储过程 动态sql例子
proc:BEGIN ; ; ; ) DEFAULT ''; ) DEFAULT ''; ) DEFAULT '';#插入日志的表,一个活动一张表 #将局部变量转换成会话变量 #动态sql语言只接受会 ...
- 习题3.15 自调整表Find例程
#include<stdio.h> #include<stdlib.h> typedef int * List; /* 自调整表的Find数组实现 */ int Find(Li ...
- Apache HTTP Server
下载 http://rj.baidu.com/soft/detail/14824.html?ald 安装完成后,打开浏览器,输入http://localhost/ 如果显示: It works! 则代 ...
- 全国计算机等级考试二级教程-C语言程序设计_第14章_结构体、共用体和用户定义类型
函数的返回值是结构体类型 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> struct ...
- ios 后台模式
1.在后台可以继续播放音频 To play sound in the background, make sure to add the following to the Info.plist file ...
- LINQ 图解 LINQ学习第三篇 [转]
LINQ,语言集成查询(Language INtegrated Query)是一组用于c#和Visual Basic语言的扩展.它允许编写C#或者Visual Basic代码以查询数据库相同的方式操作 ...
- SQLServer与Oracle的对照
近期去铁科院面试,项目组长问了我这样一下问题:SQLServer与Oracle的差别是什么?从进入软件行业.从開始CS的编码到BS的编码过程中使用的都是SQLServer.在半年前開始敲DRP ...
- C#.NET学习笔记7--11---算术运算符,变量赋值,变量的交换,布尔表达式1,布尔表达式2
C#.NET学习笔记7---算术运算符 2013/9/6 技术qq交流群:JavaDream:251572072 教程下载,在线交流:创梦IT社区:www.credream.com 1.Consol ...