css中的块级和内联元素

最新推荐文章于 2022-08-16 23:38:19 发布

weixin_30444105

最新推荐文章于 2022-08-16 23:38:19 发布

阅读量64

点赞数

原文链接：http://www.cnblogs.com/chenluomenggongzi/p/5203829.html

版权

块级元素：

首先说明display是块级元素，会单独站一行，如

代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>display元素</title>
 6     <style type="text/css">
 7         .box1{
 8             height: 50px;
 9             width: 300px;
10             background-color: #40E0D0;
11         }
12         strong {
13             font-size: 50px;
14         }
15     </style>
16 </head>
17 <body>
18 <div class="box1"></div>
19 <strong>晨落梦公子</strong>
20 </body>
21 </html>

View Code

但当添加上浮动（float）后，则为：（会换行）

代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>display元素</title>
 6     <style type="text/css">
 7         .box1{
 8             height: 50px;
 9             width: 300px;
10             background-color: #40E0D0;
11             float: left;
12         }
13         strong {
14             font-size: 50px;
15         }
16     </style>
17 </head>
18 <body>
19 <div class="box1"></div>
20 <strong>晨落梦公子</strong>
21 </body>
22 </html>

View Code

当不设置width或设置为auto时，背景会填充整行。如：

常用的块级元素：div，ul（无序列表），ol（有序列表），li（列表内容），p，dl（叙事式列表），h1~h6，hr（水平分隔符），table（表格）

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

内联元素：注意，内联元素不会独占一行。width和height对其不起作用。

如图：其中的strong元素没换行显示

代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>display元素</title>
 6     <style type="text/css">
 7         .box1{
 8             height: 50px;
 9             /*width: 300px;*/
10             width: auto;
11             background-color: #40E0D0;
12         }
13         strong {
14             font-size: 50px;
15         }
16         .inline1 {
17             background-color: #FF9912;
18         }
19         .inline2 {
20             background-color: #ff0000;
21         }
22     </style>
23 </head>
24 <body>
25 <!--<div class="box1"></div>-->
26 <strong class="inline1">晨落梦公子</strong><strong class="inline2">晨落梦公子</strong>
27 </body>
28 </html>

View Code

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

用display可以改变内联和块。

display：block 将内联转换成块

display：inline 将块装换成内联

display：inline-block 将容器转换为内联块，既可以设置width和height，又不会单独占一行

display：none 隐藏不占位 visiblility：hidden 隐藏但占位

把内联元素装换为块元素的3种方法

1、display:block

2、display:inline-block

3、float

转载于:https://www.cnblogs.com/chenluomenggongzi/p/5203829.html

weixin_30444105

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中的块级和内联元素

块级元素：首先说明display是块级元素，会单独站一行，如代码： 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>display元素</title>...
复制链接

扫一扫