块级元素:
首先说明display是块级元素,会单独站一行,如
代码:
<!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)后,则为:(会换行)
代码:
<!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时,背景会填充整行。如:
常用的块级元素:div,ul(无序列表),ol(有序列表),li(列表内容),p,dl(叙事式列表),h1~h6,hr(水平分隔符),table(表格)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
内联元素:注意,内联元素不会独占一行。width和height对其不起作用。
如图:其中的strong元素没换行显示
代码:
<!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