CSSスタイル--レイアウト編

1.css基本スタイル
①背景文法
        background: background-color || background-image || background-repeat || background-attachment || background-position

background:#000 url(    ) no-repeat fixed（scroll）5px center

background-imageグラデーション背景:

html, body {
    width: 100%;height: 100%;
}
body {
    background-image: linear-gradient(top bottom, #7A88FF, #7AFFAF);
}

background-image:適応高さ

background:url("lizard.png") no-repeat 100% auto center scroll;

②テキスト属性

①       ：
text-align: left | center | right
②    :
text-decoration: underline | overline | line-through
③      ：
text-transform: capitalize | uppercase | lowercase
④      、     
text-indent: 2em | h1 { letter-spacing:2px; }
⑤     ：
word-wrap：break-word | normal
⑥       ：
vertical-align：top | middle | bottom
⑦   ：
line-height：normal | 10px
⑧    ：letter-spacing 
     ：opacity：0  | rgba(0,0,0, .5)         0-1     
⑨   ：overflow: hidden/suto/scroll  
         ：white-space:nowrap;
⑩      ：
overflow: hidden；text-overflow：ellipsis；

③ulリストスタイル/linkラベル

① list-style-image: url();
② list-style-opsition: outside | inside
③ list-style-type：circle | disc | square

④ダミーセレクタ

①       ：lvha
     a: link | visited | hover | active

②       （checked   input radio checkbox  ）
    input: checked + span { color:red; }
    .menu>div{ border-right: 1px solid #000000;}
    .menu>div>div: first-child{ border-right: none; }
    .menu>div>div: nth-child(2){ border-right: none; }

③       ： content    
p:: before { content="  "; | content: url("img/wall.png")} 
  
p:: after{ content="  ";)}

2.箱
①外マージンマージ/内マージンの問題

①   div    ，margin-bottom、margin-top                
    div    ，    margin-top        margin-top，
      ：overflow：hidden
           border：1px solid red;
           padding：1px;
②     padding border  div  
      ：  div   
           box-size: border-box;（    :        IE   ）
    ：
           box-size: content-box（    ：  padding border    google   ）
           

②フレキシブルボックスflexBox

①    ：
  display: flex;           | float， clean，vertical-align      
  align-items: stretch | center | flex-start | flex-end;       
  justify-content: flex-start|spacing-between|spacing-around|center|flex-end;       
  flex-direction: row | column;       
     ：
  flex-grow: 1;flex-grow: 2;flex-grow: 3;     6 
  
②       
  .box ul{
    display: flex; align-items:center; justify-content:spacing-around; 
  }
  .box ul li{flex-grow:1;  text-align: center;}


    

        
トップページ
        
トップページ
        
トップページ
    


③      
   arrow,.search{width:75px;height:75px;}
  .title{height:75px;line-height:75px;   flex-grow:1; }  ： title        
  
   

   

             
   
   

③ 居中方式

      ：
①       ：     text-align: center;
②         ： line-height = height;
③       ：     .div{ margin: 0 auto; }
④          ： 
    1）    ：   { dispaly: flex; align-items: center; justify-content: center; }
    2)table-cell：   { dispaly: table-cell; vertical-align: center; } 
                     { margin: 0 auto; }
    3）    ：   { position: relative; } 
                   { position: absolute; left: 25%; top: 25%; }

④position位置決め/z-index積載順序

left: 20px; top: 30px; 
①     ：position: static;            ，      
②     ：position: relative;              ，        
③     ：position: absolute;          ，       
④     ：position: fixed;               

    
div1{ 
    position: absolute; 
    z-index: 1; 
}
div2{ 
    position: absolute; 
    z-index: 2; 
}

⑤フローティングfloatのクリア:left/非表示要因

①      div { clear：both；}
②        div     
    .parent:：after{ content=""; dispaly: block; clear：both;}
③        div  
    .parent{ overflow: hidden; }
③        div  
    .parent{ height: 100px; }

① display: none;     ，  
① opacity: 0;  visibility: hidden;      ，    

⑥ブラウザ接頭辞

①   
  ：-moz-
IE： -ms-
Opera：-o-
  、safari、360、  ：-webkit-

②     
-webkit-background-clip: text | border-box | padding-box | content-bx

③     
-webkit-transition: 1s;  -moz-transition: 1s;  -ms-transition: 1s;  -o-transition: 1s;
transition: 1s;

3.ラベル属性のリセット

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td{margin: 0;padding: 0;}

body {padding:0;margin:0;text-align:center;color:#333;font-size:14px;font-family:"  ", arial;}

li{list-style-type:none;}

a{text-decoration: none;}

img,input{border:none;vertical-align:middle;}