Table of contents
1. The problem of element width
2. cale() , calculate the value
5. The problem of element height
5.1.1 Use css table layout instead of floating layout
5.1.2 Using flexbox to achieve equal height columns
5.1.3 Using min-height and max-height
5.1.4 Center content vertically
1. The problem of element width
When setting the width or height of an element, the width or height of the content is specified, and all padding, borders, and margins are appended to this width.
2. cale() , calculate the value
.column-wrap .container{
width: 100%;
}
.column-wrap .container main{
padding: 20px;
width: 70%;
border-radius: 0.5em;
background-color: #890;
float: left;
}
.column-wrap .container sidebar{
padding: 20px;
margin-left: 1.5em;
width: calc(30% - 1.5em);
border-radius: 0.5em;
background-color: #890;
float: left;
}
<div class="column-wrap">
<h2>实现等高列</h2>
<div>
<header>Franklin Running Club</header>
<div class="container">
<main>
<h3>Welcome Join Us</h3>
<p>你好，欢迎加入我们！</p>
</main>
<sidebar>
这里是侧边栏
</sidebar>
</div>
</div>
</div>Effect:
3. Adjust the box model
The behavior of the box model can be adjusted in CSS using the box-sizing property.
The default value of box-sizing is content-box, which means that any specified width or height will only set the size of the content box.
After box-sizing is set to border-box, the height and width attributes will set the sum of the content, padding and border size
4. Set border-box globally
All elements on the page are selected with the universal selector (*), and all pseudo-elements of the page are selected with two selectors. Put this code at the beginning of your stylesheet.
*,
::before,
::after{
box-sizing:border-box;
}
More optimized code:
Box models are usually not inherited, but use the inherit keyword to force inheritance
As shown in the following code, the top-level container of the third-party component can be selected to restore it to content-box if necessary. The inner elements of this component will inherit the box model.
5. The problem of element height
Normal document flow is designed for limited width and unlimited height.
When explicitly setting the height of an element, the content may overflow the container.
The behavior of overflowing content can be controlled with the overflow property , which supports the following 4 values.
❑ visible (default) – all content is visible, even if overflowing the edge of the container.
❑ hidden—Content that overflows the container's padding edge is clipped and cannot be seen.
❑ scroll—A scroll bar appears on the container, and the user can scroll to view the remaining content. On some operating systems, both horizontal and vertical scroll bars appear even though all content is visible (not overflowing). In this case, however, the scrollbar is not scrollable (grayed out).
❑ auto—The container will only scroll when the content overflows.
Specify height as a percentage: You must explicitly define a height for the parent element.
There is a problem with specifying the height with a percentage. Percentages refer to the size of the element's container block, but the height of the container is usually determined by the height of the child elements. This would cause an infinite loop, which the browser can't handle, so it ignores the declaration.
For percentage heights to work, an explicit height must be defined for the parent element.
5.1 Contour columns
Your best bet is to let them determine their own height, and then expand the shorter columns to equal the height of the taller columns.
5.1.1 Use css table layout instead of floating layout
.column-wrap .container{
width: 100%;
display: table;
}
.column-wrap .container main{
padding: 20px;
width: 70%;
border-radius: 0.5em;
background-color: #890;
display:table-cell;
}
.column-wrap .container sidebar{
padding: 20px;
margin-left:1.5em;(display:table-cell,外边距不生效)
width: 30%;
border-radius: 0.5em;
background-color: #890;
display:table-cell;
}
As you can see in the picture above, the outer margin does not affect the table-cell element, so how to make the interval take effect?
5.1.2 Using flexbox to achieve equal height columns
Set display: flex to the container, it becomes a flex container, and the sub-elements are equal in height by default
.container{
display:flex;
}
.main{
padding: 1.5em;
width: 70%;
border-radius: 0.5em;
}
.sidebar{
width:30%
margin-left: 1.5em;
padding: 1.5em;
border-radius: 0.5em;
}5.1.3 Using min-height and max-height
min-height and max-height. Instead of explicitly defining a height, you can use these two properties to specify a minimum or maximum value, so that the element automatically determines its height within those bounds.
5.1.4 Center content vertically
The vertical-align declaration only affects inline elements or table-cell elements . For inline elements, it controls the alignment of the element with other elements in the same line. For example, you can use it to control the alignment of images in a row with adjacent text.
Vertical Centering Guide
The best way to center content in a container is to consider different factors depending on the specific scenario. Before making a judgment, ask yourself the following questions one by one until you find a suitable solution.
❑ Can a natural height container be used? Add equal padding to the top and bottom of the container to center the content.
❑ Does the container need to specify a height or avoid padding? Use display: table-cell and vertical-align: middle for the container.
❑ Can I use Flexbox? If you don't need to support IE9, you can use Flexbox to center the content.
❑ Is the content inside the container just one line of text? Set a large row height equal to the ideal container height. This will expand the height of the container to accommodate the row height. If the content is not an inline element, it can be set to inline-block.
❑ Are the heights of both the container and the content known? Position the content absolutely. (This is only recommended if none of the previously mentioned methods work.)
❑ Don't know the height of inner elements? Combine transform with absolute positioning. (Again, this method is only recommended if none of the above mentioned methods work.) If you are not sure, refer to the howtocenterincss website. This website is great, you can fill in a few options according to your own scene, and then it will generate the vertically centered code accordingly.