css中元素的变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.header
{
width: 980px;
height: 100px;
background: red;
margin: auto;
margin-bottom: 10px;
}
.content
{
width: 980px;
height: 500px;
background: blue;
margin: auto;
margin-bottom: 10px;
}
.footer
{
width: 980px;
height: 100px;
background: yellow;
margin: auto;
}
.logo
{
width: 200px;
height: 50px;
background: pink;
float: left;
margin: 20px;
}
.nav
{
width: 600px;
height: 50px;
background: black;
float: right;
margin: 20px;
}
.aside
{
width: 250px;
height:460px;
background: purple;
float: left;
margin: 20px;
}
.article
{
width: 650px;
height: 460px;
background: deepskyblue;
float: left;
margin: 20px;
}
span{
color: red;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="aside"></div>
<div class="article"></div>
</div>
<div class="footer">
</div>
<p>努力到<span>无能为力</span>, 拼搏到<span>感动自己</span></p>
</body>
</html>
<!--
-->核心在于：块级标签可以嵌套任何的标签，文本级别的只能嵌套图片超链接 文字。 块级占一行，文本级不会。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div
{
background: red;
width: 200px;
height: 200px;
}
span
{
background: blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>我是div</div>
<p>我是段落</p>
<h1>我是标题</h1>
<hr>
<span>我是span</span>
<b>我是加粗</b>
<strong>我是强调</strong>
</body>
</html>核心；2.块级元素和行内元素的区别? 2.1块级元素 独占一行 如果没有设置宽度, 那么默认和父元素一样宽 如果设置了宽高, 那么就按照设置的来显示
2.2行内元素 不会独占一行 如果没有设置宽度, 那么默认和内容一样宽 行内元素是不可以设置宽度和高度的
2.3行内块级元素 为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素 –>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div
{
display: inline;
background: red;
width: 200px;
height: 200px;
}
span
{
display: block;
background: blue;
width: 200px;
height: 200px;
}
.cc
{
background: yellow;
width: 200px;
height: 200px;
display: inline-block;
}
</style>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
<p class="cc">我是段落</p>
<b class="cc">我是加粗</b>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-08-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读