calc()





css/style.css
  • div {
  •  height: 30px;
  •  background-color: #3BA9DE;
  • }
  •  
  • #div1 {
  •  width: calc(50px + 50px);
  • }
  •  
  • #div2 {
  •  width: calc(200px - 50px);
  • }
  •  
  • #div3 {
  •  width: calc(50px*4);
  • }
  •  
  • #div4 {
  •  width: calc(1000px/4);
  • }
div {
 height: 30px;
 background-color: #3BA9DE;
}

#div1 {
 width: calc(50px + 50px);
}

#div2 {
 width: calc(200px - 50px);
}

#div3 {
 width: calc(50px*4);
}

#div4 {
 width: calc(1000px/4);
}


index.html
  • <!DOCTYPE html>
  • <html>
  • <head>
  •  <meta charset="utf-8" />
  •  <title>New Page</title>
  •  <link href="css/style.css" rel="stylesheet" />
  • </head>
  • <body>
  •  <div id="div1"></div>
  •  <br />
  •  <div id="div2"></div>
  •  <br />
  •  <div id="div3"></div>
  •  <br />
  •  <div id="div4"></div>
  • </body>
  • </html>
  • <!DOCTYPE html>
  • <html>
  • <head>
  •  <meta charset="utf-8" />
  •  <title>New Page</title>
  •  <link href="css/style.css" rel="stylesheet" />
  • </head>
  • <body>
  •  <div id="div1"></div>
  •  <br />
  •  <div id="div2"></div>
  •  <br />
  •  <div id="div3"></div>
  •  <br />
  •  <div id="div4"></div>
  • </body>
  • </html>