"CSS Secret" - summed up 47 Css tricks (six): the structure and layout

Adaptive inner elements

If you do not give an element a height, it would be the height of its internal adaptation, but not for the width. So how can we make the width and width of the internal elements of the adaptive it?
Here it is necessary width: min-content reaches the following effects.

• This property is not used, the default width will be 100%
  
• Use width: Content-min , the parent element will width as the width of image pictures adaptively.
  
• html

<div class="adaptive-ele">
    <img src="https://img3.mukewang.com/szimg/5df8852609e0762d12000676-360-202.png" alt="Before"/>
    <div>我们需要做到让父元素能够自适应图片的宽度，而不会被文字撑开宽度。</div>
  </div>

• stylus

.adaptive-ele
  padding 5px
  text-align center
  border solid 1px #666
  width min-content

Precise control table column width

When we use the table to show the data, we hope to cell width is the width of the adaptive content of it? Or want a fixed column width?

• When adaptive content width may cause unexpected layout. Typically, for example, ant-deisgn-vue with a fixed width. So we need to use table-layout: fixed attribute.

Introduce table-layout.

• Fixed table layout Table-layout: Fixed
  - fixed table layout, the horizontal layout depends only on the width of the table, column widths, the width of the table border, cell spacing, regardless of the contents of the cell.
  - by using a fixed table layout, the table may display a user agent after receiving the first line.

• Automatic table layout Table-layout: Auto
  - Automatic layout table, the column width is the widest of the column cell content without setting off the line.
  - This algorithm is sometimes slow, because it needs to access all the content in the table before determining the final layout.

Take a look at the final two styles:

• html

  <table class="one" width="100%">  <!--自动表格布局-->
    <tr>
      <td width="20%">1000000000000000000000000000</td>
      <td width="40%">10000000</td>
      <td width="40%">100</td>
    </tr>
  </table>
  <br />
  <table class="two" width="100%">  <!--固定表格布局-->
    <tr>
      <td width="20%">1000000000000000000000000000</td>
      <td width="40%">10000000</td>
      <td width="40%">100</td>
    </tr>
  </table>

• stylus

// 自动表格布局
.one
  table-layout: automatic
  td
    border solid 1px #666

// 固定表格布局
.two
  table-layout: fixed
  td
    word-break: break-all
    border solid 1px #666

Set the style according to the number of siblings

When there is demand for such a scenario: the list of planned gradual increase in the number of plans, each additional a plan, a plan for each style will change, how to achieve it?

• For special scene only a list item, the obvious solution is: only-child, this pseudo-class selectors is designed for such situations.
  When the number is greater than the li element 1, only-child styles will not take effect.
  
  When li only one element, the style will be added
  

li:only-child
  color red

• When there are multiple elements, the hit list of all items
  

li:first-child:nth-last-child(7),
li:first-child:nth-last-child(7) ~ li
  color red

Full-scale background, fixed width content

.wrapper
	padding 10px calc(50% - 450px)

Vertical center

• Absolute positioning method

.main
	position absolute
	top 50%
	left 50%
	transform translate(-50%, -50%)

• flex layout method

.main
	display flex
	justify-content center // 主轴居中
	align-items center  // 交叉轴居中

PS: spindle axis intersecting the horizontal axis and the vertical axis are not fixed, but is determined to flex-direction. If the column is set to the vertical axis of the spindle.

Close to the bottom of the footer (Sticky Footer layout)

This chapter summarizes the content we now often called Sticky Footer , is a more common method.

• Refers to the content of the page does not fill the entire screen when there is a footer at the bottom, when the content is greater than the page length, the footer as the content is below the support without affecting the reading.
  

<div class="stickey">
    <div class="main">内容</div>
    <div class="footer">页脚</div>
  </div>

.stickey
  height 160px
  width 300px
  overflow auto
  .main
    min-height calc(100% - 60px)
  .footer
    height 60px