0x00 min-content Width Adaptive
CSS3 New Width Property value Width:min-content can set the container's width value to the largest non-breaking width in the container (widest word, picture, or box element with a fixed width)
figure{ width:min-content; Margin:auto; }0X01 sets the style according to the number of sibling elements
We know the pseudo-element selector: Only-child, in fact, it can be equivalent to: First-child:last-child, which is the first and the last, so logically it is unique. And: Last-child is also: Nth-last-child (1) shortcut to the wording.
So then consider a question, what does Li:first-chidl:nth-last-child (4) represent? The result is the first item in a list of exactly four list items _,ok, combined with the sibling selector ~ to hit each item after it, You can achieve a goal that hits every item in the list with exactly four items.
Li:first-child:nth-last-child (4), Li:first-child:nth-last-child (4) ~ li { background:red;}Combine SASS to simplify reuse
/* Define MIXER */@mixin N-items ($n) { &:first-child:nth-last-child (#{$n}), &:first-child:nth-last-child ( #{$n}) ~ &{ @content; }} /* Call */li { @include n-items (4) {/ * property and Value write here */ background:red; }}: Nth-child ()
The power of Nth-child () is that by accepting expressions in the form of an+b, it is natural to use the form of its variant nth-child (N+4), which will select all the child elements except for the first and third-most sub-elements.
UL Li:first-child:nth-last-child (N+4), UL li:first-child:nth-last-child (n+4) ~ li{/ * When the list contains at least four items, the hit includes all list items after the item */}Of course, more than that, nth-child () is completely dependent on your brain hole.
0x02 Calc
Sometimes, if you need to implement a layout with a background width full screen and a fixed content width, maybe we'll go to design the DOM structure like this
<footer> <p class= "wrapper" > </p></footer>
CSS Style:
footer{ background: #333;}. wrapper{ max-width:900px; Margin:1em Auto; height:200px;}After using the Calc () method, it doesn't have to be so troublesome, we only need three lines of code to achieve:
footer{ background: #333; Padding:1em Calc (50%-50px); }With Clac (), you can perform simple arithmetic operations in CSS, which makes the DOM structure very concise, without any redundancy, and, of course, the drawbacks are obvious, and the code here will only see the effect if the parent of the footer element exceeds the PX.
The percentage in calc () is parsed based on its parent
But, for the first time, we learned about the magical technique of CAcl (CSS3).
0X03 Vertical Center
Absolute location-based solutions
CSS has a very common phenomenon, the real solution often comes from the most unexpected place. For example, you can combine the Positon:absolute and Transform:translate () properties to achieve vertical centering
Because the percentage in the Translate () transformation function is based on the width and height of the element itself, the dependence on the fixed size can be completely lifted.
Example: DOM structure
<body> <p class= "main" >CSS code:
. main{ Position:absolute; left:50%; top:50%; Transform:translate (-50%,-50%);}However, this approach is also insufficient:
1. In some browsers, it may cause a blurry display because the element may be placed on a half pixel.
2. In the case where absolute positioning is not suitable for use. and the impact of absolute positioning on the overall layout is too strong.FlexBox-based Solutions
There is no doubt that this is the best solution for the present. And the modern browser's support for FlexBox has been quite high.
The use of Margin:auto for items based on the FlexBox container can be centered not only horizontally, but also vertically, even if no width is specified, because the element is assigned a width equal to max-content.
Another benefit of FlexBox is that text can also be centered vertically, adding align-items:center and justify-content:center to elements that use Display:flex.
. main{ Background:deeppink; width:50%; height:50%; Margin:auto; Display:flex; Align-items:center; Justify-content:center;}0X04 adheres to the bottom footer
Sometimes, we expect the height of the header and footer to be determined by its internal factors, and the height of the content block automatically shrinks and fills all available space. Again, it's easy to take advantage of FlexBox.
body { MIN-HEIGHT:100VH; Display:flex; Flex-flow:column; header{ /*heaer style*/ } . main{ flex:1; } footer{ /*footer style*/ }}We gave the body a MIN-HEIGHT:100VH height so that it would occupy at least the height of the viewport, and then give main a flex value greater than 0.
Question: What if the footer is fixed at the bottom of the screen? How do I fix a footer that doesn't overwrite the content area when the page scrolls to the end?
For this question, purely personal thoughts, you can add a p#_footer after footer.
The DOM structure at this point is as follows:
<body>For P#_footer, there is no need to add any content or style to it, only the height of it is equal to the height of footer, and with this, jQuery can be easily done.
$ (' #_footer '). Height ($ (' footer '). Height ())So, for the response layout can also not worry about, although a little bit hack, but also a perfect solution, bingo!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
