首页 前端知识 前端必知必会-html的div和class

前端必知必会-html的div和class

2024-08-18 22:08:27 前端知识 前端哥 172 575 我要收藏

文章目录

  • HTML Div 元素
  • `<div>` 作为容器
  • 多个`<div>` 元素
  • 并排对齐 `<div>` 元素
  • Inline-block
  • Flex
  • 网格
  • HTML class 属性
  • 类的语法
  • 多个类
  • 在 JavaScript 中使用 class 属性
  • 总结


HTML Div 元素

<div> 元素用作其他 HTML 元素的容器。

<div> 元素

<div> 元素默认为块元素,这意味着它占用所有可用宽度,前后均带有换行符。

示例

<div> 元素占用所有可用宽度:

Lorem Ipsum <div>I am a div</div> dolor sit amet。

结果

Lorem Ipsum

I am a div dolor sit amet。

<div> 元素没有必需属性,但 style、class 和 id 很常见。

<div> 作为容器

<div> 元素通常用于将网页的各个部分组合在一起。

示例
带有 HTML 元素的<div> 元素:

<div>
<h2>伦敦</h2>
<p>伦敦是英格兰的首都。</p>
<p>伦敦有 1300 多万居民。</p>
</div>

结果

伦敦

伦敦是英格兰的首都。

伦敦有 1300 多万居民。

<div> 元素居中对齐
如果您的 <div> 元素宽度不是 100%,并且您想将其居中对齐,请将 CSS 边距属性设置为自动。

示例

<style>
div {
width:300px;
margin:auto;
}
</style>

多个<div> 元素

可以在同一个页面上拥有多个 <div> 容器。

示例

<div>
	<h2>伦敦</h2>
	<p>伦敦是英国的首都。</p>
	<p>伦敦有 1300 多万居民。</p>
</div>

<div>
	<h2>奥斯陆</h2>
	<p>奥斯陆是挪威的首都。</p>
	<p>奥斯陆有 60 多万居民。</p>
</div>

<div>
	<h2>罗马</h2>
	<p>罗马是意大利的首都。</p>
	<p>罗马有近 300 万居民。</p>
</div>

并排对齐 <div> 元素

构建网页时,您通常希望并排放置两个或多个 <div> 元素,

浮动
CSS 浮动属性最初并非用于并排对齐 <div> 元素,但多年来一直用于此目的。
CSS float 属性用于定位和格式化内容,并允许元素彼此浮动,而不是彼此叠加。

示例
如何使用 float 并排对齐 div 元素:

<style>
.mycontainer {
width:100%;
overflow:auto;
}
.mycontainer div {
width:33%;
float:left;
}
</style>

结果

Inline-block

如果将 <div> 元素的 display 属性从 block 更改为 inline-block,则 <div> 元素将不再在前后添加换行符,并且将并排显示,而不是彼此叠放。

示例
如何使用 display: inline-block 将 div 元素并排对齐:

<style>
div {
width: 30%;
display: inline-block;
}
</style>

Flex

引入了 CSS Flexbox 布局模块,以便更轻松地设计灵活的响应式布局结构,而无需使用浮动或定位。

要使 CSS flex 方法起作用,请用另一个 <div> 元素包围 <div> 元素,并将其设置为 flex 容器。

示例
如何使用 flex 将 div 元素并排对齐:

<style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width:33%;
}
</style>

网格

CSS 网格布局模块提供了一个基于网格的布局系统,具有行和列,使网页设计变得更加容易,而无需使用浮动和定位。

听起来与 flex 几乎相同,但可以定义多行并单独定位每行。

CSS 网格方法要求您用另一个 <div> 元素包围<div> 元素,并将其状态设置为网格容器,并且必须指定每列的宽度。示例
如何使用网格将 <div> 元素并排对齐:

<style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>

HTML class 属性

HTML class 属性用于为 HTML 元素指定类。

多个 HTML 元素可以共享同一个类。

使用 class 属性
class 属性通常用于指向样式表中的类名。JavaScript 也可以使用它来访问和操作具有特定类名的元素。

在以下示例中有三个 <div> 元素,其 class 属性的值为“city”。所有三个

元素将根据 head 部分中的 .city 样式定义进行同等样式设置:

示例

<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>

<div class="city">
<h2>伦敦</h2>
<p>伦敦是英国的首都。</p>
</div>

<div class="city">
<h2>巴黎</h2>
<p>巴黎是法国的首都。</p>
</div>

<div class="city">
<h2>东京</h2>
<p>东京是日本的首都。</p>
</div>

</body>
</html>

在下面的例子中有两个 <span> 元素,它们的 class 属性值为“note”。根据 head 部分中的 .note 样式定义,这两个 <span> 元素的样式将相同:

示例

<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>

<h1>我的<span class="note">重要</span>标题</h1>
<p>这是一些<span class="note">重要</span>文本。</p>

</body>
</html>

提示:类属性可用于任何 HTML 元素。

注意:类名区分大小写!

类的语法

要创建一个类;写一个句点 (.) 字符,后跟一个类名。然后,在花括号 {} 内定义 CSS 属性:

示例
创建一个名为“city”的类:

<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">伦敦</h2>
<p>伦敦是英国的首都。</p>

<h2 class="city">巴黎</h2>
<p>巴黎是法国的首都。</p>

<h2 class="city">东京</h2>
<p>东京是日本的首都。</p>

</body>
</html>

多个类

HTML 元素可以属于多个类。

要定义多个类,请用空格分隔类名,例如 <div class="city main">。元素将根据指定的所有类进行样式设置。

在以下示例中,第一个 <h2> 元素既属于 city 类,也属于 main 类,并将从这两个类中获取 CSS 样式:

示例

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

不同元素可以共享同一类
不同的 HTML 元素可以指向同一类名。

在以下示例中,<h2><p> 都指向“city”类,并将共享同一样式:

示例

<h2 class="city">Paris</h2>
<p class="city">Paris 是法国的首都</p>

在 JavaScript 中使用 class 属性

JavaScript 还可以使用类名来为特定元素执行某些任务。

JavaScript 可以使用 getElementsByClassName() 方法访问具有特定类名的元素:

示例
单击按钮隐藏所有具有类名“city”的元素:

<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>

总结

本文介绍了的html的css使用,如有问题欢迎私信和评论

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16132.html
标签
评论
发布的文章

无涯教程-HTML5 - MathML

2024-08-25 23:08:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!