All of the content below comes from CSS World by Zhang Xinxu.

CSS World is a book about CSS. There is no knowledge of CSS3 in the book, but there are a lot of things that I didn’t know about or didn’t take seriously before. This is a broad-minded book, and I recommend it to anyone working on the front end.

Here are some of the novel but useful layout tips I’ve documented while reading this book.

max-width

  1. Max – series weight is very high, even beyond! Important. The following code p ends with a width of 150px
p {
  width: 200px ! important;
  max-width: 150px;
}
Copy the code
  1. whenmin-widthwithmax-widthWhen there is a conflict of size, the maximization principle is used, that is, who takes the value of who. The following code ends with a width of 1400px
.container {
  min-width: 1400px;
  max-width: 1200px;
}
Copy the code
  1. This is used when we have an element that grows in height, but we don’t know the height of the elementmax-heightThe way. We do not need to give a specific height value to achieve this effect. Of course, doing so will result in the element reaching its actual height but the animation is not over yet. There will be a sense of animation lag.
.element {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25 s;
}
.element.active {
  max-height: 666px; /* A sufficiently large maximum height value */
}
Copy the code

content attr

Alt is similar to IMG.

.icon:before {
  content: attr(data-title);
}
Copy the code

The padding and margin

We can use background-clip and padding to achieve this kind of effect. You don’t need any pictures.

.icon-menu {
  display: inline-block;
  width: 140px;
  height: 10px;
  padding: 35px 0;
  border-top: 10px solid;
  border-bottom: 10px solid;
  background-color: currentColor;
  background-clip: content-box;
}
Copy the code

margin-right
margin-right
flex
margin 

ul {
  margin-right: -20px;
}
ul > li {
  float: left;
  width: 100px;
  margin-right: 20px;
}
Copy the code

border

  1. Because the border set in IE6 is dotted with dots. So you can implement a circle in IE6 in this way.
.box {
  width: 150px;
  height: 150px;
  /* Out of area hidden, showing only a circle */
  overflow: hidden;
}
.dotted {
  width: 100%;
  height: 100%;
  border: 149px dotted #cd0000;
}
Copy the code

Note: Border is also the standard CSS top, right, bottom and left setting order. If you want a triangle in the top direction, set it to the opposite direction, and set all other directions to transparent.

div {
  width: 0;
  border: 10px solid;
  border-color: #f30 transparent transparent;
}
Copy the code

ex

Ex is an ignored unit of distance that represents the height of a lowercase letter x(x of x, y, z). Is a relative unit that is related to the size of the parent element.

.icon-arrow {
  display: inline-block;
  width: 20px;
  height: 1ex;
  background: url(xxx.png) no-repeat center;
}
Copy the code

vertical-align

Vertical-align can be used to realize horizontal and vertical centering. This positioning method does not need to know the width and height of centering elements, which is compatible with IE6

The following simulation is a full – screen dialog box. The core of the center method is the parent element’s text-aglin:center, and the sibling element that writes the center element is given display: inline-block; height: 100%; vertical-align: middle; Display: inline-block; vertical-align: middle;

<div id="container">
  <div id="dialog">.</div>// The element to be centered<div id="assist"></div>
</div>
Copy the code
#container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5), none;
  text-align: center;
  white-space: nowrap;
  font-size: 0;
  z-index: 99;
}
#dialog {
  display: inline-block;
  vertical-align: middle;
}
#assist {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
Copy the code

BFC

Previously known overflow: Hidden is a way to trigger BFC, in fact, the following can start BFC.

  • <html>The root element.
  • The value of float is not None;
  • The overflow value is auto, scroll, or hidden;
  • The display value is either table-cell, table-caption, or inline-block.
  • The value of position cannot be relative or static.

overflow

  1. Scrollbars are all the things that HTML produces so you don’t have to drag the body and set overflow: Hidden,

  2. The page is skewed to the left when loading very slowly because the scrollbar takes up the width of the body. The following code makes the body take up the width of the window. This avoids the problem of shifting the center element when the page loads slowly. (That’s rarely the case now that broadband has increased dramatically.)

html {
  overflow-y: scroll; /* for IE8 */
}
:root {
  overflow-y: auto;
  overflow-x: hidden;
}
:root body {
  position: absolute;
}
body {
  width: 100vw;
  overflow: hidden;
}
Copy the code

absolute

When I use absolute positioning, I always do it honestly. But absolute positioning without dependencies works better.

A dependency free layout that does not use the traditional method of determining the parent phase by child. Instead of using left and top control, use margin or transform to control position.

.icon-warn {
  position: absolute;
  margin-left: -20px;
  width: 20px;
  height: 20px;
  background: url(warn.png) no-repeat center;
}
Copy the code
  1. Absolute is centered horizontally with text-align.

<p > <img src="1.jpg" > </p > 
Copy the code
p {
  text-align: center;
}
img {
  position: absolute;
  margin-left: ...;
}
Copy the code

Although the image position in this example is affected by the text-align attribute, it is not directly related to the absolute element. The display calculation value of absolute element is blocky, so the text-align does not have any effect. The reason for the position change here is essentially the result of the joint action of “ghost blank node” and “absolute positioning without dependence”


“Ghost white space node” is a very important concept in the inline box model. Specifically, it refers to the fact that in HTML5 document declaration, all the parsing and rendering of inline elements behaves as if there were a “white space node” in front of each line box. This “blank node” is always transparent, does not take up any width, is invisible and cannot be accessed by script, is like a ghost, but is actually there and behaves like a text node, so I call it “ghost blank node”.


Of course we need to know the width of the inline element. Margin-left value with negative general width. Similar to position:relative for the parent element and left:50% for the position element. But there will be no hierarchy problem.





Overflow is not a positioning element, and there is no positioning element between the absolute positioning element and the overflow container. If, overflow cannot crop absolute elements.

According to the above. Absolute without dependencies is not clipped by parent overflow.

Note: Since transform supports overflow differently across browsers, try to find out if the element is being clipped because of transform


When an absolute location element is positioned in both relative directions, the element has fluid properties similar to document flow

.box {
position: absolute;
left: 0; right: 0;
}
Copy the code

An absolute location element can override the entire browser when it has the following Settings. Note that its width height is a “format width/height”, completely different from width:100%. Giving margins also does not appear off-screen.

.box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
Copy the code

Margin: Auto margin:auto Margin :auto right: 0; This property, which activates fluid properties, does not have this centered effect. Of course, you can’t use Margin: Auto Auto to achieve vertical horizontal center. After all, there is no such effect in standard document flow.

The following code

.element {
  width: 300px;
  height: 200px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
Copy the code

fixed

Fixed can also be used with a dependency free layout, which implements a fixed position within an element as follows

<div class="father" > 
    <div class="son" > </div > 
</div >
Copy the code
.father {
  width: 300px;
  height: 200px;
  position: relative;
}
.son {
  width: 40px;
  height: 40px;
  position: fixed;
  margin-left: -40px;
}
Copy the code

Positioning attributes such as left cannot be used as absolute positioning without dependencies.

Gets the scroll bar width

The following code can obtain the scroll bar width, avoiding page offset when the scroll bar is disabled.

/ / show
var widthBar = 17,
  root = document.documentElement;
if (typeof window.innerWidth == "number") {
  widthBar = window.innerWidth - root.clientWidth;
}
root.style.overflow = "hidden";
root.style.borderRight = widthBar + "px solid transparent";
/ / hide
var root = document.documentElement;
root.style.overflow = "";
root.style.borderRight = "";
Copy the code

z-index

Z-index is only useful for positioning elements in CSS2 but flex support has been added in CSS3

font-size

vertical-align
font-size 

p {
  font-size: 16px;
  line-height: 1.5;
}
p > img {
  vertical-align: -25%;
  vertical-align: 0.6 the ex; ; }Copy the code

The vertical-align child element uses percentages to center ICONS and text and is not affected by font size, but by line height. If it is ex, not only can be implemented but also will not be affected by the row height.

text-decoration

In Chinese, the text-decoration may overlap with the words in the next line. At this time, we use the border as the underline. The color of the border is not set, and it will be the same color as the font by default.

Show and Hide

Use visibility and absolute positioning to hide and not occupy position. Or transparency plus absolute positioning

.hidden {
  position: absolute;
  visibility: hidden;
}

.opacity {
  position: absolute;
  opacity: 0;
  filter: Alpha(opacity=0);
}
Copy the code

Visibility is a small difference from display

The child elements of visibility are hidden but visible if they are set to visibility: Visible, but the display: None element does not.














Quote: CSS World