内联元素 (行内元素): 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>