数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学CSS生成的盒子类型
在文档树经过可视化格式化模型处理后，每个元素都会生成一个或多个盒子。生成的盒子与某些CSS属性相关联，并据此在HTML中呈现。为了显示元素，以下是两种常用的值：
块级(block) - 从新行开始。占据可用的全部宽度。
内联(Inline) - 不从新行开始。只占据所需宽度。
CSS中生成的盒子类型如下：
块级元素和块级盒子
匿名块级盒子
内联级元素和内联盒子
匿名内联盒子
块级元素和块级盒子
让我们来看一个块级元素和块级盒子的例子。我们将使用的块级元素包括：<form>，<fieldset>，<div>等。
首先创建一个带有子容器的div父容器：
<div id="container">Color Orange <div class="child"></div>Color Red <div class="child"></div>Color Violet <div class="child"></div> </div>
现在，设置子容器的高度和宽度：
.child{
height: 40px;
width: 100%;
color: white;
border: 4px solid black;
}
设置子容器的颜色。可以使用nth-of-type()伪类：
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
示例
这是一个例子：
<!DOCTYPE html>
<html>
<head>
<title>CSS Block-level Elements and Block Boxes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
box-sizing: border-box;
/*margin:5px;*/
}
input[type="button"] {
border-radius: 10px;
}
.child{
height: 40px;
width: 100%;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Block-level Elements and Block Boxes</legend>
<div id="container">Color Orange
<div class="child"></div>Color Red
<div class="child"></div>Color Violet
<div class="child"></div>
</div><br>
</fieldset>
</form>
</body>
</html>
内联级元素和内联盒子
让我们来看一个内联级元素和内联盒子的例子。这里我们将使用的内联级元素是<span>。将内联元素设置在<div>中。我们将<span>设置在<div>内部：
<div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div>
设置父<div>内子容器的颜色。可以使用nth-of-type()伪类：
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
示例
这是一个例子：
<!DOCTYPE html>
<html>
<head>
<title>CSS Inline-level Elements and Inline Boxes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
}
input[type="button"] {
border-radius: 10px;
}
.child{
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Inline-level Elements and Inline Boxes</legend>
<div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div><br>
</fieldset>
</form>
</body>
</html>
更新于：2024年1月2日
1K+ 浏览量
广告