css中的块级和内联元素

时间:2023-03-08 22:26:19

块级元素:

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

css中的块级和内联元素

代码:

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display元素</title>
<style type="text/css">
.box1{
height: 50px;
width: 300px;
background-color: #40E0D0;
}
strong {
font-size: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<strong>晨落梦公子</strong>
</body>
</html>

但当添加上浮动(float)后,则为:(会换行)

css中的块级和内联元素

代码:

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display元素</title>
<style type="text/css">
.box1{
height: 50px;
width: 300px;
background-color: #40E0D0;
float: left;
}
strong {
font-size: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<strong>晨落梦公子</strong>
</body>
</html>

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

css中的块级和内联元素

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

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

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

css中的块级和内联元素

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

css中的块级和内联元素

代码:

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display元素</title>
<style type="text/css">
.box1{
height: 50px;
/*width: 300px;*/
width: auto;
background-color: #40E0D0;
}
strong {
font-size: 50px;
}
.inline1 {
background-color: #FF9912;
}
.inline2 {
background-color: #ff0000;
}
</style>
</head>
<body>
<!--<div class="box1"></div>-->
<strong class="inline1">晨落梦公子</strong><strong class="inline2">晨落梦公子</strong>
</body>
</html>

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

用display可以改变内联和块。

display:block 将内联转换成块

display:inline 将块装换成内联

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

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

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

1、display:block

2、display:inline-block

3、float