divcss概述和盒子模型

Div css

1 块元素 内联元素

块元素：没有任何属性和布局的时候，排列方式以换行方式排列的，可以设置宽高

Form table p h1—h6 div ol ul dl…

2 内联元素（行内元素）

没有任何属性和布局的时候，排列方式以同行方式排列的，直到内容超出元素的范围，才换行

A  img  select input textarea strong …

 

注意： 块元素和行内元素是可以相互转化的

内联元素---》块元素：

         Display:block

块元素---》内联元素

         Display：inline-block

块元素内：可以包含  block  和 inline-block

 

Div css 符合web2.0编程思想 标记和属性分离  （结构和表现分离）

Div ul ol li dl  dt  dd  span

Div 块元素：

Div 可以嵌套：

 

Ul  块元素  和 li组合使用  type="circle  disc  square"   无序列表

Ol  块元素     有序列表  和li 组合使用  type  = “1 a A i”

Dl  块元素： dt dd  自定义列表

 

Span 内联元素

 

3 web2.0思想：

         Div css 来布局整个页面，w3c制定的标准 ， 结构和表现分离

便于管理。

优势：

1 精简代码

2 方便维护

3 结构清晰

 

4 盒子模型：

         所有的页面 都可以用方框来划分---》 盒子模型

         外边距   边框  内边距 内容