欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css中元素的变化

程序员文章站 2022-04-01 07:56:27
...
<!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>
相关标签： css系列（精通 精通）

上一篇： 计算两个向量的点积

下一篇： Apache2的httpd.conf翻译_php基础

推荐阅读