文章目录
- 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”。所有三个
示例
<!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使用，如有问题欢迎私信和评论
