Learn more about the differences between CSS easy-to-confuse attributes and values

CSS has a lot of properties, and each property has a lot of values, and there are thousands of combinations. The combination of different attributes can also produce different styles, CSS is really a beautiful style design language. Here's a summary of the common confusing attributes and values in your work:

1. Line-height (row height) with units and non-unit difference:

We know that row heights can be inherited. When the row height value of the parent element is not in the unit, the child element uses its own font size and calculates the travel height (the child element's Row height = the value of the line-height in the parent element * The font size of the child element). When the parent element's row height values are in units, the parent element first calculates the travel height based on its own font size (absolute unit px, without calculation), allowing child elements to inherit (the row height of the child element = The row height of the parent element).

(1). When the parent element's Row height value has units:

<p>    <p> When Harold was standing in front of a zebra crossing and pressed the pedestrian button--if she had been (Maureen, Harold's wife) doing what Harold was supposed to do, then--"Who am I?" "He just walked through the post office and didn't even stop. Originally a short way because of the inner call can no longer stop the pace. </p>    <p> I remember a lot of things along the journey, many of which I did not realize that I had forgotten memories, David's, and you and me. I remember my mother, some memories are not easy, but most are very beautiful. I am afraid, I am afraid that one day, perhaps soon, I will lose them, this time will never be back. "Harold's Tears .</p></p>

Body {background-color: #efefef;} p {    font-size:12px;    Line-height:1.5em;} p {font-size:22px;}

As above: When the parent element has a font size of 12px, the row height is 1.5em, and the child element has a font size of 22px, the display looks as follows:

In the above example, the row height of P is 18px because it inherits the row height of the parent element p 1.5em = 1.5 = 18px; The size of your own font is 22px, so there is the effect of squeezing it. In addition, the height of the text is not directly related to Font-size, but the width of the text is the same as the value of font-size.

(2). When the parent element's row height value does not have a unit:

<p>    <p> Do you think walking is the simplest thing in the world? Just put one foot in front of the other. But I've always wondered how difficult it was to actually do things that were inherently instinctive. And eat, eat is the same. Talk too. and love. These things can be difficult. </p>    <p> We all thought Harold was on foot because he had a romantic history with Queenie many years ago. But that's not true. Harold took the road because Queenie saved him, and he never said a word of thanks. </p></p>

Body {background-color: #efefef;} p {    font-size:12px;    line-height:1.5;} p {font-size:22px;}

As above: When the parent element has a font size of 12px, the row height is 1.5, and the child element has a font size of 22px, the display looks like this:

In the above example, the row height of P is 33px, because it inherits the parent element P's Row height 1.5, and its own font size is 22px, so its own row high value is * 1.5 = 33px, there will be no squeezing effect in the first case.

2. Display (show mode) value is the use environment and the difference of Inline-block,table,flex:

(1). Display:inline-block;

When an element is displayed in the form of display:block; , the width is undefined and the width is defined as: width:100%; or Width:auto; The effect is the same because the block-level element inherits the width value of the parent element, defining its own width as a value of 100% (that is, the same width as the parent element). However, we do not sometimes need a width of 100% in the actual project, but want to set the element's width, height (or padding) and other properties. At this point need to use display:inline-block;

The DOM is as follows:

<p class= "text" >    


. text > P {    margin-top:1.2rem;    Text-align:center;}. Text A.look-details {    display:inline-block;    padding:. 5rem 1rem;    Font-size:. 8rem;    Color: #fff;    Background-color: #e04728;}

For the above view details link, defined for display:inline-block; You can not set the width and height, by setting the padding to achieve their own desired height and width of the idea. The display results are as follows:


Also, set the text-align:center for its parent element; Can achieve the goal of horizontal centering.

Set the element to Display:inline-block; both contain display:block; also contains display:inline; effect, you can set its height, you can center it, and you can avoid a width of 100%.

Extended:

parent element Text-align:center; child element Display:inline-block; Typically used for pagination effects such as a news list page.


<ul class= "pagination" >    <!--current page, add active Class--    <li><a href= "#" aria-label= "to Li Previous ">&laquo;</a></li>    <li class=" active "><a href=" # ">1</a></li >    <li><a href= "#" >2</a></li>    <li><a href= "#" >3</a></li >    <li><a href= "#" >4</a></li>    <li><a href= "#" >5</a></li >    <li><a href= "#" aria-label= "Next" >&raquo;</a></li></ul>


. pagination {Display:inline-block; Text-align:center;}.    pagination:before,.pagination:after {display:table; Content: "";}. Pagination:after {clear:both;}.    pagination {display:inline-block; Text-align:center;}.    Pagination > li {float:left; Display:inline-block;}.    Pagination > li > a {display:block; Margin-left: -1px;    /* Eliminate the double left margin when two A is together */padding:6px 12px;    Color: #337ab7;    Text-decoration:none;    Background-color: #fff; border:1px solid #ddd;}.    Pagination > Li:first-child > a {margin-left:0;/* First A does not need to eliminate the left margin */border-top-left-radius:4px; border-bottom-left-radius:4px;}.    Pagination > Li:last-child > a {border-top-right-radius:4px; border-bottom-right-radius:4px;}.    Pagination > li > A:hover,.pagination > li > A:focus {z-index:2;    Color: #23527c;    Background-color: #eee; Border-color: #ddd;}. Pagination >. active > A,.pagination >. active > A:hoVer,.pagination >. active > A:focus {z-index:3;    Color: #fff; Cursor:default;    /* Current page, let the mouse hover on a element, display as the default cursor style, give people feel can't click Effect */background-color: #337ab7; Border-color: #337ab7;}


(2). display:table;

In the first case of expansion, display:table has been used; Use display:table; This element is displayed as a block-level table (similar to <table>) with a newline character before and after the table.

Often used in the need to clear floating. One element needs to clear the float because it does not define its height, and the child element floats.

As in the extension above, Ul.pagenation does not define a height, and the child element floats, so it needs to clear the float. The way to clear floats is as follows:


. parent-box:before,.parent-box:after {    display:table;    Content: ""; /* The Content property must be added in the pseudo-element before and after styles to function */}.parent-box:after {clear:both;}

This clears the float in a way that IE8 does not support. If you need to support IE6-IE8, you need to use this more complex style (which is not understood at the moment):


. clearfix::after {    clear:both;    Display:block;    Content: "";    height:0;    line-height:0;    Visibility:hidden;}. Clearfix {zoom:1;}

(3). Display:flex;

In 2009, the website proposed a new solution----flex layout that enables easy, complete, responsive implementation of various page layouts. Currently, it has been supported by all browsers, which means that this feature is now safe to use.


A lot of content, but we usually use the three attributes, Display:flex; Align-items:center; Justify-content:center; These three attributes are used in the parent element, Display:flex; Defines the layout of the child elements as an elastic scaling layout, align-items:center; Centers the child elements vertically, justify-content:center; Centers the child elements horizontally.