复习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的人总会知道个大概. 但是你肯定多半还有点 ...
随机推荐
- LeetCode题解-----Majority Element II 摩尔投票法
题目描述: Given an integer array of size n, find all elements that appear more than ⌊ n/3 ⌋ times. The a ...
- 【问题&解决】解决创建Android模拟器时提示"No system images installed for this target"的问题
在创建Android模拟器时间发现提示“No system images installed for this target”问题,无法创建模拟器,如下图: 解决:经上网查证,发现原因在于CPU/AB ...
- [cocos2dx]2.2到3.1(3.0)升级帮助
摘要: cocos2dx 是一款优秀的多平台,专为2D游戏设计的引擎. 在活跃的开源社区的推进下, 越发稳定和强大. 2.x -> 3.x的更新幅度很大, 性能的提升和功能的丰富也非常明显. 但 ...
- 谷歌开源项目Google Preview Image Extractor(PIEX) (附上完整demo代码)
前天偶然看到谷歌开源项目中有一个近乎无人问津的项目Google Preview Image Extractor(PIEX) . 项目地址: https://github.com/google/piex ...
- Codeforces Round #253 Div2 D.Andrey and Problem 概率+贪心
概率计算:P(某set) = 令: 和 现在考虑: 1.考虑某个集合,再加一个概率为Pi的朋友后能不能使总概率提高. 即: 由公式可知, 如果 S < 1,则delta > 0,则 ...
- SSH框架总结（框架分析+环境搭建+实例源码下载） 《转》
这篇文章比较易懂,易理解: 首先,SSH不是一个框架,而是多个框架(struts+spring+hibernate)的集成,是目前较流行的一种Web应用程序开源集成框架,用于构建灵活.易于扩展的多层W ...
- centos6.5 redis3 开机自动启动命令设置
修改redis.conf,打开后台运行选项: # By default Redis does not run as a daemon. Use 'yes' if you need it. # Note ...
- Win8/8.1 .NET3.5安装失败
.NetFramework 作为开发人员,很多情况都需要.NetFramework,在Win7及之前的系统上直接双击 .NetFramework的安装包就可安装了. Win8/8.1无法安装.Net3 ...
- uGUI练习(四) Light UI
练习目标 在我之前的文章 Unity 2D Sprite Lighting ,讲到在2D Sprite中可以使用灯光,非常高兴的是,在Unity的新UI系统中我们也可以使用灯光 步骤 1.创建一个Pa ...
- 获取本机的IP地址(局域网)与主机名称
编写内容保存为bat @echo off &setlocal enabledelayedexpansion Rem '/*========获取本机的IP地址(局域网)=========*/ e ...