Css notes (II)-several common modes

Vertical text Center

For line elements, the height will automatically contract to the height of the wrapped text, so this problem does not exist. If the height attribute is set for block, inline-block, and other box elements, the text is displayed above by default. If you want to center text vertically, you can set the line-height attribute to be equal to or greater than the height attribute.

    hello world

div {    height: 200px;    line-height: 200px;}

The text is horizontally centered and icons are displayed on both sides of the text.

The result is a small arrow on the left, a small arrow on the right, and the date is displayed in the middle.

<May 11, 2014>

#wrapper{    text-align: center;    position: relative;    width: 200px;}#wrapper > span:first-child{    float: left;}#wrapper > span:last-child{    float: right;}

If you set the width of two float elements (for example, to increase the click area), the width should be set to the same, otherwise the effect of horizontal center of the date will be damaged.

Set width for the float Element

In general, the line elements (such as span) will automatically contract to adapt to the text width. Setting the width attribute for it is invalid. However, when the span element is float, you can set the width attribute for it.

How big a box is

For block elements, such as block and inline-block, if its width is not set, the width of the parent container is automatically extended. In this case, setting the padding and border will not change the box size (or the same width as the parent container), but will narrow down the content width.

    abc

#parent {    widht: 200px;}#son {    padding: 1px;    border: 1px solid black;}

Son's width is automatically extended to 200px. Since padding and border occupy 4 PX, the content area is 196px.

If the son width is set, the actual width is set to the content width. After adding border and padding, the actual width will exceed the parent container.

#son {    width: 200px;    padding: 1px;    border: 1px solid black;}

The content width is 200px, and the border and padding are 4px. The box width is 204px.

However, if you set box-sizing to border-box, the width is changed to the width of the entire box. Then, you can set border and padding to reduce the content width.

#son {    box-sizing: border-box;    width: 200px;    padding: 1px;    border: 1px solid black;}

In practice, it is nice to set box-sizing to border-box globally. In this way, when setting padding and border, you don't have to worry about changing the box width.

Horizontal emission li

 
 
    
  
  
1
    
  
  
2
    
  
  
3
    
  
  
4
    
  
  
5
 
 

ul{    font-size: 0;}li{    font-size: 1rem;    display: inline-block;    width: 20%;}

One trick here is to set ul's font-size to 0, becauseAnd

There is a gap between the two. In most browsers, the gap is 1 px, and a row cannot accommodate five li resources. Therefore, the last li element will be dropped to the next row. Therefore, setting ul's font-size to 0 and restoring it in li can avoid this 1px problem. Most of the problems with horizontal layout using inline-block

Horizontal layout with fixed proportions of N columns

Similar to the above li Tile

div {    font-size: 0;}div > * {    display: inline-block;    font-size: 1rem;    vertical-align: top;}div > nav {    width: 30%;}div > div {    width: 50%;}div > aside {    width: 20%;}

Basically the same as the li tile mode, the difference is to set all sub-elements vertical-align: top. Otherwise, it seems that the height of each sub-element is not the same row. As you can see from dev tools, the three sub-elements are still in the same row, but they are not aligned in the vertical direction. Setting vertical-align can solve this problem.

Horizontal layout with fixed column width and fixed column width ratio

div {    display: -webkit-box;}div > nav {    width: 200px;}div > div {    -webkit-box-flex: 1;}div > aside {    -webkit-box-flex: 2;}

The advantage is that there is no 1px problem, and you do not need to set the child element to inline-block, which is very convenient. In addition, after the display: box is set, the child element will automatically become a height. This is convenient in some scenarios, but it is not applicable to other scenarios. Finally, the display: box is not supported well in the old browser, so this method is not as common as the old technique. However, as the browser becomes more standard, I don't think it's a problem.