CSS知多少

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: 0;margin-bottom: 0} 
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)