复习CSS
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<style>
/*(Eric Meyer’s CSS 清零代码)清零代码*/ html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
</style>
<!--
CSS 盒子模型负责处理以下事情: 一个 blcok （区块）级对象占据多大的空间
该对象的边界，留白 //margin; padding
盒子的尺寸 //width; height; border
盒子与页面其它元素的相对位置 //float; position; inline
--> <!--
CSS 盒子模型有以下准则: Block （区块）对象都是矩形 （事实上所有对象都如此）
其尺寸由 width, height, padding, borders, 以及 margins 决定
如果不设置高度，该盒子的高度将自动适应其包含的内容，加上留白等（除非使用了 float）;
如果不设置宽度，一个非 float 型盒子水平上将充满其父容器（扣除父容器的留白）
-->
<div style="float:left;background:#666">
111
//进行float的元素的宽度收缩了
</div>
<div style="float:left;background:#333;width:100%;">
222
//就把这个元素的width设置100%
</div>
<div style="float:left;background:#333;width:100%;margin:10px;">
3333
//元素的width设置100%,又去设置margin或者padding的话，会破其父容器出现滚动条哦
</div>
<div style="clear:both">clear</div>
<div>
222
</div>
<div style="margin-bottom:100px;">
mb_100px;
</div>
<div style="margin-top:100px;">
出现了margin合并
mt_100px;
</div>
<div>
block: 1:下个元素会折行；2:宽度为100%
<br>
inline: 1:跟随上一个元素； 2:不存在宽和高; 3:受到排版的影响；可以用verticalalign进行居中；
4：增加float属性就会变成block元素了; 5: white-space, font-size, letter-spacing
</div>
<div>
以下是使用 float 和 clear 属性的一些重要准则: 一个 float 对象，将从其置身的 block 级非 float 内容流中跳出，换句话说，如果你要将一个 box 向左边 float，它后面的 block 级非 float 对象会显示到下方，inline 级内容会在旁边包围
要让一段内容从一侧包围一个 float 对象，这段内容必须要么是 inline 级的，要么也设置为相同方向的 float
一个 float 对象，如果没有设置宽度，则会自动缩成其包含的内容的宽度，因此最好为 float 对象明确设置宽度
如果一个 block 对象包含 float 子对象，会出现本文中阐述的问题。
一个设置了 clear 属性的对象，将不会包围其前面的 float 对象
一个既设置了 clear 又设置了 float 属性的对象，只有 clear:left 属性生效，clear:right 不起作用
</div>
<div>
IE 浏览器最常见的问题:<br>
IE6 中不可滥用 float，否则会带来内容消失以及文字重复等稀奇古怪的问题<br>
IE6 中，float 对象，在 float 方向的那边，会出现双倍 margin，将 display 设置为 inline 会解决这个问题<br>
IE6/7 中，一个没有直接或间接设置 hasLayout 的对象，会发生各种稀奇古怪的问题 （译者注：对这类问题，zoom 这个 css 属性可以帮很大的忙，将 zoom 设置为除了 normal 之外的其它值，可以迫使一个对象 hasLayout 同时不影响这个对象的任何视觉外观）<br>
IE6 不支持 min-width, max-width, min-height, max-height 一类的属性<br>
IE6 不支持固定位置背景图<br>
IE6/7 不支持很多 display 属性值（如 inline-table, table-cell, table-row）<br>
IE6 中，只有 a 这个对象才可以使用 :hover 这个伪类<br>
IE 的某些版本对某些 CSS 选择器支持很少（如属性选择器，子对象选择器）<br>
IE6~8 对 CSS3 的支持很有限 (不过有一些变通方法)<br>
IE6--7中的padding是包含在宽里面，不符合W3C标准
</div>
//50个值得收藏的实用CSS代码片段
//http://www.open-open.com/news/view/b6f3e5
</body>
</html>
复习CSS的更多相关文章
- 十分钟复习CSS盒模型与BFC
css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中,每个元素都被表示为一个矩形的盒子,它都会具有内容区.padd ...
- js文件引用的问题顺带复习css引用
js文件包含在<script>块中用scr引用,css在link和@import来引用,css不是本篇的重点,直接引用一个博主的总结: “ 区别1:link是XHTML标签,除了加载CSS ...
- javascript之复习(css属性值的计算)
js取div的宽高咋办,css有content-box,border-box,padding-box,表现又不一样.好在有个offsetWidth, <style type="text ...
- 复习-css元素定位
css元素定位 <style type="text/css"> body{ margin: 15px; font-family: "Adobe 宋体 Std ...
- 复习-css边框和背景属性
css边框和背景属性 border:所有边框属性 border-width:四条边框的宽度 border-style:设置边框样式,主要有dotted.solid.double border-colo ...
- 复习-css常用伪类别属性
css常用伪类别属性 对<a>标签可制动态效果的css a:link:超链接的普通样式 a:visited:被点击过的超链接样式 a:hover:鼠标指针经过超链接上时的样式 a:acti ...
- 复习-css列表和表格相关属性
css列表和表格相关属性 list-style:设置所有列表属性 list-style-image:将图像设置为列表项标记,主要有url值 list-style-position:设置列表项标记的放置 ...
- 复习-css控制文本字体属性
css控制文本字体属性 font-family:字体系列,如”serif“”sans-serif“ font-size:尺寸 font-style:字体样式,如“normal,italic(斜体).o ...
- [1.1W字] 复习: CSS 9个背景属性&6种渐变函数, 学会可以手写实现AI中强大的"任意渐变"! #Archives009
Title/ CSS Background&Gradient完全指南 #Archives009 序: 关于 background 属性, 了解点CSS的人总会知道个大概. 但是你肯定多半还有点 ...
随机推荐
- uva133-S.B.S.
The Dole Queue In a serious attempt to downsize (reduce) the dole queue, The New National Green Lab ...
- Linux的交叉编译 及configure配置
这两天需要把一个CDVS的工程代码从Linux 平台上移植到ARM平台上,花了两天才搞定,之前很早申请的博客,到现在还没有技术文章会,以后决定凡是花两三天才搞定的东西都会把解决过程发到这里,很多东西靠 ...
- [ubuntu]中文用户目录路径改英文
ubuntu中文版home文件夹里用目录的"桌面"."图片"."视频"虽然对于中文使用者看起来舒适直观,但是对于bash使用来说简直是障碍. ...
- liunx中的进程与线程
1. 进程和线程 进程和线程是程序运行时状态,是动态变化的,进程和线程的管理操作(比如,创建,销毁等)都是有内核来实现的. Linux中的进程于Windows相比是很轻量级的,而且不严格区分进程和线程 ...
- AC日记——机器翻译 洛谷 P1540
题目背景 小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 题目描述 这个翻译软件的原理很简单,它只是从头到尾,依次将每个英文单词用对应的中文含义来替换.对于每个英文单词,软件会先 ...
- C和指针笔记 3.8 static关键字
当用于不同的上下文环境时,static关键字具有不同的意思. 当它用于函数定义时,或用于代码块之外的变量声明时,static关键字用于修改标识符的链接属性,从external改为internal,但标 ...
- javascript js string.Format()收集
方案1http://www.cnblogs.com/loogn/archive/2011/06/20/2085165.html String.prototype.format = function(a ...
- struts2验证框架1
<!--该属性指定需要Struts 2处理的请求后缀,该属性的默认值是action,即所有匹配*.action的请求都由Struts 2处理.如果用户需要指定多个请求后缀,则多个后缀之间以英文逗 ...
- 13SpringMvc_限定某个业务控制方法，只允许GET或POST请求方式访问
这篇文章要实现的功能是:在一个Action中,有些业务方法只能是post提交上来的才能执行,有些方法是只能get提交上来的才能执行. 比如上篇文章中的UserAction.java(代码如下) pac ...
- 【转】【C#】判断两个文件是否相同
使用System.security.Cryptography.HashAlgorithm类为每个文件生成一个哈希码,然后比较两个哈希码是否相同 该哈希算法为一个文件生成一个小的二进制“指纹”,从统计学 ...