Adjust css examples formatting (#26127)
This commit is contained in:
@@ -22,15 +22,15 @@ The `display` property specifies the type of box used for an HTML element. There
|
||||
|
||||
```css
|
||||
.myBox {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.myContainer {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.inlineList ul > li {
|
||||
display: inline;
|
||||
display: inline;
|
||||
}
|
||||
```
|
||||
|
||||
|
@@ -18,12 +18,12 @@ The `float` property can have one of the following values:
|
||||
`inherit` - The element inherits the float value of its parent
|
||||
In its simplest use, the `float` property can be used to wrap text around images.
|
||||
|
||||
#### Float in Picture:
|
||||
#### Float in Picture:
|
||||

|
||||
|
||||
```
|
||||
img {
|
||||
float: right;
|
||||
float: right;
|
||||
}
|
||||
```
|
||||
This example specifies that an image should float to the right in a page:
|
||||
@@ -31,14 +31,14 @@ This example specifies that an image should float to the right in a page:
|
||||

|
||||
```
|
||||
img {
|
||||
float: left;
|
||||
float: left;
|
||||
}
|
||||
```
|
||||
This example specifies that an image should float to the left in a page:
|
||||
|
||||
```
|
||||
img {
|
||||
float: none;
|
||||
float: none;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -64,7 +64,7 @@ When clearing floats, you should match the `clear` to the `float`. If an element
|
||||
Source: CSS-TRICS
|
||||
```
|
||||
div {
|
||||
clear: left;
|
||||
clear: left;
|
||||
}
|
||||
```
|
||||

|
||||
|
@@ -3,7 +3,7 @@ title: Grid Layout
|
||||
---
|
||||
## Grid Layout
|
||||
|
||||
CSS Grid Layout, simply known as Grid, is a layout scheme that is the newest and the most powerful in CSS. It is [supported by all major browsers](https://caniuse.com/#feat=css-grid) and provides a way to position items on the page and move them around.
|
||||
CSS Grid Layout, simply known as Grid, is a layout scheme that is the newest and the most powerful in CSS. It is [supported by all major browsers](https://caniuse.com/#feat=css-grid) and provides a way to position items on the page and move them around.
|
||||
|
||||
It can automatically assign items to _areas_, size and resize them, take care of creating columns and rows based on a pattern you define, and doing all the calculations using the newly introduced `fr` unit.
|
||||
|
||||
@@ -20,7 +20,7 @@ It can automatically assign items to _areas_, size and resize them, take care of
|
||||
- Grid and Flex are not mutually exclusive. You can use both on the same project.
|
||||
|
||||
|
||||
### Checking browser compatability with `@supports`
|
||||
### Checking browser compatability with `@supports`
|
||||
|
||||
Ideally, when you build a site, you'd design it with Grid and use Flex as a fallback. You can find out if your browser supports Grid with the `@support` CSS rule (aka feature query). Here's an example:
|
||||
|
||||
@@ -41,7 +41,7 @@ Ideally, when you build a site, you'd design it with Grid and use Flex as a fall
|
||||
To make any element a grid, you need to assign its `display` property to `grid`, like so:
|
||||
|
||||
```css
|
||||
.conatiner {
|
||||
.container {
|
||||
display: grid;
|
||||
}
|
||||
```
|
||||
@@ -60,7 +60,7 @@ grid-template-rows: auto 300px;
|
||||
Areas
|
||||
|
||||
```css
|
||||
grid-template-areas:
|
||||
grid-template-areas:
|
||||
"a a a a"
|
||||
"b c d e"
|
||||
"b c d e"
|
||||
|
@@ -5,7 +5,7 @@ title: The Position Property
|
||||
|
||||
The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).
|
||||
The position property specifies the type of positioning method used for an element.
|
||||
The position proprty isn't generally used to create layouts, but instead it is used to position elements that somehow stand out from the page flow.
|
||||
The position property isn't generally used to create layouts, but instead it is used to position elements that somehow stand out from the page flow.
|
||||
|
||||
There are five different position values:
|
||||
|
||||
@@ -20,5 +20,3 @@ Elements are then positioned using the top, bottom, left, and right properties.
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
<a href="https://www.w3schools.com/css/css_positioning.asp" target="_blank">The is a good article</a> to read up to understand more about the position property.
|
||||
|
||||
|
||||
|
Reference in New Issue
Block a user