制作网页---CSS定位

1.块级元素与行级元素

这两种元素的英文分别为block element和inline element

其中inline element有翻译为内联元素、行内元素，这里我为了与块级元素对应所以称它为行级元素。

（1）不同

①显示

块级元素独占一行显示

行级元素一行内并排显示

②用途

块级元素一般用于包含其他元素，作为容器

行级元素一般用于表示语义

③包含

块级元素可以包含其他块级元素、行级元素

行级元素最多包含行级元素

④框

块级元素生成矩形框

行级元素生成行框，行框的高度总是足以容纳包含它所包含的所有行内框，不过可以设置行高进行修改

（2）常见块级元素

div

fieldset

form

h1-h6

hr

ol、ul、dl、li、dt、dd

p

table

（3）常见行级元素

a

br

img

input

label

select

span

textarea

2.盒子模型

上个图

简单说就是整个

盒子大小=宽高+padding大小+border宽度+margin大小

注意：宽高+padding=background

3.CSS定位机制

（1）普通流

块级框从上到下一个一个排列。框之间的垂直距离由框之间的垂直外边距计算出来。

行内框在一行中水平布置。

由一行形成的水平框称为行框。

（2）定位

本质上都是相对的定位，是一种普通流。

①相对定位，即相对于自身原始位置的定位。

②绝对定位，即相对于别人位置的定位。这个别人是指，最近的已定位的祖先元素。

注意：绝对定位实际上就是，指定本元素左上角的那个点，处于已定位父元素的哪里。

（3）浮动流

浮动是一种独立于普通流的可以将其看做两个次元的东西，因为普通流和浮动流是可以有条件地相互重叠的。

①浮动流相互之间会隔开。

②浮动流与普通流可以重叠，但是当有内容的时候，不会重叠有内容的部分。

比如有两个div，div1是浮动的，div2是普通的，如果他们里面没有内容，他们可能重叠。

如果有内容，至少内容部分不会重叠在一起。

注意：可以通过clear，清除浮动效果。

4.对其方式

（1）行级元素

①水平对齐

text-align

②垂直对齐

line-height= father_width

（2）块级元素

A。水平对齐

①使用浮动

float:left; 左对齐 
float:right; 右对齐

②使用定位

父元素

position: relative;

本元素

position: absolute;

left: 0;左对齐

right: 0;右对齐

B。水平居中

margin: 0 auto;或者 margin: auto;

注：margin： 0 auto = margin ：0 auto 0 auto

而margin：auto= margin：auto auto auto auto

而在正常书写流情况下对于top和bottom的auto就是0，而对于left与right的auto就是利用剩余空间，所以这个时候就水平居中了。

这个方法不能垂直居中，是因为默认情况下垂直方向上的长度是不定的，所以当垂直方向上的高度也确定的时候，也是可以用auto实现垂直居中的。

C。垂直对齐

使用定位

父元素

position: relative;

本元素

position: absolute;

top: 0;上对齐

bottom: 0;下对齐

D。垂直居中

方法1

margin：xxx auto 0

其中xxx是father_width-(self_width/2)

即利用auto先水平居中，然后利用margin top下降适当高度。

方法2

利用定位及负边距

①把其父元素定好位，如果父元素为全屏的话，position：relative即可。

②设置自身定位，position：absolute

left：50%

top：50%

这样，想要定位的元素的左上角就已经定位到父元素的中间了。

③margin-left：-width/2

margin-top：-height/2

通过这个步骤，我们就将本元素中心点，移动到父元素中心点了。定位成功。

方法3

对于方法2的改进

由于方法2这里需要计算元素本身的长与宽，所以不是很方便。

而采用CSS3的特性，可以这样实现。

父元素

position: relative;

本元素

position: absolute;

left: 50%;

top: 50%;

transform: tranlate(-50%, -50%);

这里的主要缺点就是采用了CSS3的特性，在一些以前的浏览器上面兼容性不强。

方法4

还是利用auto

前面提到，auto只能用于水平居中，原因是垂直方向高度是不确定的，垂直方向上的auto最终会被解析为0，但是一旦通过定位确定了垂直方向上的高度，

就和水平居中是一样的了。

父元素

position: relative;

本元素

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;