Skip to content

CSS

Jump to bottom
Johnson Fu edited this page Nov 5, 2019 · 12 revisions

standard

apply border-box

    :root {
      box-sizing: border-box;
    }

    *,
    ::before,
    ::after {
      box-sizing: inherit;
    }

float sample

https://github.com/quantificial/css-in-depth/master/ch04/listing-4.18.html

clear fix for container with float elements

    .clearfix::before,
    .clearfix::after {
      display: table;
      content: " ";
    }
    .clearfix::after {
      clear: both;
    }

clear fix for odd element

    .media {
      float: left;
      width: 50%;
      padding: 1.5em;
      background-color: #eee;
      border-radius: 0.5em;
    }

    .media:nth-child(odd) {
      clear: left;
    }

apply row break to float items

    .row {
      margin-left: -0.75em;
      margin-right: -0.75em;
    }

    .row::after {
      content: " ";
      display: block;
      clear: both;
    }

flex box

flex container, such as nav bar

    .site-nav {
      display: flex;
      padding: .5em;
      background-color: #5f4b44;
      list-style-type: none;
      border-radius: .2em;
    }

another flex container sample

    .flex > * + * {
      margin-top: 0;
      margin-left: 1.5em;
    }

sample css code

<!doctype html>
<head>
  <style>
h1 {
  font-family: serif;
}

#page-title {
  font-family: sans-serif;
}

.title {
  font-family: monospace;
}

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box; /* apply border-box style */
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#test {
  border-width: 0.1em;
  border-color: blue;
  border-style: solid;
  padding: 0.5em;
  width:500px;
  margin: 1em auto;
  max-width: 200px;
  box-sizing: border-box;
}

#test2 {
  border-width: 0.1em;
  border-color: blue;
  border-style: solid;
  width:500px;
  margin: 0em auto;
  max-width: 200px;
  box-sizing: border-box;
}

#test3 {
  border-width: 0.1em;
  border-color: blue;
  border-style: solid;
  width:500px;
  max-width: 200px;
  box-sizing: border-box;

  position: relative; /* apply relative to the original position */
  top: -50px;
  left: 50px;
  background-color: white;

}

#test4 {
  position: fixed; /* with refer to the body */
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: blue;
}

#container {
  position: relative;
  box-sizing: border-box;
}

#leftbox {
  position:absolute; /* with refer to the parent container*/
  left:0;
  width:200px;
  border-style: solid;
  border-color: red;
  box-sizing: border-box;
}

#rightbox {
  position:static;
  margin-left:200px;
  box-sizing: border-box;
}

.floating {
  float:right;
  margin-right: 10px;
}

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

.after-box {
  clear: left; /* left side must be clear... */
}

.clearall {
  clear: left;
  clear:right;
}

.clearfix {
  overflow: auto; /*to make sure the container will overflow*/
}

#parent {
  border-width: 0.1em;
  border-color: blue;
  border-style: solid;
}
#child {
  float:right;
  width:100px;
}

/* use float to create the menu */
.nav {
  float: left;
  width: 200px;
  border-width: 0.1em;
  border-color: blue;
  border-style: solid;
}
.section {
  margin-left: 200px;
  border-width: 0.1em;
  border-color: blue;
  border-style: solid;
}

/*responsive design*/

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

.vertical-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

  </style>
</head>
<body>
  <header class="page-header">
    
    <div>
      example.... 1 <div style="display:inline">display block</div>.....
    </div>

    <div id="test" >test</div>
    <div id="test2">test2</div>
    <div id="test3">test3</div>

    <div id="container">
      <div id="leftbox"> left box menu</div>
      <div id="rightbox">right box content</div>
      <div id="rightbox">right box content</div>
      <div id="rightbox">right box content</div>
    </div>

    <div id="float1" class="floating">
      floating....1
    </div>
    <div id="float2" class="floating">
        floating....2
    </div>
    <div id="float3" class="floating">
          floating....3
    </div>

    <div class="box">box box box box box box box ...</div>
    <section class="after-box">testing section............</section>

    <div width="100px" id="parent" class="clearfix">
      container container ..... container ...... container ....
      <div id="child">
        child child child child......
        child child child child......
        child child child child......
        child child child child......
        child child child child......
        child child child child......
        child child child child......
        child child child child......
      </div>
    </div>

    <div>
      <div class="nav"> menu </div>
      <div class="section">...................</div>
    </div>

    <div class="clearall clearfix">
    <nav>
      <ul>
      <li>menu 1</li>
      <li>menu 2</li>
      <li>menu 3</li>
    </ul>
    </nav>
    <section>
      this is the content 1...
    </section>
    <section>
      this is the content 2.....
    </section>
  </div>

  <div class="vertical-container">
    <div>this is testing</div>
  </div>
    <div id="test4">test 4</div>
    <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>

    <nav>
      <ul id="main-nav" class="nav">
        <li><a href="/">Home</a></li>
        <li><a href="/coffees">Coffees</a></li>
        <li><a href="/brewers">Brewers</a></li>
        <li><a href="/specials" class="featured">Specials</a></li>
      </ul>
    </nav>
  </header>
</body>

Resources

  • freemarker
  • thymeleaf
  • JMX (jconsole)
  • ZeroMQ
  • microk8s
  • multipass
  • pwsh (powershell)

Clone this wiki locally