Why does surf.fill not work after screen.blit?

Question

I'm new to Pygame, trying to figure out how it works to make some kind of pet project. I want to make some surfaces to make it easier to work with. I noticed that if I use surf.fill() after blit, it doesn't work, I only see a black screen background.

import pygame
import sys

pygame.init()
BLACK = (0, 0, 0)
WHITE = (255, 255, 255)

screen = pygame.display.set_mode((340, 340))
screen.fill(BLACK)

surf = pygame.Surface((100, 100))

screen.blit(surf, (10, 10))
surf.fill(color=WHITE)

while True:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            sys.exit()
    pygame.display.update()

If I swap them around, using fill first and then blit, I get my white surface on the black screen. I could leave it that way, but I feel like I need to use fill more in the future, and would like to figure out what the problem is, so I can fix it.

import pygame
import sys

pygame.init()
BLACK = (0, 0, 0)
WHITE = (255, 255, 255)

screen = pygame.display.set_mode((340, 340))
screen.fill(BLACK)

surf = pygame.Surface((100, 100))
surf.fill(color=WHITE)
screen.blit(surf, (10, 10))


while True:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            sys.exit()
    pygame.display.update()

I read the documentation from Pygame, but it doesn't focus on such issues at all, and I couldn't figure it out. Theoretically, the answer can be found in one of the hundreds of examples of pet projects on Pygame, but I'd like to find out in another way.

Answer 1

blit means "block image transfer" (also see Bit blit). It copies the bits from one image (surface) to the other. Of course, the image is copied in its current state and the operation cannot look into the future.
The display consists of pixels arranged in a grid. Drawing geometry or images is nothing more than permanently changing these pixels. When an image is transferred to the display, the pixels that the image contains at that moment are transferred.