css学习笔记一

text-indent缩进。
px像素，像素是相对单位。1em=1 * font-size=16px(默认是16px)，会根据你的font-size大小变的。所以缩进用
这个就比较好。
text-indent:2em;

1.行级元素，内联元素 inline
feature:内容决定元素所占位置，不可以通过css改变宽高。
span,strong,em,a,del

2.块级元素 block
feature:独占一行，可以通过css改变宽高。

3.行级块元素 inline-block
feature:内容决定大小，可以改宽高。
img就是行级块元素，img如果只设置了width的话，它的height会同比例缩放的。



行内元素和块级元素可以互相转换的。display:inline display:block display:inline-block


标签选择器的作用，初始化标签，可以把标签自带的marign,padding,样式啥的都去掉。
ul{
list-style: none;
margin: 0;
padding: 0;
}

em{
font-style: normal;
color: #e50000;
}

通配符选择器:权重为0
*{
margin: 0;
padding: 0;
}

盒子模型:margin padding border content,很多浏览器的bod有默认的margin是8px


定位:
CSS的position属性用于指定元素的定位类型。默认值: static，静态定位的元素不能使用 top, right, bottom 和 left 属性进行定位。
absolute绝对定位，脱离文档流，脱离原来位置进行定位，跑到上面那一
层去了。
relative相对定位，不脱离文档流，保留原来的位置进行定位。一般被作为参照物。
fixed固定位置，脱离文档流。

z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象），
用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序，
也就是说如果元素是没有定位的，对其设置的z-index会是无效的

介绍一个元素居中的写法:背下来。
div{
position:absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
background-color: red;
margin-left: -50px;
margin-top: -50px;
}


margin合并和塌陷的问题:
margin合并:
兄弟结构水平方向的margin正常，但是垂直方向上面的margin会合并，
并且这里的取到的是较大的一个，一般情况下，margin合并我们可以不处理，合理安排垂直方向的margin就能达到需求效果。

margin塌陷
父子结构的元素，垂直方向上的margin，会取最大那个



BFC: block format context - 块级格式化上下文，每一个盒子当中都有一套正常的渲染规则，但是我们可以通过一些语法，
来触发bfc，让这个盒子的渲染规则不一样！ 就是这个渲染规则的改变，刚好就解决了margin塌陷的问题，下面是触发bfc的语法：
position： absolute；
display：inline-block;
float：left / right
overflow: hidden;

float:left/right浮动元素产生了浮动流，
所有产生了浮动流的元素，块级元素看不到他们，
产生了bfc的元素和文本类属性(inline)的元素以及文本都能看到浮动
元素。（让block元素无视float元素，让inline元素让流水一样围绕着float元素）