网页布局总结

1.盒子布局

            html的每一个标签都可以看做是一个盒子，但是盒子布局一般是利用标准块级元素div来进行布局，div没有具体的语义。通过对盒子宽度width，高度height，内边距padding，外边margin,

边框border等属性进行设置，达到网页布局的目的。

 1.1width/height

在对一个盒子设置width/height属性时，本质上是设置盒子模型中的content区域的高度和宽度，整体盒子的大小会受到padding和border的影响。

1.2padding

内边距是盒子内容content和边框border之间的区域，该区域如果设置大小，则会撑大盒子。

四个方向上都可以设置padding属性，单独设置某个方向上的padding值只需要在padding后加上表示方向的词：padding-top(上内边距)，padding-right(右内边距)，padding-left(左内边距)，padding-bottom(下内边距)，也可以使用padding的复合写法，根据参数的个数不同，有以下几种情况：

padding后跟1个参数：表示四个方向的内边距大小

padding后跟2个参数：分别表示上下，和左右的内边距大小

padding后跟3个参数：分别表示上，左右，下内边距的大小

padding后跟4个参数：分别表示上，右，下，左（顺时针）内边距的大小

1.3边框

边框是盒子模型的最外层，设置了边框后，也会撑大盒子模型。

边框可以设置三个属性：border-style(边框样式),border-width（边框宽度）,border-color（边框颜色）。其中border-style是必须属性。

border-style的可取值有：

• otted - 定义点线边框
• dashed - 定义虚线边框
• solid - 定义实线边框
• double - 定义双边框
• groove - 定义 3D 坡口边框。效果取决于 border-color 值
• ridge - 定义 3D 脊线边框。效果取决于 border-color 值
• inset - 定义 3D inset 边框。效果取决于 border-color 值
• outset - 定义 3D outset 边框。效果取决于 border-color 值
• none - 定义无边框
• hidden - 定义隐藏边框

 border-width:一般跟上px像素单位，表示边框宽lor:

border-color:

        用表示颜色的16进制或者关键字来规定边框颜色

边框的复合写法：

        border:border-width border-style border-color;

        注意：三个参数顺序没有要求，参数之间使用空格隔开，border-style必须要写。

1.4外边距（margin）

        外边距不属于盒子本身的内容，他的大小不会影响盒子的整体大小。外边距是用来规定一个盒子与另一个盒子之间的距离，也是从四个方向来规定。

        与padding类似，单独书写某个方向的外边距时，只需要在margin后跟上表示方位的词，

外边距的复合写法（与padding类似）：

margin后跟1个参数：表示四个方向的外边距大小

margin后跟2个参数：分别表示上下，和左右的外边距大小

margin后跟3个参数：分别表示上，左右，下内外距的大小

margin后跟4个参数：分别表示上，右，下，左（顺时针）外边距的大小

补充：外边距塌陷问题

        垂直外边距塌陷：两个垂直方向上的盒子，如果上面的盒子设置了下边距，下面的盒子设置了上边距，则他们两个之间的距离会塌陷到较大的那一个，而不是两个距离相加。

        嵌套外边距塌陷：当两个盒子嵌套时，若给里面的盒子加上上内边距（margin-top）,

内部的盒子并不会远离父盒子，而是父盒子与子盒子一起向下移动。

1.5显示模式（display）

每个盒子都有不同的显示模式，常见的有block(块级)，inline(内联)，inline-block(行内块)

在某些场景下，需要转换元素的显示模式，如：想让div元素在一行内显示，可以将display设置为inline或者inline-block.不同的显示模式，元素的特性也会发生改变

block：可以指定元素高度和宽度，每个元素独占一行。

inline:  元素高度和宽度指定无效，多个元素会在一行内显示。

inline-block:可以指定元素高度和宽度，多个元素会在一行内显示。

2.浮动布局

可以给元素添加float属性，取值有left,right。

浮动的特性：

1.添加了浮动的元素会具有行内块元素（inline-block）的特征。

当我们需要让几个div一行显示时，就可以给每个div加上浮动

2.浮动的元素会脱离文档流，如果前面的元素浮动了，后面的元素没有浮动，则后面的元素会跑到浮动的元素下面，被浮动的元素压住。

3.定位布局

定位（position）的常用取值有：absolute（绝对定位），relative(相对定位)，fixed(固定定位)等

3.1relative相对定位

相对元素正常的位置进行移动，可取值：top，left,bottom,right,表示距离某个方向多少距离。

不脱离文档流。

3.2absolute绝对定位

元素相对于第一个有定位的父元素的距离。脱离文档流。

3.3fixed固定定位

元素相对于浏览器窗口的距离，脱离文档流。