数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
安卓
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济
心理学
社会科学
时尚研究
法律研究CSS 中的块级元素和块级盒子
块级元素的 CSS 显示属性设置为“块”、“列表项”或“表”，且这些元素强制在它们上方和下方换行。块级元素会生成块级盒子，这是定位方案的一部分，且包含子盒子。
块级容器盒子既可包含块级盒子并遵循块级格式化上下文，也可包含内联级盒子并遵循内联格式化上下文。如果块级盒子也是块级容器，通常称为块级盒子。
匿名块级盒子是指开发者无法控制的盒子。如果一个内联盒子包含一个块级盒子，并且方块盒子周围的内联内容被封闭在一个匿名块级盒子里。
设置表单
首先，设置表单及其宽度 -
form {
width:70%;
margin: 0 auto;
text-align: center;
}
设置子级样式
设置子级的高度和宽度 -
.child{
height: 40px;
width: 100%;
color: white;
border: 4px solid black;
}
：nth-of-type(n) 选择器
对于这些元素，我们使用了 :nth-of-type(n) 选择器。它匹配父母的相同标签的第 n 个子元素 -
<div id="container">Color Orange <div class="child"></div>Color Red <div class="child"></div>Color Violet <div class="child"></div> </div>
第 n 个子元素
使用 :nth-of-type(n) 选择器在上方进行设置 −
.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;*/
}
.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>
</form>
</body>
</html>
更新于: 2023 年 10 月 27 日
1 千+ 次浏览
广告