cc蓝旭第三周——CSS进阶（盒子模型、浮动、定位、伪类、伪元素）

盒子模型指的是网页中一个元素被看做一个矩形的盒子，这个盒子由四部分组成：内容区域、内边距（padding）、边框（border）和外边距（margin）。CSS中的盒子模型主要用来控制元素在页面中的布局和样式。其中，内容区域是元素呈现内容的区域，内边距是内容与边框之间的空白区域，边框是围绕内容和内边距的一条线，外边距是边框与相邻元素之间的空白区域。
盒子模型的大小可以通过设置元素的宽度和高度属性来控制。同时，也可以通过设置内边距和边框的大小来调整盒子模型的大小。

<head>
    <style>
      div {
        width: 200px;
        height: 200px;
        border: 10px solid black;
        padding: 20px;
        margin: 50px;
      }
    </style>
  </head>
  <body>
    <div>这是一个盒子</div>
  </body>

盒子模型的组成部分

内容区域

内容区域是指HTML元素的实际内容，例如文本或图像等。内容区域的大小由元素的width和height属性确定。

内边距

内边距是指元素内容与边框之间的空间，用padding属性设置。内边距的大小会影响元素的实际大小。

边框

边框是指围绕元素内容和内边距的线条，用border属性设置。边框的大小、样式和颜色都可以被控制。

外边距

外边距是指元素边框和相邻元素之间的空间，用margin属性设置。外边距可以用来调整元素之间的距离，也可以用来居中元素。

盒子模型的表示方式

在CSS中，盒子模型有两种不同的表示方式：标准盒子模型和IE盒子模型。

标准盒子模型

标准盒子模型的宽度和高度属性仅仅包含内容区域的大小。也就是说，设置一个元素的width和height属性时，只会影响到元素的内容区域大小，不会影响到元素内边距、边框和外边距的大小。

我们设置了一个div元素的宽度为200像素和高度为100像素：

<div style="width: 200px; height: 100px; border: 1px solid black; padding: 10px; margin: 20px;">
  <p>This is some text inside the div element.</p>
</div>

元素的实际大小为：

内容区域的宽度为180像素（200 - 2*10）
内容区域的高度为80像素（100 - 2*10）
整个元素的宽度为220像素（180 + 210 + 21）
整个元素的高度为120像素（80 + 210 + 21）

IE盒子模型

IE盒子模型的宽度和高度属性则包含了内容区域、内边距和边框的大小。也就是说，在IE盒子模型中设置一个元素的width和height属性时，会影响到元素的内容区域、内边距、边框和外边距的大小。

我们设置了一个div元素的宽度为200像素和高度为100像素：

<div style="width: 200px; height: 100px; border: 1px solid black; padding: 10px; margin: 20px; box-sizing: border-box;">
  <p>This is some text inside the div element.</p>
</div>

在设置了box-sizing: border-box;后，元素的实际大小为：

内容区域的宽度为200像素（200 - 210 - 21）
内容区域的高度为100像素（100 - 210 - 21）
整个元素的宽度为240像素（200 + 210 + 21 + 2*20）
整个元素的高度为140像素（100 + 210 + 21 + 2*20）

盒子模型的应用

盒子模型是CSS中非常重要的概念。通过合理地设置元素的width、height、padding、border和margin等属性，我们可以实现各种复杂的布局效果。

设置元素的大小

我们可以使用width和height属性来设置元素的大小

div {
  width: 200px;
  height: 100px;
}

设置元素的内边距

我们可以使用padding属性来设置元素的内边距，我们将元素的上下左右内边距都设置为10像素。

div {
  padding: 10px;
}

设置元素的边框

我们可以使用border属性来设置元素的边框，将元素的边框样式设置为实线（solid），粗细设置为1像素，颜色设置为黑色。

div {
  border: 1px solid black;
}

设置元素的外边距

我们可以使用margin属性来设置元素的外边距，将元素的上下左右外边距都设置为20像素。

div {
  margin: 20px;
}

使用盒子模型进行布局

通过合理地使用盒子模型的各个属性，我们可以实现各种复杂的布局效果。

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.box {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  margin: 10px;
}

使用了flex布局，通过设置.container的display、justify-content和align-items属性，将三个box元素垂直居中，并且让它们之间的距离相等。

同时，在.box元素上设置了width、height、border和margin属性，使得每个元素都有一个相同的大小和边框样式。

CSS中的盒子模型是HTML元素大小和位置的基本概念，由内容区域、内边距、边框和外边距四个部分组成。
盒子模型有两种表示方式：标准盒子模型和IE盒子模型。通过合理地使用盒子模型的各个属性，我们可以实现各种复杂的布局效果。

浮动

CSS浮动是指在一个文档流中，将元素从其正常位置移出并向左或右方向漂浮。浮动元素可以使其他内容环绕它，从而实现多列布局、图形环绕文字等效果。在网页设计中，浮动元素被广泛应用于网页布局设计，因为它不仅能够使页面排版更加美观，还能够提高页面加载速度，增强用户体验。

在CSS中，浮动元素有三种状态：左浮动、右浮动和不浮动。

当我们将元素设置为左浮动时，它将移动到其父级容器的左侧，并向右对齐。
如果我们将元素设置为右浮动，它将移动到其父级容器的右侧，并向左对齐。
当我们将元素设置为不浮动时，它将恢复到其正常位置，并占据整行空间。

实现多列布局

使用浮动可以实现多列布局。我们可以将一个容器分成多个列，每个列中的内容都可以通过浮动来实现。

以下代码片段可以创建一个包含三列的布局：

<style>
    .column {
        width: 30%;
        float: left;
        margin-right: 5%;
    }
    .last-column {
        margin-right: 0;
    }
</style>

<div class="column">
    <p>Column 1 content here</p>
</div>
<div class="column">
    <p>Column 2 content here</p>
</div>
<div class="column last-column">
    <p>Column 3 content here</p>
</div>

在这个例子中，我们使用了float: left属性使三个列浮动到左侧。此外，我们还用width属性指定每个列的宽度，并使用margin-right属性来添加间距。为了避免最后一列出现间距，我们还使用.last-column类来指定最后一列的margin-right属性为0。

图片环绕文字

使用浮动也可以实现图片环绕文字的效果。在这种情况下，我们可以将图片浮动到左侧或右侧，并让文本围绕着它流动。

以下代码片段可以创建一个包含图片和文本的布局：

<style>
    .image {
        float: left;
        margin-right: 10px;
    }
</style>

<div class="image">
    <img src="example.jpg" alt="Example image">
</div>
<div class="text">
    <p>Here is some text that will flow around the image. Here is some text that will flow around the image. Here is some text that will flow around the image.</p>
</div>

在这个例子中，我们使用float: left属性将图片浮动到左侧，并使用margin-right属性来添加间距。然后，我们将文本包装在一个<div>元素中，并将其放置在图片的右侧。由于图片浮动到了左侧，所以文本就会围绕着它流动。

需要注意的是，为了避免图片漂移到页面的其他部分，我们应该在图片上方或下方添加清除浮动的元素。例如：

<div style="clear: both;"></div>

实现响应式布局

使用浮动还可以实现响应式布局。在移动端设备上，我们可以将元素设置为不浮动，以便它们能够占据整行空间。而在桌面端设备上，我们可以将元素设置为浮动，以便它们能够排列在一行中。

<style>
    .box {
        width: 100%;
        margin-bottom: 20px;
    }
    .box img {
        max-width: 100%;
        height: auto;
    }
    @media screen and (min-width: 768px) {
        .box {
            width: 30%;
            float: left;
            margin-right: 5%;
        }
        .last-box {
            margin-right: 0;
        }
    }
</style>

<div class="box">
    <img src="example1.jpg" alt="Example image 1">
    <p>Example text 1</p>
</div>
<div class="box">
    <img src="example2.jpg" alt="Example image 2">
    <p>Example text 2</p>
</div>
<div class="box last-box">
    <img src="example3.jpg" alt="Example image 3">
    <p>Example text 3</p>
</div>

我们首先将.box类的宽度设置为100%。此外，我们还使用max-width和height属性来确保图片可以自适应大小。然后，在桌面端设备上，我们使用@media查询来将.box类的宽度设置为30%，并使用浮动使它们排列在一行中。我们还使用margin-right属性来添加间距，并使用.last-box类来指定最后一个盒子的margin-right属性为0。

CSS浮动是一种很有用的布局技术，可以使网页排版更加美观、多样化。通过浮动，我们可以实现多列布局、图片环绕文字、响应式布局等各种效果。需要注意的是，使用浮动时，我们应该合理地设置样式，并注意元素之间的间距和清除浮动。

定位

CSS 中有三种主要类型的定位：静态定位、相对定位和绝对定位。

静态定位

静态定位是元素默认的定位方式。通过设置“position: static”属性，将元素定位为静态定位。在这种情况下，元素在文档流中的位置由浏览器自动处理和计算。也就是说，元素会按照它们在 HTML 文档中出现的顺序进行布局。因此，当一个元素被定义为静态定位时，top、right、bottom 和 left 属性不能用于调整其位置。

div {
  position: static;
}

相对定位

相对定位允许根据元素当前在文档流中的位置调整其位置。通过设置“position: relative”属性，将元素定位为相对定位。在这种情况下，元素相对于其原始位置调整其位置。

div {
  position: relative;
  top: 50px;
}

绝对定位

绝对定位将元素从文档流中移除，并相对于其最近的已定位父元素进行定位。如果没有已定位的父元素，则相对于文档主体进行定位。通过设置“position: absolute”属性，将元素定位为绝对定位。在这种情况下，可以使用 top、right、bottom 和 left 属性来调整元素的位置。

div {
  position: absolute;
  top: 0;
  right: 0;
}

伪类

伪类是一种用于选择器的关键字，可以在某些特殊情况下为选择的元素添加样式。伪类可以用于选择普通元素的某种状态或属性值，例如鼠标悬停、访问过的链接或目标元素等。

:hover

当用户将鼠标悬停在元素上时触发该伪类。通过使用:hover，可以为链接、按钮或其他 HTML 元素添加交互效果。

a:hover {
  color: red;
}

:active

当用户点击元素并保持其处于“活动”状态时，触发该伪类。例如，当用户在按钮上单击并按住鼠标按钮时，按钮可能会显示为 “按下” 状态。

button:active {
  background-color: gray;
}

:focus

当元素获得焦点（例如，用户在元素上单击或使用 Tab 键进行导航）时，触发该伪类。:focus 可以用于调整输入字段、表单元素或其他可接受键盘输入的 HTML 元素的外观和行为。

input:focus {
  border: 2px solid blue;
}

:visited

当用户访问过链接时，触发该伪类。通过使用 :visited，可以为用户访问过的链接添加样式，从而提高网站的可用性和用户体验。

a:visited {
  color: purple;
}

:nth-child()

选择一个元素的父元素的第 n 个子元素，并对其应用样式。这个伪类可以很方便地实现隔行变色等效果。

li:nth-child(even) {
  background-color: #f2f2f2;
}

:not()

选择不符合指定选择器的元素，并对其应用样式。这个伪类可以很方便地排除某些元素，而无需为它们单独定义样式。

p:not(.intro) {
  font-weight: bold;
}

伪类的语法规则和注意事项

伪类的语法规则与普通选择器相似，通常以标签名、类名、ID 或其他属性值作为基础选择器，并在后面添加冒号和伪类名称。如果有多个伪类，则使用逗号分隔。

a:hover, a:active {
  color: red;
}

不同的伪类有不同的兼容性和使用限制。例如，某些伪类（如 :active 和 :focus）只在用户进行交互时生效，而其他伪类（如 :first-child 和 :last-child）则仅适用于特定的 HTML 结构。

伪元素

伪元素是一种与选择器相关的虚拟元素，允许在文档中插入内容，并将其与常规页面内容分开呈现。它们通常用于向元素添加视觉或语义化的效果，或者为元素的子元素创建特殊样式。

::before

在目标元素之前插入内容。此伪元素通常用于向元素添加装饰性效果或标记。

p::before {
  content: ">> ";
}

::after

在目标元素之后插入内容。与 ::before 相同，此伪元素通常用于向元素添加视觉效果或标记。

p::after {
  content: " <<";
}

::first-letter

选择第一个字母，并将其应用不同的样式。这个伪元素经常用于美化文章或帖子的开头。

p::first-letter {
  font-size: 150%;
  color: red;
}

::first-line

选择第一行，并将其应用不同的样式。这个伪元素可以用于控制文本段落或标题的样式。

p::first-line {
  font-weight: bold;
}

伪元素的语法规则和注意事项

伪元素的语法规则与伪类类似，但它需要使用双冒号（::）符号来区分。可以使用基础选择器（如标签名、类名、ID 或其他属性值）来选择目标元素，并在其后添加双冒号和伪元素名称。

p::before {
  content: ">> ";
}

伪元素只能用于某些特定的元素和样式属性。

::before ::after 只能用于具有 content 属性的元素， ::first-letter ::first-line 只能用于文本类元素。

本周预习内容暂时到这有机会继续补充

听课补充：

圆形：boder-radius 50%；

伪类分为静态伪类和动态伪类其中静态伪类中的:link和:visited智能用于超链接

而动态伪类则对所有标签都适用······

再就是在看学长姐包括同学的博客的时候有学习到很多

比如其实完全可以把一个知识点的大总结直接用表格的形式或者说超链接的形式放上

这样也是便于自己之后的复习

排版上来说确实表格更加舒适但是第四周的博客已经写完了55 第五周开始更正

孙于程

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
cc蓝旭第三周——CSS进阶（盒子模型、浮动、定位、伪类、伪元素）

cc蓝旭第三周——CSS进阶（盒子模型、浮动、定位、伪类、伪元素）
复制链接

扫一扫