Collection of CSS Knowledge Ive collected

CSSTricks.md

box-sizing for reliable sizing of divs

You can use : box-sizing: border-box so that width takes border-width into calculations.

No repaint Border Add on Hover

Use box shadow and set either border or box-shadow to transparent and then color in on hover

.div {
  box-shadow: inset 0px 0px 0px 4px transparent;
}
.div:hover {
  box-shadow: inset 0px 0px 0px 4px black;
}

Center align Vertically and Horizontally

can use display:flex

.parent {
  width: 150px;
  height: 150px;
  float:left;
}

.child {
  display:inline-block;
  font-family: Arial;
  font-weight: bold;
  color: white;
  font-size: 1.5em;
  text-align: center;
}

.parent.one {
  display:flex;
  background: blue;
}

.parent.one .child {
  margin:auto;
}

.parent.two {
  margin-left: 10px;
  display:flex;
  justify-content:center;
  background: red;
  align-items: center;
}

Position child by setting it as Absolute and using top, bottom, left, right and parent as relative

.parent {
  position: relative;
  width: 300px;
  height:300px;
  background:red;
}

.child {
  position: absolute;
  width: 150px;
  height: 150px;
  background: white;
  right: 5px;
  top:5px;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.5)
}

Force Elem Self-Clear its Children

CSS-Tricks Link

.group:after {
  content: "";
  display: table;
  clear: both;
}