CSS框架构

1、行级元素和块级元素：

块级元素：<div><p><h1-6><hr><table><ul><ol><form>

1、块级元素独占一行，块级元素后面无法再放任何内容（上下排列）

2、从页面布局看就类似于一篇报纸的排版；首先将网页分成打的模块，然后在模块里面再分成小的模块，所以块级元素多用来布局网页架构；

3、块级元素支持高和宽

4、块级元素可以容纳其他行级元素和块级元素。

行级元素：<span><label><a><input><textarea><br><img>

1、只占以小块空间，后面可以继续放内容；(左右排列)

2、行级元素也成为行内标签，内联标签，使用块级元素将网页搭建好了后，使用行级元素来排版；

3、行级元素不支持高和宽，高和宽由内容决定；

4、行级元素用来组织内容；排版文字，图片，超链接

2、如何操作使块级标签和行级标签之间相互转换：

div{

display：block /link； block为块级； inlink为行级；

inlink-block（行内块级元素） 按照行级标签排列，也具有块级标签属性；

img：就是一个行内块级元素，

}

隐藏标签：display：none； 京东图书的二级标签；

3、如何用table来进行布局：table>tr3*>td2*

DIV+CSS进行布局

border-collapse : collapse ; 什么效果：

< td colspan= "2" > 首页 </ td > 合并列；

border : 1 px solid red ; 设置边框方式 （solid为实线； 虚线-dashed 点线：dooted）

上下居中，左右居中 margin：0 auto；

设置最小宽度： min-width：900px

4、盒子框架：（万物皆盒子） 边框的风格，颜色，间距

复合属性设置：大小 风格 颜色； 点线，虚线有兼容性问题；

一个盒子的宽度= 元素宽度+2*pading+2*border;

操作内边距，外边距：

左left 右right 上top 下botton

5、内边距：padding 设置内边距，会把盒子撑大；内边距任何的东西都无法到达；

左left 右right 上top 下botton

padding： 20px ; 一个参数代表上下左右都是一样的

padding： 20px 40px; 第一个参数表示上下，第二个参数表示左右

padding： 20px 30px 40px; 第一个参数表示上，第二个参数表示左右 ，第三个下

四个参数是上右下左；

6、外边距：margin body默认与windows窗口默认有5个像素的外边距；

左left 右right 上top 下botton

外边距和内边距在两个div为父子关系和兄弟关系各种情况下的设置影响情况；

1、外边距重叠情况，在一个地方的外边距取最大的外边距值；

2、在display：inline-block的时候外边距之间可能无法进行重叠效果；

3、外边距的传递性：父类没有边框，设置margin-top会将外边距传递到父类；【解决方案】：设置父类的边框就好了；