复习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的人总会知道个大概. 但是你肯定多半还有点 ...
随机推荐
- HDU 4267 A Simple Problem with Integers --树状数组
题意:给一个序列,操作1:给区间[a,b]中(i-a)%k==0的位置 i 的值都加上val 操作2:查询 i 位置的值 解法:树状数组记录更新值. 由 (i-a)%k == 0 得知 i%k == ...
- Hamilton回路的判定与构造
定理1:在一个具有n个顶点的无向连通图G中,如果任意两个顶点的度数之和大于n,则G具有Hamilton回路.此条件为充分条件 定理2:设图G = <V,E>,是Hamilton图,则对于v ...
- C++ 箭头-> 双冒号:: 点号.操作符区别
点 (.) 如果变量是一个对象或者对象引用,则用它来访问对象成员. 箭头( ->) 如果变量是一个对象指针,则用它来访问对象成员. 双冒号 (::) 如果操作目标是一个具有名空间的标识符,则用它 ...
- AutoIT简介
AutoIT最初是为了帮助IT管理和维护而开发的工具,能自动完成软件的安装.由于自动化安装和自动化测试在功能需求上有许多相似之处,都要模拟用户对软件进行操作,并验证执行的结果,所以,AutoIT逐渐成 ...
- Volley（五）—— 自定义Request
详细解读Volley(四)—— 自定义Request Volley中提供了几个Request,如果我们有特殊的需求,完全可以自定义Request的,自定义Request自然要继承Request,那么本 ...
- html5压缩图片并上传
手机端图片有很大的,上传的时候很慢,这时候就要压缩一下了,有一个开源的js可以压缩图片的大小,开源地址如下:https://github.com/think2011/localResizeIMG3 代 ...
- 16SpringMvc_在业务控制方法中写入User，Admin多个模型收集参数——引出问题
上面文章时普通的业务那个方法中收集一个实体类,这篇文章想收集两个实体类. 文本要做的是:在person.jsp页面上,有两个表单.分别是普通用户和管理员用户的表单(普通用户的表单和管理员用户的表单里面 ...
- 网站性能评分工具Yslow 使用教程
Yslow 这个工具相信无论是搞前端的攻城师或者是搞网站的站长都了解,Yslow 可比谷歌的PageSpeed 有名多了:那个百分制下的评分数据总让国人着迷,看来应试教育造的孽太深了.Jeff 认为的 ...
- OpenGL2.0及以上版本中glm，glut，glew，glfw，mesa等部件的关系
OpenGL2.0及以上版本中gl,glut,glew,glfw,mesa等部件的关系 一.OpenGL OpenGL函数库相关的API有核心库(gl),实用库(glu),辅助库(aux).实用工具库 ...
- python数字图像处理（4）：图像数据类型及颜色空间转换
一.图像数据类型及转换 在skimage中,一张图片就是一个简单的numpy数组,数组的数据类型有很多种,相互之间也可以转换.这些数据类型及取值范围如下表所示: Data type Range uin ...