css基础

css基础

1.块级元素，行内元素，和内联元素

块级元素就是可以设置宽高，自己可以单独成为一行，别的元素无法跟他并行；

行内元素，对其设置宽高无法起作用，只能依靠自己内部元素来撑起宽高，可以和别的行内元素或者内联元素并行，无法和块级元素并行；

内联元素，可以设置宽高，也是自己不单独成一行，可以和内联元素或者行内元素成为一行；

当然这些可以用display属性来转换，display:block可以转换成块级元素，display:inline,可以转换成为行内元素，display:inline-block，可以转换成内联元素

2.边距问题

盒子模型的属性，内边距padding和外边距margin；

当这两个属性只有一个值的时候，例：padding：10px;那么就是四个内边距都是10px;

如果有两个值，例：padding: 10px 20px;那么就是上下内边距是10px，左右为20px；

三个值，例：padding: 10px 0 20px；那么就是上内边距是10px,左右为0，下为20px;

margin和padding他们的设置是相同的；

3.浮动（float)

在有些时候，需要对盒子进行浮动，来达到自己想要的布局。盒子浮动的时候，脱离了普通文档流。当上一个盒子浮动的时候，下一个盒子会自动跑上一个盒子的下面；下面我会将浮动和不浮动的情况截图显示

这个是两个盒子都没有浮动，也就是普通文档流的形式

这个是box1浮动的时候，box2不浮动的时候，box2会自动跟到box1的下方

这个是两个盒子都浮动，如果两个盒子的宽度的总和没有超过父盒子，两个盒子会并排

既然我们讲了浮动，那么有些时候我们需要清除浮动；

清除浮动有很多种方法，说一下我常用的方法；

伪类清除，IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题 

以下不截图了，第二种父盒子添加overflow:hidden；父盒子不用添加高度，会随着子盒子最高的高度走，如果父盒子添加高度没有子盒子高，那么会隐藏掉一截；第三种，父盒子跟子盒子一起浮动，第四种是，同级盒子之间的清除，用clear:both，clear:left，clear:right，按照字面意思，清除对应的浮动

4.定位(position)

定位有3个属性，默认static(加上这个相当于4种)；第一种，relative，单独加这个对于自己本身是没有任何的影响的；第二种，absolute，子级绝对定位，父级相对定位，可以用left,right,top,bottom，来决定相对于父级的位置，第三种是fixed，这种是相对于浏览器来决定位置的也是left,right,top,bottom来决定在浏览器中的位置，如果想要清除定位（relative是不需要清除的），用static；

布局是基于浮动和定位来实现，有时间整理出布局的相关内容