HTML常用标签

最新推荐文章于 2018-11-23 13:11:44 发布

wilson_go

最新推荐文章于 2018-11-23 13:11:44 发布

阅读量792

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_30505673/article/details/82764549

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

内联元素 (行内元素): a img span
块元素 (行元素): h1----h6 p div

块元素的特点:

单个块元素在浏览器中默认独占一行
两个块元素不能够在一行显示, 他们会自动换成两行显示
块元素可以设置宽高等属性.

内联元素:

多个内联元素可以在一行显示
内联元素不能够设置宽高, 设置了也没有用, 不会显示出效果
内联元素的宽高由他们本身的内容多少来支撑, 内容多,宽高自动增加.

示例代码

border: 1px solid black;
是一种非常常见的写法，表示的是边框的宽度。

 .titlecx{
            line-height: 40px;
            margin-left: 20px;
            font-size: 18px;
            float: left;
            margin: 0px;
        }
        .titlegd{
            font-size: 12px;
            line-height: 40px;
            float: right;
            margin: 0px;
        }

上面代码中都有float浮动，第一次是left浮动，第二个是right浮动，放在同一个div中。
margin: 0px; 是外边框为0个像素。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1{
           border: 1px solid black;
           width: 602px;
           height: 302px;
        }
        .box2{
            width: 146px;
            height: 187px;
            margin-left: 20px;
            margin-right: 20px;
            background-color: aqua;
            float: left;
        }
        .box3{
            width: 394px;
            /* height: 200px; */
            /* background-color: blue; */
            float: left;
            padding-right: 20px;
        }
        .titlecx{
            line-height: 40px;
            margin-left: 20px;
            font-size: 18px;
            float: left;
            margin: 0px;
        }
        .titlegd{
            font-size: 12px;
            line-height: 40px;
            float: right;
            margin: 0px;
        }
        .cxgd{
            width: 564px;
            height: 50px;
        }
        .tit{
            width: 562px;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="tit">
            <div class="cxgd">
                <h1 class="titlecx">程序人生</h1>
                <p class="titlegd">更多>>></p>
            </div>    
        </div>
       
        <div>
                <div class="box2">
                        <img src="./images/programmer.jpg" alt="programmer" >
                    </div>
                    <div class="box3">
                        程序员（英文Programmer）是从事程序开发、维护的专业人员。一般讲程序员分为程序设计人员和程序编程人员，
                        但两者的界限并不清楚，特别是在中国。软件从业人员分为初级程序员、中级程序员、高级程序员、系统分析员、系统架构师，测试工程师六类。
                        世界上第一个程序员是英国著名诗人拜伦的女儿，曾设计巴贝奇分析机上解伯努力方程的一个程序。她叫AdaLovelace，她设置还建立了循环和 子程序的概念。由于其在程序设计上的开创性工作，
                        AdaLovelace被称为世界上第一个程序员。美国国防部开发的ADA语言就是为纪念这个世界上的第一个程序员而命令的。
                    </div>
        </div>
       

    </div>
</body>
</html>

wilson_go

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML常用标签

border: 1px solid black;是一种非常常见的写法，表示的是边框的宽度。.titlecx{line-height: 40px;margin-left: 20px;font-size: 18px;float: left;margin: 0px;}.titlegd{font-size: 12px;line-height: 40px;float: right;...
复制链接

扫一扫

专栏目录