前端---HTML-块元素、行内元素、浮动，定位

最新推荐文章于 2022-08-09 20:30:09 发布

weixin_35264169

最新推荐文章于 2022-08-09 20:30:09 发布

阅读量672

点赞数

分类专栏：前端文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_35264169/article/details/82556895

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.9 块状元素和内联元素的区别

a、块状元素单独成行吧，不用其他元素一起在一行，内联元素可以多个并排在一行

b、块状元素内可以有子元素，内联元素不能包括子元素

c、块状元素可以设置宽高，内联元素不能设置宽高

d、块状元素和内联元素可以通过display属性进行互相转换：

display:inline块状元素转换为内联元素

display:block内联元素转换为块状元素，然后就可以对其设置高度和宽度

ps：

如果要让块元素换行，需要在换行的2个div之间，加个clear属性为both的div*/-->

https://pc-shop.xiaoe-tech.com/appgp6EDV1w6936/video_details?id=v_5b4584dae8eaf_InGfun1H

代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <style type="text/css">
       body,div{
           margin: 0px;
           padding: 0px;
       }
       #div1{
           float: left;
           width:300px;
           height: 300px;
           margin-left: 30px;
           margin-top: 30px;
           background-color: #FF9000;
       }
       #div2{
           float: left;
           margin-left:30px;
           margin-top: 30px;
           width: 400px;
           height: 300px;
           background-color: fuchsia;
       }
       #div3{
           margin-left:30px;
           margin-top: 30px;
           width: 400px;
           height: 300px;
           background-color: blue;
       }
       #clear{
           clear: both;
       }
   </style>
   <body>
       <div id="div1"></div>
       <div id="div2"></div>
       
       <div id="clear"></div>
       <div id="div3"></div>
   </body>
</html>

weixin_35264169

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端---HTML-块元素、行内元素、浮动，定位

1.9 块状元素和内联元素的区别a、块状元素单独成行吧，不用其他元素一起在一行，内联元素可以多个并排在一行b、块状元素内可以有子元素，内联元素不能包括子元素c、块状元素可以设置宽高，内联元素不能设置宽高d、块状元素和内联元素可以通过display属性进行互相转换：display:inline块状元素转换为内联元素display:block内联元素转换为块状元素，然后就可以对...
复制链接

扫一扫

专栏目录