Adjust css examples formatting (#26127)

This commit is contained in:
David Way
2018-12-13 05:03:03 +00:00
committed by Tom
parent 18d5502965
commit 012e93154b
35 changed files with 303 additions and 326 deletions

View File

@@ -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;
}
```

View File

@@ -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:
![float image for print layout](https://github.com/jamal-pb95/guides/blob/master/assets/css3-float-print-layout.png "css-tricks-float-img")
```
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:
![Float image for web layout](https://github.com/jamal-pb95/guides/blob/master/assets/css3-float-web-text-wrap.png "float img web")
```
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;
}
```
![clear footer image](https://github.com/jamal-pb95/guides/blob/master/assets/clearedfooter.png "clear footer image")

View File

@@ -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"

View File

@@ -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.