CSS学习笔记()

CSS学习笔记

元素的显示模式和转换方法总结

分类

举例

特点

转换

块级元素

h1-h6,p,div,ul,ol,li

自己独占一行；

高度宽度、内外边距可以控制；

默认宽度是容器（父级）的100%；

里面可以放行内元素或块级元素；

转换为块级元素：

display:block;

行内元素

a,strong,b,em,i,del,s, ins,u,span

也称为内联元素，一行可以放多个；

宽度高度设置无效；

默认宽度是其本身内容的宽度；

行内元素只能容纳文本或者其他行内元素；

 

转换为行内元素：

display:inline;

行内块元素

img,input,td

同时具有行内元素和块级元素的特点；

和相邻的行内元素（或行内块元素）在一行显示，他们之间会有空白间隙，一行可以显示多个（行内元素的特点）；

行内元素卆他本身内容的宽度（行内元素的特点）；

宽度高度、内外边距都可以 控制（块级元素的特点）；

转换为行内块元素：

display:inline-block;

分类

举例

特点

转换

块级元素

h1-h6,p,div,ul,ol,li

自己独占一行；

高度宽度、内外边距可以控制；

默认宽度是容器（父级）的100%；

里面可以放行内元素或块级元素；

转换为块级元素：

display:block;

行内元素

a,strong,b,em,i,del,s, ins,u,span

也称为内联元素，一行可以放多个；

宽度高度设置无效；

默认宽度是其本身内容的宽度；

行内元素只能容纳文本或者其他行内元素；

转换为行内元素：

display:inline;

行内块元素

img,input,td

同时具有行内元素和块级元素的特点；

和相邻的行内元素（或行内块元素）在一行显示，他们之间会有空白间隙，一行可以显示多个（行内元素的特点）；

行内元素卆他本身内容的宽度（行内元素的特点）；

宽度高度、内外边距都可以 控制（块级元素的特点）；

转换为行内块元素：

display:inline-block;

#end

————————

CSS学习笔记

元素的显示模式和转换方法总结

分类

举例

特点

转换

块级元素

h1-h6,p,div,ul,ol,li

自己独占一行；

高度宽度、内外边距可以控制；

默认宽度是容器（父级）的100%；

里面可以放行内元素或块级元素；

转换为块级元素：

display:block;

行内元素

a,strong,b,em,i,del,s, ins,u,span

也称为内联元素，一行可以放多个；

宽度高度设置无效；

默认宽度是其本身内容的宽度；

行内元素只能容纳文本或者其他行内元素；

 

转换为行内元素：

display:inline;

行内块元素

img,input,td

同时具有行内元素和块级元素的特点；

和相邻的行内元素（或行内块元素）在一行显示，他们之间会有空白间隙，一行可以显示多个（行内元素的特点）；

行内元素卆他本身内容的宽度（行内元素的特点）；

宽度高度、内外边距都可以 控制（块级元素的特点）；

转换为行内块元素：

display:inline-block;

分类

举例

特点

转换

块级元素

h1-h6,p,div,ul,ol,li

自己独占一行；

高度宽度、内外边距可以控制；

默认宽度是容器（父级）的100%；

里面可以放行内元素或块级元素；

转换为块级元素：

display:block;

行内元素

a,strong,b,em,i,del,s, ins,u,span

也称为内联元素，一行可以放多个；

宽度高度设置无效；

默认宽度是其本身内容的宽度；

行内元素只能容纳文本或者其他行内元素；

转换为行内元素：

display:inline;

行内块元素

img,input,td

同时具有行内元素和块级元素的特点；

和相邻的行内元素（或行内块元素）在一行显示，他们之间会有空白间隙，一行可以显示多个（行内元素的特点）；

行内元素卆他本身内容的宽度（行内元素的特点）；

宽度高度、内外边距都可以 控制（块级元素的特点）；

转换为行内块元素：

display:inline-block;

#end