1. 1em=1 fint-size 网络默认font-size是16px
2.行级元素:inline内容决定元素所占位置,不可以通过css改变宽高
块级元素:独占一行,可以通过css改变宽高
行级块元素:内容决定大小,可以改宽高(inline-block),凡是带有inline的特性都有文字特性
3.标签选择器最大的用处不是选择标签,是用来初始化标签
4.通配符最大作用是去掉天生的那些间距,比如ul中li天生的间距,很多标签天生就带一些padding和margin,通配符可以去掉(通配符权重是0)
5.absolute:脱离原来位置进行定位,最近的有定位的父级进行定位,如果没有那么相对文档进行定位
relative:保留原来位置进行定位,灵魂出窍,相对自己原来位置进行定位
relativr当做参照物标杆,因为他保留原来位置,obsolute脱离文档流对参照物进行偏离;
*{padding:0;margin:0;}
6.margin塌陷:子元素在父元素里面的margin-top无效,在文档流中,父元素的高度默认是被子元素撑开的
也就是说 子元素有多高,父元素就有多高
但是当子元素设置浮动之后,子元素会完全脱离文档流
此时将会导致子元素无法撑开父元素的高度,导致父元素高度塌陷
具有bfc的元素我们可以抽象的理解成为隔离了的独立容器
那这个隐藏的属性我们如何触发(开启)呢?
方法:
(父元素)满足下面任一条件即可
浮动元素 float属性值为除了none以外的值
绝对定位元素 position 为 absolute、fixed
display 为inline-blocks,table-cells,table-captions
overflow 为 hidden,auto,scroll
针对自己的需求来使用
7.float浮动元素产生了浮动流,所有产生了浮动流的元素,块级元素看不到人他们
产生了bfc的元素和文本都能看到浮动元素,并不是和absolute一样产生分层
clear:both(清除左右两边浮动流),再加上 border-top:0 就可以将自己元素包裹
<div class="wrapper">
<div class="content">1</div>
<div class="content">1</div>
<div class="content">1</div>
<p></p>
</div>
.wrapper{
border:1px solid black
}
.content{
float:left;
color:#fff;
background-color:black;
width:100px;
height:100px;
}
.p{
border-top:0 solid green;
clear:both;
}
让最后一个元素清除浮动!
父级元素为什么包不住浮动元素:因为浮动元素有浮动流,父级元素看不到。
可以利用伪元素清除浮动元素。