框型号

CSS框类型就像具有以下属性的容器：

内容

本节包括主要内容，例如文本，图像和其他媒体。高度和宽度特征可以更改。

填充

填充区是内容区域和边框框之间的空间。它可以应用于所有侧面或特定的侧面，例如顶部，右，底部和左侧。

边界

边界区域围绕着填充物和内容，可以应用于所有侧面或特定的侧面，例如顶部，右，底部和左侧。

边缘

边缘区域是边框和盒子外边缘之间的空间。


<style>

div {

  width: 300px;

  height: 200px;

border: 2 pixels of solid black;

  padding: 10px;

  margin: 20px;

}

</style>

<html>

<body>

<div>

some content

</div>

</body>

</html>

在上一个示例中，包括真实内容的DIV元素的最内向层的宽度为300px，并且填充属性围绕着内容层，并在内容和边框之间提供10px空间。

边框特性围绕着填充层，并提供了2个PX的可见边框，边距属性是围绕完整元素的最外层。

内联与块

block - HTML块级元素在新线上开始，并占据其父元素的整个宽度。他们有能力在填充容器的整个宽度时利用宽度，高度和文本平均特性。

内联 - HTML内联元素始终从同一行开始，其宽度取决于其内容。大多数内联元素是介绍的。

块	内联
一个块级元素可以在儿童或后代具有内联元素和块元素	内联级别元素只能在儿童或后代具有内联元素。
CSS属性：显示：块	CSS属性：显示：内联

邮政绝对/亲戚

aboslute - 当元素被分配为“绝对”的位置值时，其位置是根据具有指定位置的最接近的祖先元素确定的（与相对于位置相对于位置的位置视口，“固定”元素就是这种情况）。

在没有任何此类祖先的情况下，将绝对定位的元素与文档主体有关，并将与页面一起滚动。

重要的是要注意，具有绝对定位的元素是从页面的正常流中取出的，并且可能与其他元素重叠。

相对 - 当元素分配一个“相对”的位置值时，它将根据其默认位置定位。如果指定了顶部，右，底部或左侧属性，则将相应地调整元素的位置，但是周围内容将不会受到影响以填补元素位移所产生的空间。

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

CSS结构类别

他们允许您根据其在层次结构中的位置来定位特定元素，例如第一个孩子，最后一个孩子或替代元素。以下是一些常见的例子：

：First -Child - 目标是其兄弟姐妹中首先出现的元素。
：nth -child（n） - 基于表达式的某个位置的元素。
：Last-Child - 目标是其兄弟姐妹中最后一个元素。
：nth-last-child（n） - 喜欢：nth-child，但从末尾开始计数。
：唯一的孩子 - 目标是其父元素的唯一子女。
：首个性 - 目标是特定类型的兄弟姐妹的第一个元素。
：nth-type（n） - 针对由表达式确定位置的特定类型的元素。
：最后类型 - 目标是特定类型的兄弟姐妹的最后一个元素。：nth-last-type（n） - 喜欢：nth type，但从末端开始计数。

CSS规格

这是一种方法，用于确定哪些CSS规则适用于HTML元素，当时有多个针对相同元素的规则。特异性是根据规则中使用的选择器类型以及规则中每个选择器的实例数来计算的。

CSS中的四种选择器：

键入选择器，
类选择器，
ID选择器，
属性选择器。

选择器按更高的特异性排名，类型选择器具有最低特异性，并且ID选择器具有最高。
！重要的关键字可以应用于覆盖特异性并迫使规则应用于元素，最好避免使用此关键字。

CSS响应疑问

它用于CSS中，将样式应用于不同的设备或屏幕尺寸。媒体查询允许Web开发人员为不同设备，分辨率和方向指定不同的CSS样式。

媒体查询包括媒体类型，例如屏幕，打印或语音，以及一个或多个表达式，以定义应应用样式的条件。例如，您可以使用媒体查询仅将样式应用于最大宽度为768像素的设备，也可以打印用于在纸上打印的样式。

@media (max-width: 768px) {
  body {
    background-color: blue;
  }
}

弯曲和网格

CSS网格和Flexbox是Web开发人员可以用来创建复杂且响应式Web布局的两个不同属性。

CSS网格是一个布局模块，可以通过在网页上创建行和列网格来工作。创建网格后，您可以通过指定应该使用哪些网格线和区域来放置内容。这使得CSS网格对于创建需要高度控制和复杂的布局确实有用，就像您在杂志或仪表板上可能看到的布局。

另一方面，

flexbox是一个布局模块，它通过创建可用于在网页上组织项目的容器来工作。我们可以使用Flexbox来告诉这些容器如何组织其中的项目，例如指定它们是连续布置还是连续布置的。这使得Flexbox对于创建需要更灵活和响应不同屏幕尺寸的布局确实有用，例如导航菜单或图像图库。

元标记

META标签提供了有关网页的信息，例如其描述，关键字，作者和字符编码。
Web浏览器可以使用此信息来显示有关该页面的信息，并可以帮助搜索引擎优化。

名称属性指定提供的元数据的类型，而内容属性包含实际的元数据内容。

charset属性指定网页的字符编码。

框型号