复习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的人总会知道个大概. 但是你肯定多半还有点 ...
随机推荐
- runc kill 和 delete流程分析
runc kill // kill sends the specified signal (default: SIGTERM) to the container's init process 1.ru ...
- 谷歌开源项目Google Preview Image Extractor(PIEX) (附上完整demo代码)
前天偶然看到谷歌开源项目中有一个近乎无人问津的项目Google Preview Image Extractor(PIEX) . 项目地址: https://github.com/google/piex ...
- 如何禁止 iPhone Safari video标签视频自动全屏？
最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签).如: <video id="post" autoplay ...
- HDU 2955 Robberies --01背包变形
这题有些巧妙,看了别人的题解才知道做的. 因为按常规思路的话,背包容量为浮点数,,不好存储,且不能直接相加,所以换一种思路,将背包容量与价值互换,即令各银行总值为背包容量,逃跑概率(1-P)为价值,即 ...
- 第一次使用Android Studio时你应该知道的一切配置（二）：新建一个属于自己的工程并安装Genymotion模拟器
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...
- python playfair
#########################Playfair密码######################### #约定1:若明文字母数量为奇数,在明文末尾添加一个'Z' #约定2:'I'作为 ...
- Oracle中没有 if exists(...)
对于Oracle中没有 if exists(...) 的语法,目前有许多种解决方法,这里先分析常用的三种,推荐使用最后一种 第一种是最常用的,判断count(*)的值是否为零,如下declare v ...
- [转]World Wind Java开发之四——搭建本地WMS服务器
在提供地理信息系统客户端时,NASA还为用户提供了开源的WMS Server 服务器应用:World Wind WMS Server.利用这个应用,我们可以架设自己的WMS服务并使用自己的数据(也支持 ...
- php基础19：文件
<?php //1.打开文件的更好的方法是通过 fopen() 函数.此函数为您提供比 readfile() 函数更多的选项. //fopen() 的第一个参数包含被打开的文件名,第二个参数规定 ...
- Android完美禁用Home键
重写Activity的onAttachedToWindow 方法 @Override public void onAttachedToWindow() { System.out.println(&qu ...