0430-CSS元素的显示模式

来源：互联网发布：sql数据库怎么用编辑：程序博客网时间：2024/05/22 04:41

在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素1.什么是块级元素, 什么是行内元素?块级元素会独占一行行内元素不会独占一行容器级的标签div h ul ol dl li dt dd ...文本级的标签span p buis stong em ins del ...块级元素p div h ul ol dl li dt dd行内元素span buis strong em ins del2.块级元素和行内元素的区别?2.1块级元素独占一行如果没有设置宽度, 那么默认和父元素一样宽如果设置了宽高, 那么就按照设置的来显示2.2行内元素不会独占一行如果没有设置宽度, 那么默认和内容一样宽行内元素是不可以设置宽度和高度的2.3行内块级元素为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS元素的显示模式</title>    <style>        div{            background: red;            width: 200px;            height: 200px;        }        span{            background: blue;            width: 200px;            height: 200px;        }        img{            width: 50px;            height: 50px;        }    </style></head><body><div>我是div</div><p>我是段落</p><h1>我是标题</h1><hr><span>我是span</span><b>我是加粗</b><strong>我是强调</strong><hr><img src="images/picture.jpg" alt=""><img src="images/picture.jpg" alt=""></body></html>

0 0