Little Boxes on the Browser
- Describe one thing you learned in class today.
The reason the using inline or internal CSS is frowned on is that is can override statements made in CSS and make it harder to debug.
2. What’s the difference between inline and inline-block?
Let’s go over block element first, so when we get to inline-block it makes a little more sense.
Block elements take up the whole space of the container/viewport, they are placed in. They will force content to the next line as it will always take up a whole line by itself. You can make it take up even more space since this attribute will allow you to apply a width and height to it.
Inline will occupy the space of the content inside of it. So if you were to write “run” inside a <p> then it would only take up the space needed to write “run”. When there is no more available space, it will wrap to the next line. You can add padding to margins to these items, but not width or height.
If you apply inline-block to your display, then you get the best of both worlds. You can treat the items as both inline and block with some distinctions. This element will no longer take up a whole line like block, but you can apply width and height as well as padding and margin if needed. Like regular inline though, this element will wrap if it needs more space.
3. How would you approach fixing browser-specific styling issues?
You can create a new CSS style sheet to eliminate those settings or add specifications at to top of your HTML documents so they will be voided out when this page is pulled up.
4. What are the different ways to visually hide content (and make it available only for screen readers)?
If we’re discussing specifically things like images, then the “alt” text should be added within any image within HTML so your screen reader will be able to apply the context of the image and details about what it is. You could also use aria tags for non image related items.
Most articles I read included information about including descriptive characteristics within both your HTML as well as CSS for interactive portions of your code. Such as descriptive lines in your attributes in HTML, by this I mean, in the “id” maybe “radio-button” and in your link for that radio button have a “for=’yes’”.
Some articles gave the option of simply hiding your content off screen; however; this can bring its own problems.
5. Describe BFC (Block Formatting Context) and how it works.
The short answer: BFC is the order in which block elements are rendered.
That is over simplifying things, but it is concise. Almost everything in CSS in generated inside some kind of block. When I first started reading and watching videos, I got confused since they kept talking about margins and spacing, but I wanted to know “what about the block part?” Really the blocking part, is more along the lines of film blocking, (most of the time no moving though for webpages). How do the elements within your page correspond to one another? Can they or do they overlay one another? There are ways this can change the the context for the format of the shapes of your content on that page.
I think this is the reason why so many people used float to express examples of what BFC was. You can allow elements to over lap, but still fully display their content when using float. BFC is still relatable with grid and flex as well since it it is still dealing with how elements are being displayed within the viewport.
Another way to think of BFC is a way to restrict the location of your content, to block it is as it were. I think Rachel Andrew has a wonderful discussion on this.
