行级元素块级元素行内块级元素

最新推荐文章于 2023-12-11 16:53:00 发布

原创最新推荐文章于 2023-12-11 16:53:00 发布 · 353 阅读

1 ·

CC 4.0 BY-SA版权

HTML+CSS相关专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了HTML中的三种基本元素类型：块级元素、行级元素和行内块级元素的特点及常见示例，并通过具体代码展示了如何为这些元素设置样式。

行级块级元素（行内块级元素）
       1、能设置宽高
       2、能和其他元素待在同一行
       常见的行内块级元素：img 表单

<style>
    img{
	width: 300px;
	height: 300px; 
    }
</style>
<body>
    <img src="tupian.jpg" /> <img src="tupian.jpg"/>
</body>

行级元素
       1、不能设置宽高
       2、能和其他元素待在同一行
       常见的行元素：a span strong em u

<style>
    a{
        width: 300px;
        height: 40px;
        /*边框:粗细 线条样式 颜色*/
        border: 2px solid red;
				
}
</style>
<body>
    <a href="">百度</a>
    <a href="">百度</a>
    <a href="">百度</a>
</body>

块级元素
       1、能设置宽高
       2、独占一行不和其他元素待在同一行
       常见的块级元素：div p ul li h1-h6

<style>
    p{
        width: 300px;
	height: 40px;
	/*边框:粗细 线条样式 颜色*/
	border: 2px solid blue;			
    }
</style>
<body>
    <p>私人网站</p>
    <p>私人网站</p>
    <p>私人网站</p>
</body>