整理一些HTML,CSS小知识点

整理一些HTML,CSS小知识点

#1.盒子模型
content（width+height）
padding
border
margin

#2.行级元素
a b span em strong del
块级元素
div ul li p form ol
行级块元素
image

#3.css选择器
①id ②class ③标签 ④通配符 ⑤伪类 ⑥父子选择器 ⑦并列选择器

#4.css权重
important ------>Infinity
行间样式------->1000
id ----------->100
class 伪类 属性----->10
标签 伪元素----->1
通配符-------->0

#5.定位（层模型）
body有一个默认的 margin 为8px;
①absolution //绝对定位
脱离原来位置定位（当第一个div设置了绝对定位，他就脱离了原来的层，跑到上一个层面上，下边的元素就可以占据他原来的位置）；
相对于最近的有定位的父级进行定位，如果没有有定位的父级，就相对于文档定位；
②relative //相对定位
保留原来位置定位；
相对于自己原来的位置进行定位；
③fixed //相对于可视区窗口定位
一个小例子（广告居中，滚轮滑动过程中，广告一直在屏幕中央）
<div></div> .div{ position:fixed; width:100px; height:100px; left:50%; top:50%; margin-left:-50px; margin-top:-50px; background-color:red; }
#6.两栏布局

<div class = right></div>
<div class = left></div>
.right{
width:100px;
height:100px;
background-color:red;
position:absolution;
right:0px;
}
.left{
height:100px;
margin-right:100px;
background-color:green;
}

#7.两个经典bug
①margin塌陷（垂直方向）

<div class=wrapper>
      <div class=content></div>
</div>
.wrapper{
width:100px;
height:100px;
background-color:red;
margin-left:100px;
margin-top:100px;
}
.content{
width:50px;
height:50px;
background-color:black;
margin-top:50px;
}
解决margin塌陷问题,在父级加bfc：
①overflow:hidden;
②position:absolution;
③float:left/right;
④display:inline-block

②margin合并
暂时还不能解决

#8.float：left/right 浮动模型
浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素看不到他们，产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素。

利用伪元素清除浮动流

<div class=wrapper>
      <div class=content>1</div>
      <div class=content>2</div>
      <div class=content>3</div>
</div>
.wrapper :: after{
content:" ";
display:block;
clear:both;
}
.content{
width:100px;
height:100px;
background-color:black;
float:left;
color:#fff;
}

#9.伪元素(行级元素)
伪元素天生就存在于标签中，在标签最前边和最后边就有

<span >world!!!</span>
.span :: before{
Hello 
}
.span :: after{
}

输出结果为：Hello world!!!

#10.浏览器内核
IE trident
FireFox Gecko
Chrome Webkit
Safari Webkit
Opera presto