[TOC] Demo - 淘寶首屏：http://a-1.vip/demo/TB ## :-: <a href="http://www.w3school.com.cn/cssref/css_units.asp">CSS 單位</a> :-:  ## :-: <a href="https://www.runoob.com/cssref/css-functions.html">CSS 函數</a>  ## :-: 去掉button默認樣式 ``` border: none; background-color: transparent; outline: none; //消除默認點擊藍色邊框效果 ``` ## :-: CSS三件套打點展示 ``` div{ /* 文字溢出禁止換行 */ white-space: nowrap; /* 超出部分隱藏 */ overflow: hidden; /* 文字溢出部分點點... */ text-overflow: ellipsis; } ``` ## :-: CSS文本的對齊 ``` /* 文本·水平居中 */ text-align: center; /* 文本·水平居左 */ text-align: left; /* 文本·水平居右 */ text-align: right; /* 文本·行高(與父級元素一樣高時即垂直居中) */ line-height: 35px; /* 定義行內元素在行框內的垂直對齊方式 */ vertical-align: middle; 取值： baseline —— 把當前盒的基線與父級盒的基線對齊。如果該盒沒有基線，就將底部外邊距的邊界和父級的基線對齊 sub —— 把當前盒的基線降低到合適的位置作為父級盒的下標（該值不影響該元素文本的字體大小） super —— 把當前盒的基線提升到合適的位置作為父級盒的上標（該值不影響該元素文本的字體大小） text-top —— 把當前盒的top和父級的內容區的top對齊 text-bottom —— 把當前盒的bottom和父級的內容區的bottom對齊 middle —— 把當前盒的垂直中心和父級盒的基線加上父級的半x-height對齊 top —— 把當前盒的top與行盒的top對齊 bottom —— 把當前盒的bottom與行盒的bottom對齊 /* 縮進2個字符的距離 */ text-indent: 2em; /* 調整文字之間的間距 */ letter-spacing: 5px; ``` ## :-: DIV - 水平垂直居中 ``` div 水平居中 div.demo { box-sizing: border-box; width: 450px; height: 450px; border: 1px solid red; margin: 0 auto; } 方法一：未知盒子寬高、 父級元素 position: relative; div.demo { box-sizing: border-box; width: 450px; height: 450px; border: 1px solid red; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } 方法二：已知盒子寬高、 父級元素 position: relative; div.demo { box-sizing: border-box; width: 450px; height: 450px; border: 1px solid red; position: absolute; top: 50%; left: 50%; margin-top: -225px; margin-left: -225px; } CSS3.0方法：未知盒子寬高、 父級元素 position: relative; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ``` ## :-: 觸發bfc的屬性、(解決margin塌陷) ``` /* 絕對定位 */ position: absolute; /* 行級塊元素 */ display: inline-block; /* 左浮動、右浮動 */ float: left/right; /* 溢出部分隱藏 */ overflow: hidden; ``` ## :-: float - 清除浮動流 ``` ul::after { /* 設置塊級屬性 */ display: block; /* 添加空文本內容 */ content: ""; /* 清除浮動流的屬性 */ clear: both; } ``` ``` // 添加背景 background: url(../images/jt_l.png) no-repeat; background-position: 22px 13px; ``` ## :-: 禁止文本內容選中 ``` body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ``` ## :-: 關于設置最大/最小寬高，以及滾動條及其樣式 ``` div#demo { /* 設置最小高度、寬度 */ min-height: 100px; max-height: 500px; /* 設置最大高度、寬度 */ min-width: 100px; min-width: 500px; /* 超出部分滾動條展示(自適應) */ overflow-y: auto; } /* ········· ········· 設置滾動條的樣式 ········· ········· */ div#demo::-webkit-scrollbar { /* 滾動條整體樣式 */ /* 高寬分別對應橫豎滾動條的尺寸 */ /* 寬度 */ width: 6px; /* 高度 */ height: 0; } div#demo::-webkit-scrollbar-thumb { /* 滾動條里面小方塊 */ /* 圓角 */ border-radius: 3px; /*內投影*/ /* box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2); */ /* 背景色 */ background: #d1d4db; } div#demo::-webkit-scrollbar-thumb:hover { /* 滾動條里面小方塊 鼠標懸浮樣式 */ /* 背景色 */ background: #e2e5ee; } div#demo::-webkit-scrollbar-track { /* 滾動條里的軌道 */ /* 圓角 */ border-radius: 3px; /*內投影*/ /* box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2); */ /* 背景色 */ background: rgb(246, 246, 246); } ``` ## :-: 編輯框(input) ``` input { /* 編輯框(input) 取消輪廓樣式 */ outline: none; width: 200px; height: 20px; border: 1px solid #425; border-radius: 5px; padding: 0 5px; } ```