** Description: ** This program from Smart Ninja. Comes to challenge the group of Web Development 1 to propose the various solutions for the challenge and discuss what it is the one that is more correct on a Web Development Website.
## Tree different solutions:
1. Parent affects chid items
* Flex
* Display
2. Parent & Child
* Position
Other cool things to help you:
1. Justify-content: space-around;
2. Word-Wrap: break-word;
1. Parent affects chid items (code only on parent)
* Flex
(PARENT) header {
## display: flex; (use it always on the top of the other orders)
## flex-flow: row wrap; / flex-wrap: wrap;
}
1. Parent affects chid items (code only on parent)
* Flex
(PARENT) header {
## display: flex; (use it always on the top of the other orders)
Fallbacks
## display: block;
## display: inline-block;
## display: flow-root; - The old fix was to set overflow: auto on the container, so a class like this is often created and used on elements that contain floated elements
With display: flow-root on the container element, a new block formatting context is established for the element with flow layout formatting, and this fixes our overflowing issues much more elegantly.
https://www.digitalocean.com/community/tutorials/css-no-more-clearfix-flow-root
- Opera Mini and Internet Explorer 11 cannot handle display: flow-root;
HTML
<p class="ex_">HELLO WORLD!</p>
CSS
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;} - inline can be a block element (a,span,img)
}
2. Parent & Child
* Position
(PARENT) header {
position: relative; - move o conteúdo
}
(CHILD) header .container {
position: absolute; - tira da div da caixa em que se encontra e fica parent com a caixa mais próxima
}
** Description: ** HTML is made up of various elements that act as the building blocks of web pages. For the purpose of styling, elements are divided into two categories: block-level elements and inline elements.
** Description: ** A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). A block-level element always starts on a new line and takes up the full width of a page, from left to right. A block-level element can take up one line or multiple lines and has a line break before and after the element.
Examples of block-level elements:
-
- Theelement is usually used as a container for other HTML elements and to separate them for the rest. convém agrupar divs numa section para não criar espaços desnecessários e usar o line-height para entre alinahmento.
-
-
-
- ,
- ,
- ,
** Description: ** An inline element does not start on a new line and only takes up as much width as necessary. An inline element does not cause a line break (start on a new line) and does not take up the full width of a page, only the space bounded by its opening and closing tag.
This is an inline element inside a paragraph.
Examples of inline elements:
- - The element can be used as a container for HTML text. But essentially, it is used to style a certain text within a larger text element.
-
Solution: Padding -
Margin - ás vezes o margin faz com que o size da caixa e por isso tem de ser o paddding a resolver
Why you need to do this kind of Challenges?
Aren't you always searching for a question on the web for your problem? We need to start contributing to the ones who help us as well.
IN THE END _UPLOAD_SOLUTION: The solution will be uploaded on Stack_Overflow!
Try youself!
