Full directory

This series of articles, mainly around the CSS3 attributes, to achieve a variety of common effects, these effects are our actual combat development can often use the effect:

  1. CSS: Background and Borders
  2. CSS: Shape
  3. CSS: Visual Effects
  4. CSS: Font Typography
  5. CSS Reveals Practical Skills – User Experience [5]
  6. CSS: Structure and Layout
  7. CSS Revealed Combat Skills – Transitions and Animations [7]

preface

  1. Adaptive internal elements
  2. Precise control of table column width
  3. Styles are set based on the number of sibling elements
  4. Full background, fixed width content
  5. The footer attached to the bottom

One: adaptive internal elements

First, let’s look at the desired effect:

The basic HTML structure is as follows:

<div>
    <img src="./img/kobe3.png" alt=""> <p> Kobe Bryant, a great time, a great player, and a great group of fans </p> </div>Copy the code

If no style is set, it looks like this:

How can the text adapt to the width of the image? So that’s the crux of the question, how do you make an element adapt to an internal element? Instead of adapting to its parent element? The answer is width: min-content: indicates that the width of the element will be resolved to the width of the largest non-breakable element within it (e.g. the widest word, picture, or box element with a fixed width).

The code is as follows:

div { width: min-content; // Indicates that the width of the div is determined by the width of the largest internal non-breakable element}Copy the code

Since min-content is a CSS3 feature, some browsers may not support it, so we need a smooth fallback solution that provides a fixed max-width value

div {
    max-width: 300px;
    max-width: min-content;
}
div img{
    max-width: inherit;
}
Copy the code

Two: precise control table column width

We in the actual development process, especially the background management system, the use of tables will be very frequent, but for the control of the width of the table, may sometimes not achieve the effect we want, the reason may be that we are not very clear about the table related attributes, especially the table-layout: auto/fixed;

  1. Auto is the default value, indicating the content in the adaptive cell. In this case, the width is invalid.
  2. Fixed means evenly divided, that is, the width is evenly divided, of course, we can also set the width.

First, let’s look at the effect of Auto:

The code is as follows:

/ / HTML < table > < tr > < th > serial number < / th > < th > copy < / th > < 1 th class ="third"> Copywriter 2</th> <th> Operation </th> </tr> <tr> < TD >1</ TD > < TD > Kobe Bryant, a great time, a great player, and a great crowd of fans </ TD > < TD class="third"> kobe Bryant, a great era, a great player, and a group of great fans kobe Bryant, a great age and a great player, and a group of great fans kobe Bryant, a great era, a great player, and a great group of fans < / td > < td > < a href =""> Edit </a> </td> </tr>Copy the code
//css table{ width: 800px; border-collapse: collapse; width: 100px; // Setting the width does not take effect because the table-layout is auto. } table tr td, table tr th { border: 1px solid#ddd;
}
Copy the code

Then on the basis of the above, we add a table-layout to the table :fixed, the effect is as follows:

At this point, we see that some cells have more text. How can we hide it? In this case, we can use text-overflow:ellipsis, which should be matched with: overflow:hidden; white-space:nowrap; And a specified width to take effect. The code is as follows:

table{
    width: 800px;
    border-collapse: collapse;
    table-layout: fixed;
}
table tr td, table tr th {
    border: 1px solid #ddd;
}
table tr th:nth-child(3) {
    width: 100px; 
}
table tr td:nth-child(3) {
    width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
Copy the code

The final effect is as follows:

There is one detail to note: if we set the width of TD to 100px, the effect will not take effect. We must set the width of TH to 100px for the cell width to take effect.

This is because the table rendering, general is according to the style of the first line to render, the first line is th at this time, so th at this time is not set width, even if the td set the width, rendering the same column of other cells or according to th rendering, so here, we set the width of the td directly is invalid, Of course, you can also delete the th line, and then set the td width, this will work, because the first line is td

Three: set styles according to the number of sibling elements

In actual development, we also encounter situations where we need to set different styles depending on the number of sibling elements.

The HTML structure is as follows:

< ul > < li > < / li > < li > < / li > < li > < / li > / / there may be more or less < / ul >Copy the code
  1. Let’s take a look at only child
Li :only-child {// only-child}Copy the code
  1. :first-child:last-child
Li :first-chlid:last-chlid {// Indicates that the element is the first element and the last element, indicating that there is only one child element}Copy the code
  1. Here’s the idea:
Li :first-child:nth-last-child(4){// First child:nth-last-child(4){ }Copy the code

Well, at this point, we know how to determine the number of sibling elements in CSS.

  1. Next, we implement an effect that has four or more elements, with the first one green and the others red from the second
ul li {
    display: inline-block;
    width: 50px;
    height: 60px;
    background: green;
    margin: 10px;
}
ul li:first-child:nth-last-child(n + 4) ~ li{
    background: red;
}
Copy the code

The results are as follows:

  1. Further, specify the range. For 2 to 4 children, set the code to red as follows:
ul li {
    display: inline-block;
    width: 50px;
    height: 60px;
    background: green;
    margin: 10px;
}
ul li:first-child:nth-last-child(n + 2):nth-last-child(-n + 4) ~ li{
    background: red;
}
Copy the code

At this point, if the UL has 2 to 4 Li’s under it, our style will be applied, otherwise it won’t.

Four: full background, fixed width content

First, let’s look at the effect of one of the most common footers: the background spreads across the entire width and the content is centered

The above effect is what our title says: full background, fixed width content, usually encountered with this effect, our most direct solution may be: An external div is set as the background, and a div is nested inside to display the content, and then set the inner div to be centered. This is probably the way most people think about it, so what if you just use a layer of div to implement it? The code is as follows:

div {
    backgroud: # 333;padding: 10px; // Background-color: RGB (255,255,255); background-color: RGB (255,255); // At this point, we set the fixed width of the middle content area to 900px}Copy the code

Five: close to the bottom footer

First, the HTML structure is as follows:

Head 1 < header > < p > < / p > < p > head 2 < / p > < header > < main > content < / main > < footer > < p > tail 1 < / p > < p > tail 3 < / p > < footer >Copy the code

1. Fixed height footer

header {
    height: 60px;
    background: green;
}
main {
    min-height: calc(100% - 60px - 100px);
    background: #ddd;

}
footer {
    height:  100px;
    background: cornflowerblue;
}
Copy the code

2. The height is not fixed, and the footer of the height can be adjusted according to the content

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
header{
    background: green;
}
main {
    background: #ddd;
    flex: 1;
}
footer{
    background: cornflowerblue;
}
Copy the code