1、Cascading Style Sheets 层叠样式表

2、层叠就是浏览器对多个样式来源进行叠加,最终确定结果的过程。

3、 样式的5大来源:浏览器默认样式、浏览器用户自定义样式、行内样式、内部样式、引用样式

4、浏览器默认样式表

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul,center,
dir, hr, menu, pre{ display: block}
/* 以上按照block显示,没有规定的则按照默认的inline显示 */ li { display: list-item}
/* 程序猿常用的display值是:inline/block/inline-block,很少用到 list-item
list-item到底是什么样的显示效果,可以通过例子验证。。。。
第一,你可以不用ul-li,而用其他标签实现list-item的效果
第二,要意识到,浏览器对待html只是把它当作一个dom树,至于显示成什么效果,是通过浏览器默认的css实现的,即样式全部通过css设计,和html无关 */ head { display: none}
table { display: table }
/* display:table 和 block 最大的区别在于:包裹性。 提到包裹性,就不得不提一下float和absolute*/ tr { display: table-row}
thead { display: table-header-group}
tbody { display: table-row-group}
tfoot { display: table-footer-group}
col { display: table-column}
colgroup { display: table-column-group}
td, th { display: table-cell; }
/* 与table相关的其他display值,研究的意义不大,但是table-cell值得一说。
table-cell是多列布局的最新解决方案,比使用float更加有效(不兼容IE6、7)
实际上table-cell是要依赖其他table相关的display,但是浏览器会为我们做这些工作,不必手动填写 */ caption{ display: table-caption}
th { font-weight: bolder; text-align: center}
/* 标题默认设置了粗体和文字居中 */ caption{ text-align: center}
body { margin: 8px; line-height: 1.12}
/* 不同浏览器的margin不一样,所以要设置【 *{margin:0} 】
line-height:1.12 针对英文没问题,但是中文看起来很别扭
另外,1.12是一个相对值(即1.12em),与文字有关的距离设置最好用相对值*/ h1{ font-size: 2em; margin: .67em 0}
h2{ font-size:1.5em; margin: .75em 0}
h3{ font-size: 1.17em; margin: .83em 0}
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin:1.12em 0}
/* em是相对单位,1em就是一单位,浏览器默认的一单位是16px,
可以通过 body{font-size:20px} 来修改一单位的值
p的字体大小是1em,h1是2em,h2是1.5em,等等
另外,与文字相关的距离值,最好用相对单位,例如 line-height:1.4; margin:.5em等等,这样做的好处就是当自定义了1em的绝对px时,line-height也会跟着变 */ /* 注意,如果我们自己写css【 * {margin:0} 】,可以把p、h1、h2等标签的margin覆盖掉
我们都知道,*选择器的权重是最低的,但是它却能覆盖掉标签选择器,说明浏览器已经在这里面做了手脚
浏览器没有让默认样式和用户自定义样式“公平竞争”,而是优先用户自定义样式 */ h5{ font-size: .83em; margin: 1.5em 0}
h6{ font-size: .75em; margin: 1.67em 0}
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder}
/* 这里可以看到哪些标签文字是加粗的 */ blockquote { margin-left: 40px; margin-right: 40px}
i, cite, em,
var, address { font-style: italic}
/* 这里可以看到哪些标签是斜体 */ pre, tt, code,
kbd, samp { font-family: monospace}
pre{ white-space: pre}
button, textarea,
input, object,
select { display:inline-block; }
/* 不知道inline-block是什么样子的?或者不知道inline-block有什么特性?
在这里看看哪些标签是inline-block,就知道inline-block的用处了
具体inline-block的用途,我们会在后面详细介绍,此处只是点出来 */ big { font-size: 1.17em}
small, sub, sup { font-size: .83em}
sub{ vertical-align:sub}
sup { vertical-align: super}
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle}
td, th { vertical-align: inherit }
s, strike, del { text-decoration: line-through}
hr {border: 1px inset}
/* 为什么<hr/>默认是那么个难看的样子,特别是IE下,这就是罪魁祸首 */ ol, ul, dir,
menu, dd { margin-left: 40px}
ol {list-style-type: decimal}
/* ul 和 ol 在默认情况下都会有一篇左边的间距,在这里可以看到为何会有间距,以及间距的具体大小是多少。
*/ ol ul, ul ol,
ul ul, ol ol { margin-top:;margin-bottom:}
u, ins { text-decoration: underline}
br:before {content: "A"}
/* ????????????? */
:before, :after { white-space: pre-line }
/* <br/>为何能实现换行?浏览器得到html的br标签,只会解析成一个dom节点而已,
而“换行”这一功能是通过这里实现的????? */ center{text-align: center}
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em}
:link, :visited { text-decoration: underline}
:focus {outline: thindottedinvert} /* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override}
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override} *[DIR="ltr"] { direction: ltr; unicode-bidi: embed}
*[DIR="rtl"] { direction:rtl; unicode-bidi: embed}
/* 这些标签或属性都不常用 */ @media print{
h1{ page-break-before:always}
h1, h2, h3,
h4, h5, h6{ page-break-after: avoid}
ul, ol, dl { page-break-before: avoid}
/* 对于打印页面时的设置,不常用 */ /* 以下都是按照标签选择器来的,标签选择器比类、id选择器的权重都低。
所以,用户自定义的样式,无论是用标签、类还是id,都能覆盖默认的标签选择器 */ 浏览器默认样式

浏览器默认样式表

5、层叠的规则:!important > 行内样式 > 内部样式 > 引用样式

6、dispaly:block和dispaly:table的区别:包裹性-‘心有多大,世界就有多大’===‘人有多大胆,地有多大产’

7、盒子模型

8、float的设计初衷是让文字环绕图片,浮动脱离文档流,具有破坏性、包裹性。子元素浮动会破坏父元素,解决方法:清除浮动

9、清除浮动:父元素overflow:hidden    浮动父元素(父元素浮动后具有包裹性)clear:both;  clearfix

10、利用float脱离文档流的特性,可以清除图片之间的间隙。

11、display常用属性有none\inline\block\inline-block\inherit\list-item\table\table-cell

12、display:inline;行内元素,宽高不起作用。转换为块元素的方法:display:block;\display:table;\float;\position:absolut\fixed

13、display:block;27个:html\body\form\div\p\h1-h6\ol\ul\dl\dt\dd\hr     frame\frameset\noframe  fieldset\menu\dir\center\pre  address\blockquote

14、display:inline-block;外表是流,本身是块

15、position:static\relative\absolute\fixed

16、position:relative;相对自身定位

17、position:fixed;相对浏览器定位

18、position:absolute;相对最近的定位元素定位,如果没有则相对浏览器定位。

19、绝对定位absolute脱离文档流(具有破坏性)、包裹性、跟随性、悬浮上方(多个绝对定位元素后来居上)、是float失效、对元素块化

实例1:多列布局:float  position table-cell flex column-count

实例2:三角形 (border)

CSS知多少的更多相关文章

  1. css知多少之绝对定位小记

    一.position定位常见属性 对于属性position来说,属性值有static/relative/absolute/fixed/inherit以下只对绝对定位position:absolute详 ...

  2. css知多少(6)——选择器的优先级

    1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...

  3. css知多少(12)——目录

    <css知多少>系列就此完结了.常来光顾的朋友可能会觉得突然:css的知识点还有很多,怎么突然就完了,还没讲完呢?这样说是对的.不过凡事都有一个定位,如果盲目求多,定位模糊,那样就没有目的 ...

  4. 看《css知多少》的一些总结

    问题 1.有些浏览器不完全支持css3,现在可以用哪个工具去检测浏览器是否支持,以及支持哪些项? modernizr:检测浏览器对HTML5和CSS3特性(至于modernizr的介绍,可以看我另外一 ...

  5. css知多少——选择器的优先级

    1. 引言 上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...

  6. css知多少(3)——样式来源与层叠规则

    上一节<css知多少(2)——学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看看上一节. 这一节就开始实践上一节的思路! 1 ...

  7. css知多少(4)——解读浏览器默认样式

    上一节<css知多少(3)——样式来源与层叠规则>介绍了样式的五种来源,咱们再通过一张图回顾一下. 对于上面的三层,咱们大概都比较熟悉了.下面的两层中,用户自定义样式一般也就是改一改字号大 ...

  8. css知多少(7)——盒子模型

    1. 引言 从这一节开始,我们就进入本系列的第三部分——css呈现.本部分将描述css在页面的几种布局和呈现的特性.包括两类:文字.块. 第一类——文字.这部分相对比较简单一些,例如设置字号.字体.颜 ...

  9. 转:css知多少(12)——目录

    <css知多少>系列就此完结了.常来光顾的朋友可能会觉得突然:css的知识点还有很多,怎么突然就完了,还没讲完呢?这样说是对的.不过凡事都有一个定位,如果盲目求多,定位模糊,那样就没有目的 ...

  10. css知多少(11)——position(转)

    css知多少(11)——position   1. 引言 本文将用一篇文章介绍position(定位),在学习position之前,我们应该去思考一个问题:什么情况下我们需要定位?如果没有定位将无法满 ...

随机推荐

  1. UVA10140 Prime Distance

    UVA10140 Prime Distance 给定两个整数L,R(1<=L<=R<=2^{31},R-L<=10^6)L,R(1<=L<=R<=231,R− ...

  2. P4383 [八省联考2018]林克卡特树lct

    题目链接 题意分析 一句话题意就是 : 让你选出\((k+1)\)条不相交的链 使得这些链的边权总和最大 (这些链可以是点) 我们考虑使用树形\(DP\) \(dp[i][j][0/1/2]\)表示以 ...

  3. k-近邻算法 python实现

    必要的注释已经写在code里面了: import operator from numpy import* def init(): grp=array([[1.0,1.1],[1.0,1.0],[0,0 ...

  4. Vue 不睡觉教程3 - 来点实在的:自动计算剩余时间的任务列表

    目标前两课教的是入门和文件结构.都没有什么实在的东西.这次我们要来点实在的.我们要做出一个待办列表.这个待办列表有以下特点: 可以自动从文本中抽取出这件事情的开始时间可以显示当前距离这件事情的开始时间 ...

  5. 开源单点登录系统CAS入门

    一.什么是CAS CAS 是 Yale 大学发起的一个开源项目,旨在为 Web 应用系统提供一种可靠的单点登录方法,CAS 在 2004 年 12 月正式成为 JA-SIG 的一个项目.CAS 具有以 ...

  6. idea 验证码

    N757JE0KCT-eyJsaWNlbnNlSWQiOiJONzU3SkUwS0NUIiwibGljZW5zZWVOYW1lIjoid3UgYW5qdW4iLCJhc3NpZ25lZU5hbWUiO ...

  7. 【实战】Axis2后台Getshell

    实战遇到的情况---任意文件读取,读取/conf/axis2.xml内容,读取用户名和密码登录后台 当然弱口令也是屡试不爽的. 操作起来 1.上传cat.aar(链接:https://pan.baid ...

  8. Android动画及滑动事件冲突解决(转载)

    原文链接:http://blog.csdn.net/singwhatiwanna/article/details/38168103 Android开发中动画和事件处理是程序员迈向高手的必经之路,也是重 ...

  9. mono for android生成APK出现错误fatal error in gc 解决方案

    laxknight 标签: mono for android,fatal error in gc mono for android生成APK出现这个错误fatal error in gc collec ...

  10. CentOS 7进入救援模式的方法

    CentOS 7版本进入救援模式并修改密码:方法1: runlevel 显示当前的运行级别(进入救援模式需要进入单用户模式) 方法2: ①.开机时随便按下键盘,进入系统选择菜单 ②.选择第一项,按e键 ...