铁人赛 Day5 -- 一定要知道的 CSS (二) - display属性的应用
前言
不罗嗦，一样先附上程序码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.banner{
width: 300px;
height: 300px;
border: 2px double #000;
}
.banner h1{
color: blue;
text-align: center;
}
.banner h2{
font-size: 20px;
text-align: center;
}
.banner1{
display:inline-block;
background-color: rgb(158, 255, 2);
width: auto;
height: 50px;
border: 2px double #000;
}
.banner2{
margin-top: 10px;
display:inline-block;
background-color: rgb(158, 255, 2);
width: auto;
height: 50px;
border: 2px double #000;
}
</style>
</head>
<body>
<div class="banner">
<h1>我是土地</h2>
<div class="banner1">
<h2>display:block</h2>
</div>
<div class="banner2">
<h2>display:block</h2>
</div>
</div>
</body>
</html>
display属性
display 属性是可以让我们自由设定网页元素的显示类型
而 Div区块 本身的预设为 display:block
而预设为 display:inline 的则是内行元素
display:block 与 display:inline 的差别
display:block -->使区块元素一次占掉一整行
.banner1{
display:block;
background-color: rgb(158, 255, 2);
width: auto;
height: 50px;
}
如下图一样，Div区块直接占掉一整排
display:inline-block -->使区块元素并排
.banner1{
display:inline-block;
background-color: rgb(158, 255, 2);
width: auto;
height: 50px;
border: 2px double #000;
}
.banner2{
margin-top: 10px;
display:inline-block;
background-color: rgb(158, 255, 2);
width: auto;
height: 50px;
border: 2px double #000;
}
两个区块则会并排
让 Div 并排就是这麽简单，我们明天再继续讲 display的其他属性
那我们铁人赛Day6见罗!!
>>: 铁人赛 Day5 -- 建立属於自己的MySQL资料库
【Day27】 在 Swift 中去呼叫 C/C++ 程序码
有时候进去多平台开发，或更新原本就平台的程序码时 ，需要使用现有的新技术去呼叫之前写好的 C/C++...
[ Day 38 ] - winston 记录下发生的错误
常见的故事 ... 客户 : 系统出错了 , 可以帮忙修一下吗 【・ヘ・?】 工程师 : 我这边看起...
# 番外: 法喜充满，bug占满?? 当程序码遇到信仰
如何在冷冰冰程序语言中参杂一些有趣的东西~身为新手的我每次写程序难免BUG充斥字里行间，因此减少Bu...
[Java Day06] 2.1. 阵列
教材网址 https://coding104.blogspot.com/2021/06/java-a...
Day3 Python 基础教学 (二)
前篇介绍完安装之後，我们这边要来介绍建立 python 的虚拟环境， virtualenv 是一个程...