首页 > 其他分享 >CSS学习笔记

CSS学习笔记

时间:2023-03-18 12:22:06浏览次数:48  
标签:行内 元素 笔记 学习 宽度 一行 display 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;

#end

标签:行内,元素,笔记,学习,宽度,一行,display,CSS
From: https://www.cnblogs.com/zhangdezhang/p/17229713.html

相关文章