[CSS] CSS 笔记

CSS 备忘


※ 格式 ※ 布局


※ 格式

media = all print screen
border : 1px solid 000000; auto; (上右下左)(上右)(上)
border-style : solid dashed double dotted groove ridge inset outset  

background-image :url(yp.jpg);
background-repeat : no-repeat; repeat-x; repeat-y; repeat;
background-attachment : fixed; scroll;
background-position : center center; 20% 20%;

list-style : url("circle.gif") none inside;
list-style-type : none disc (全黑) circle (空心) square (正方形)

border-collapse : collpase
position : top, right, bottom, left    p { position:relative; top:10px; left:50px; }

letter-spacing :8px;
line-height :40px;
text-align : left right center justified
text-transform capitalize uppercase lowercase none
word-spacing


※ 布局

◎ 置中

   .centered {
       position: fixed;
       top: 50%; left: 50%;
       margin-top: -50px; margin-left: -100px;
   }

◎ Learn CSS Layout  130318#

  .simple { width: 500px; margin: 20px auto; }

   .fancy {
     width: 500px; margin: 20px auto; padding: 50px;
     border: solid blue 10px;
   }

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

    ‧ 定位

   // default, not positioned
   .static { position: static; }

   // behaves the same as static unless you add some extra properties.
   .relative1 { position: relative; }

   // setting the top, right, bottom, left
   .relative2 {
     position: relative; background-color: white; width: 500px;
      top: -20px; left: 20px;
    }

   // relative to the viewport, which means it always stays in the same place even if the page is scrolled.
   // 固定在窗口右下角
   .fixed {
     position: fixed; bottom: 0; right: 0; width: 200px;
     background-color: white;
   }

   // absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport.
   // if no positioned ancestors, it uses body, and still moves along with page scrolling. (except static)

   .relative {
     position: relative; width: 600px; height: 400px;
   }

    .absolute {
     position: absolute; width: 300px; height: 200px;
     top: 120px; right: 0;
   }

    ‧ Position example

    ‧ float
   img {
     float: right;
     margin: 0 0 1em 1em;
   }

   .box {
     float: left;
     width: 200px;
     height: 100px;
     margin: 1em;
   }
   .after-box {
     clear: left; /* 清除左边内容, 会导致 .box 往上浮 */
   }

   // 浮动图片的内容, 要避免内容与图片高度不符
   .clearfix { overflow: auto; }

    ‧ media
   @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; }
   }

    ‧ inline-block
   // create a grid of boxes

   1. The Hard Way
   .box { float: left; width: 200px; height: 100px; margin: 1em; }
   .after-box { clear: left; }

   2. The Easy Way
   .box2 { display: inline-block; width: 200px; height: 100px; margin: 1em; }

   ‧ inline-block layout
    nav { display: inline-block; vertical-align: top; width: 25%; }
   .column { display: inline-block; vertical-align: top; width: 75%; }

    ‧ column
   .three-column {
     padding: 1em;
     -moz-column-count: 3; -moz-column-gap: 1em;
     -webkit-column-count: 3; -webkit-column-gap: 1em;
     column-count: 3; column-gap: 1em;
   }

    ‧ flexbox
    ‧ css frameworks


[CLEAN]
background: url(/pix/diamond-black.gif) 22px 0.66em no-repeat;
background:transparent url(../images/nav_back.gif) bottom left no-repeat;

@page { margin: 1in 2cm; }

overflow:auto; overflow-y: visible;

    text-overflow: ellipsis; overflow:hidden; width: 300px;

文字阴影 text-shadow: 1px 1px 1px #000000;


~ THE END ~