CSS裡不為人知的祕密(01)之常見屬性使用

01) label 和 radio 配合

　 label 和 input 中 radio 配合使用,讓文字可以點選

<div>
    <input type="radio" id="foo" name="drone" value="foo"
           checked>
    <label for="foo">foo</label>
</div>

<div>
    <input type="radio" id="bar" name="drone" value
 
="bar">
    <label for="bar">bar</label>
</div>

<div>
    <input type="radio" id="hello" name="drone" value="hello">
    <label for="hello">hello</label>
</div>

02)border 和 outline 區別

輪廓不佔據空間，繪製於元素內容周圍。
根據規範，輪廓通常是矩形，但也可以是非矩形的

div{
    outline:3px solid red;/* 檢視網頁佈局的時候很方便 */
 
}

outline屬性

03)css 屬性值 display

/* display: block; */ /* 瀏覽器預設樣式 */
/* display: inline; */ /* 設定為行內元素 */
/* display: none; */ /* 隱藏元素不佔空間 */
/* display: inline-block; */ /* 可以和行內元素在同一行, 可以設定寬度和高度*/

css 屬性值 display

04)css 屬性值min-width 和 max-width

/* width: 100px;*/
/* min-width: 800px; */  /* 內容寬度小於盒子寬度800的時候出現滾動條 */
/* max-width: 100px; */  /*  內容在寬度大於盒子寬度100的時候換行 */